Ajaxフレームワーク UI部品リファレンス
目次 索引 前ページ次ページ
第2章 画面部品> 2.3 テーブル部品

2.3.5 ViewColumnGrid

ViewColumnGridは、DataGridのテーブルの列を定義する部品です。



ViewColumnGridは、Internet Explorerでだけ利用可能な部品です。

■記述形式

<div rcf:type="DataGrid" ... >
  <div rcf:type="ViewColumnGrid" rcf:name="xxx" ... ></div>
  ...
</div>

■プロパティ

表の項目の意味は、“表の項目の意味”を参照してください。

名前

データ型

説明

省略

省略値

属性指定

更新

部分更新

name

String

カラムの名前を指定します。
DataGridにあるViewColumnGrid、ViewColumnCheck、ViewColumnTree、ViewColumnSelect、ViewColumnImage内で、一意の値を指定してください。一意でない値を指定した場合、エラーになります。

不可

−

値

不可

不可

columnSpan

Number

セルの結合をする場合、結合するカラム数を指定します。

可

1

値

不可

不可

columnWidth

Number

列幅を指定します。単位はピクセルです。
最小値は10です。10未満の数値を指定した場合や数値以外を指定した場合は、エラーとなります。
複数行にわたる列ヘッダを定義する場合は、最初に定義された列幅の指定が優先されます。
列が結合されている場合には、以降の行において、最初に定義されている結合されていない列幅の指定が有効になり、以降の列幅は最初の列幅の定義を元に自動的に調整されます。
指定しない場合は、DataGridのdefaultColumnWidthプロパティの値となります。

可

指定なし

値

不可

不可

showFilter

Boolean

フィルタ用コンボボックスの表示/非表示を指定します。

  • true: フィルタ用コンボボックスを表示します。
  • false: フィルタ用コンボボックスを表示しません。

可

false

値

不可

不可

fixable

Boolean

列を固定表示するかどうかを指定します。
最後尾列に指定することはできません。

  • true: 固定する
  • false: 固定しない

可

false

値

不可

不可

sortitem

Number

結合されたセルに対するソート対象を指定します。

可

0

値

不可

不可

renderer

Render関数を持つオブジェクト

render関数は、セルの表示カスタマイズを指示するオブジェクトを返します。
オブジェクトの内容にtextDecorationのline-throughを指定することでセル単位の取り消し線の設定ができます。

可

null

値

不可

不可

selectedRenderer

Render関数を持つオブジェクト

render関数は、選択されたセルの表示カスタマイズを指示するオブジェクトを返します。

可

null

値

不可

不可

ViewColumnのプロパティも指定できます。ただし、focusable、selectableの各プロパティは利用できません。詳細は“ViewColumn”の“プロパティ”を参照してください。なお、comparatorプロパティに指定した関数には、プレフィックス付のデータを渡します。

部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

columnSpanプロパティを使用した列結合方法
結合する列の種類によって、方法が変わります。
テーブルにフィルタ用コンボボックスを表示するための指定方法
フィルタ用コンボボックスの表示および非表示は、showFilterプロパティで列ごとに指定することができます。

以下に例を示します。

<script type="text/javascript">
//<![CDATA[
  var modelData = {
    scores: [
      { id: 'ID0001',  name: 'Andy',  score: 90 },
      { id: 'ID0002',  name: 'Bob',   score: 80 },
      { id: 'ID0003',  name: 'Cindy',  score: 100 },
      { id: 'ID0004',  name: '...',  score: 90 },
      { id: 'ID0005',  name: '...',  score: 80 }
    ],
    flist: {
        column1: ['ID0001', 'ID0002', 'ID0003'],
        column2: ['2', 'Andy', 'Bob'],
        column3: []
    }
  };

  // イベント定義
  eventMap = {
    grid1:{
      selectfilter: selectFilter,
      ...
    }
  };

  // イベント登録
  RCF.addInitializedListener(
    function(eventObject) {
      rcf.event.EventRegistrar.registerEvents(eventMap, "eventMap");
    }
  );

  // フィルタ用コンボボックスのリストが選択された場合に呼び出される関数
  function selectFilter() {
    // ここでフィルタリングしてください。
    ...
    // ここですべてのフィルタ用コンボボックスの選択内容を取得してください。
    var array = getFilterList();
    // ここでデータオブジェクトを作成してください。
    var changeScores = new Array();
    ...
    // ここでDataGridのdataプロパティを更新してください。
    grid1.getDataProvider("data").setData(changeScores);
  }

