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

2.3.7 ViewColumnCheck

ViewColumnCheckは、DataGridのテーブルで指定した列にチェックボックスを配置する部品です。



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

■記述形式

<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:data="{model1.data}">
  <div rcf:type="ViewColumnCheck" rcf:name="checkbox1" rcf:propertyName="check" rcf:label="削除"></div>
  ...
</div>


子要素は指定できません。

■プロパティ

表の項目の意味は、“Text”の“プロパティ”を参照してください。

名前

データ型

説明

省略

省略値

属性指定

更新

部分更新

name

String

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

不可

−

値

不可

不可

propertyName

String

DataGridのオブジェクトを含むdataプロパティのオブジェクトで、チェックボックスの状態を示すプロパティ名を指定します。

可

−

バインド

可

可

label

String

列ヘッダ部に表示する文字列を指定します。

可

nameプロパティの値

値

不可

不可

columnWidth

String

列幅を指定します。単位はピクセル(px)またはエム(em)です。
指定には、数値だけを指定する方法と、数値の後ろに単位を指定する方法があります。
数値だけを指定した場合、単位はピクセルとして扱われます。
px、em以外の単位を指定した場合には、指定した値は無効となり、DataGridのdefaultColumnWidthプロパティの値となります。
emを指定した場合、セルのfontFamily、fontSizeを基準とし、幅を設定します。
ピクセルとして指定した場合の最小値は10ピクセルです。指定した値が10ピクセル未満の場合は、エラーとなります。
指定しない場合は、DataGridのdefaultColumnWidthプロパティの値となります。

可

指定なし

値

不可

不可

focusable(注)

Boolean

セルのフォーカスを可能にするかどうかを指定します。

  • true: フォーカス可
  • false: フォーカス不可

可

true

値

不可

不可

selectable(注)

Boolean

セルの選択を可能にするかどうかを指定します。

  • true: その列のセルが選択可能
  • false: その列のセルが選択不可

可

true

値

不可

不可

注) DataGridのfocusModeプロパティが0または1の場合にだけ、設定が有効となります。


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

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

propertyNameプロパティの指定値
ViewColumnCheckのpropertyNameプロパティに指定したデータオブジェクトの値には、チェックボックスの初期状態を表す以下の数値を指定します。

チェックボックスの状態は、0から7までの数値で指定します。数値の意味は、以下のとおりです。

ソート順は、ViewColumn部品と同様にcomparatorプロパティで指定できます。comparatorプロパティの指定がない場合、上表の設定値を数値として比較し、ソートします。(“0〜7以外”は0とみなします)。

ViewColumnCheckの指定方法

以下に例を示します。

<script type="text/javascript">
//<![CDATA[
  var modelData = {
    data: [
      { check: 3, name1: 'data1-1',  name2: 'data2-1',  name3: 'data3-1'},
      { check: 4, name1: 'data1-2',  name2: 'data2-2',  name3: 'data3-2'},
      { check: 5, name1: 'data1-3',  name2: 'data2-3',  name3: 'data3-3'},
      { check: 6, name1: 'data1-4',  name2: 'data2-4',  name3: 'data3-4'},
      { check: 7, name1: 'data1-5',  name2: 'data2-5',  name3: 'data3-5'}
    ]
  };
  var checkComparator = {
    compare: function(a, b) {
      /* ここでは簡単に単純な比較だけ行っている。
         活性、非活性にかかわらず、選択されていないチェックボックスが先、
         選択されているチェックボックスが後になるように比較する。
         表示されていないチェックボックスは最後とする。 */
      if ((a & 0x4 == 0) && (b & 0x4==0)) return 0; /* 非表示なら等しいとみなす */
      if (a & 0x4 == b & 0x4) { /* 表示同士なら選択状態で比較する */
        if (a & 0x1 < b & 0x1) return -1;
        if (a & 0x1 > b & 0x1) return 1;
        return 0;
      }
      if (a & 0x4 < b & 0x4) { /* 表示は非表示より先 */
        return 1;
      }
      else {
        return -1;
      }
    }
  }
//]]>
</script>

<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:data="{model1.data}">
  <div rcf:type="ViewColumnGroup">
    <div rcf:type="ViewColumnCheck" rcf:name="checkbox1" rcf:propertyName="check" rcf:label="削除" rcf:comparator="checkComparator"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="column1" rcf:propertyName="name1" rcf:label="ラベル1"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="column2" rcf:propertyName="name2" rcf:label="ラベル2"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="column3" rcf:propertyName="name3" rcf:label="ラベル3"></div>
  </div>
</div>

チェックボックスを表示する場合のイメージは以下のようになります。

■スタイルプロパティ

ViewColumnGridのスタイルプロパティと同様です。“ViewColumnGrid”の“スタイルプロパティ”を参照してください。

■イベントリスナ

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

■JavaScript API

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

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