2.3.7 ViewColumnCheck

Ajaxフレームワーク UI部品リファレンス

目次索引

第2章画面部品

> 2.3 テーブル部品

2.3.7 ViewColumnCheck

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

記述形式
プロパティ
スタイルプロパティ
イベントリスナ
JavaScript API

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>

■プロパティ

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

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
name	String	カラムの名前を指定します。 DataGridにあるViewColumnGrid、ViewColumnCheck、ViewColumnTree、ViewColumnSelect、ViewColumnImage内で、一意の値を指定してください。一意でない値を指定した場合、エラーになります。	不可	－	値	不可	不可
propertyName	String	DataGridのオブジェクトを含むdataプロパティのオブジェクトで、チェックボックスの状態を示すプロパティ名を指定します。	可	－	バインド	可	可
label	String	列ヘッダ部に表示する文字列を指定します。	可	nameプロパティの値	値	不可	不可
columnWidth	Number	列幅を指定します。単位はピクセルです。最小値は10です。10未満の数値を指定した場合、エラーとなります。指定しない場合は、DataGridのdefaultColumnWidthプロパティの値となります。	可	指定なし	値	不可	不可

配置列に対して、編集はできません。
複数のチェックボックスを設定することはできません。複数の設定を行った場合は、エラーになります。
ソートが行われた場合でも、チェックボックスの状態は保持されます。

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

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

propertyNameプロパティの指定値

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

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

ビット番号0 (LSB: Least Significant Bit):チェックボックスの選択状態
ビット番号1:活性状態(使用可否)

ビット番号2 (MSB: Most Significant Bit):表示状態

設定値 (括弧内の数字はビット番号)				説明
	表示 (2)	活性 (1)	選択 (0)	説明
0～7以外	-	-	-	チェックボックスを表示しません。
0～3	0	0/1	0/1	チェックボックスを表示しません。
4	1	0	0	チェックボックスを使用不可 + 非選択状態で表示します。
5	1	0	1	チェックボックスを使用不可 + 選択状態で表示します。
6	1	1	0	チェックボックスを使用可 + 非選択状態で表示します。
7	1	1	1	チェックボックスを使用可 + 選択状態で表示します。

ソート順は、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”を参照してください。

目次索引