//]]>
</script>
...
<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:id="grid1" rcf:data="{model1.scores}" rcf:filterList="{model1.flist}" rcf:filterCount="5">
<div rcf:type="ViewColumnGrid" rcf:name="column1" rcf:propertyName="id" rcf:label="ID" rcf:showFilter="true"></div>
<div rcf:type="ViewColumnGrid" rcf:name="column2" rcf:propertyName="name" rcf:label="名前" rcf:showFilter="true"></div>
<div rcf:type="ViewColumnGrid" rcf:name="column3" rcf:propertyName="score" rcf:label="スコア" rcf:showFilter="false">
  <div rcf:type="NumberInput"></div>
</div>
</div>

以下は、フィルタ用コンボボックスの表示例です。

fixableプロパティ指定方法
以下にプロパティの指定方法を示します。 
<div rcf:type="DataGrid" ... >
  <div rcf:type="ViewColumnCheck" rcf:name="check" rcf:propertyName="check" rcf:label="選択"></div>
  <div rcf:type="ViewColumnTree" rcf:name="detail"  rcf:label="詳細" rcf:fixable="true"></div>
  <div rcf:type="ViewColumnGrid" rcf:name="column1" rcf:propertyName="name1" rcf:label="ID"></div>
  <div rcf:type="ViewColumnGrid" rcf:name="column2" rcf:propertyName="name2" rcf:label="名前"></div>
  <div rcf:type="ViewColumnGrid" rcf:name="column3" rcf:propertyName="name3" rcf:label="スコア"></div>
...
</div>

以下は、“詳細”列を固定列に指定した場合の固定列指定機能の表示例です。

複数の列を固定列に指定した場合、最後に指定された列が固定列となります。

sortitemプロパティの指定方法
列ヘッダを結合した場合について説明します。
sortitemに2を指定した場合、図中の赤で囲まれた箇所がソートされます。 
...
<div rcf:type="DataGrid" rcf:data="{model1.data}">
  <div rcf:type="ViewColumnGroup" rcf:dispType="column">
    <div rcf:type="ViewColumnGrid" rcf:name="column1" rcf:label="ラベル1"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="column2" rcf:label="ラベル2" rcf:columnSpan="5" rcf:sortitem="2"></div>
  </div>
...
</div>

上記の例でのソートの対象データを以下に示します。

rendererおよびselectedRendererプロパティ
以下のプロパティを持ったオブジェクトを返すことで、セルの表示をカスタマイズできます。

プロパティ名

データ型

説明

color

String

セルの文字の色
セルやセルを含む行に対して、フォーカス、選択、マウスオーバーなどのイベントが発生した場合は、操作によるスタイルが優先されます。

backgroundColor

String

セルの背景色
セルやセルを含む行に対して、フォーカス、選択、マウスオーバーなどのイベントが発生した場合、操作によるスタイルが優先されます。

borderColor

String

セルのボーダーの色

borderStyle

String

セルのボーダーの種類

fontFamily

String

セルの文字のフォント名

fontSize

String

セルの文字のフォントサイズ(ピクセル数)

fontWeight

String

セルの文字のウェイト

textAlign

String

セルのテキストの行揃え

verticalAlign

String

セル内容の縦のデフォルト表示位置

value

String

実際に表示するセルの内容
ここで設定した値は、バインディングしているモデルには反映されません。

textDecoration

String

セルの文字装飾
line-throughを設定すると、セル単位で取り消し線が設定できます。


取り消し線(textDecoration)の設定には、以下の2つの方法があります。

■スタイルプロパティ

本部品のスタイルプロパティでは、定義する列のスタイルを指定することができます。

パーツ名

プレフィックス

クラス名

使用可能なスタイル

列ヘッダ

ccell

rcf-DataGrid-ccell*
* は列番号(0〜)を表します。
  • フォント(lineHeightを除く)
  • セル

セル

cell

rcf-DataGrid-cell*
* は列番号(0〜)を表します。
  • カラー
  • フォント(lineHeightを除く)
  • ボーダー(borderWidthを除く)
  • セル(注)

ツリー展開時の詳細データ表示セル

detail

rcf-DataGrid-detail*
* は列番号(0〜)を表します。
  • カラー
  • フォント(lineHeightを除く)
  • ボーダー(borderWidthを除く)
  • セル(注)

注) DataGridでは、textDecorationを指定することができます。
textDecorationでは、文字装飾を指定します。CSSのtext-decorationプロパティの値を指定できます。
line-throughを指定すると、取り消し線が設定できます。Internet Explorerでは、blinkは指定できません。


取り消し線(textDecoration)の設定には、以下の2つの方法があります。

■イベントリスナ

固有のイベントリスナはありません。部品共通のイベントリスナは、“画面部品共通イベントリスナ”を参照してください。

■JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

目次 索引 前ページ次ページ
Copyright 2008 FUJITSU LIMITED