2.3.8 ViewColumnTree

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

目次索引

第2章画面部品

> 2.3 テーブル部品

2.3.8 ViewColumnTree

ViewColumnTreeは、DataGridのテーブルで指定した列にツリー展開用のボタンを配置する部品です。

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

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

■記述形式

<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:id="grid1" rcf:type="DataGrid" rcf:data="{model1.data}">
  <div rcf:type="ViewColumnTree" rcf:name="detail1" rcf:label="詳細"></div>
  ...
</div>

■プロパティ

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

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

配置列に対して、編集はできません。
配置列に対して、ソートはできません。
複数のツリーを設定することはできません。複数の設定を行った場合は、エラーになります。
ツリーの展開は、ViewColumnGroupに詳細データ(detail)を追加することにより可能になります。

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

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

ツリー展開ボタンと詳細データの指定方法

以下にツリー展開ボタンおよび詳細データの指定方法を示します。

詳細データの指定と表示は、DataGridのonOpenDetailイベントリスナで設定します。

フレームワークの呼び出し元で、onOpenDetailイベントで展開通知を受け取った際に表示する詳細データを指定して、JavaScript APIのshowDetail()メソッドを呼び出すことにより、詳細データがツリー展開されます。

<script type="text/javascript">
//<![CDATA[
  var modelData = {
    data: [
      { name1: 'data1-1',  name2: 'data2-1',  name3: 'data3-1'},
      { name1: 'data1-2',  name2: 'data2-2',  name3: 'data3-2'},
      { name1: 'data1-3',  name2: 'data2-3',  name3: 'data3-3'},
      { name1: 'data1-4',  name2: 'data2-4',  name3: 'data3-4'},
      { name1: 'data1-5',  name2: 'data2-5',  name3: 'data3-5'}
    ]
  };

  // イベント登録
  eventMap = {
    grid1:{
      opendetail: createDetail,
      ...
    }
  };

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

// 詳細展開用ボタンがクリックされた場合に呼び出される関数
  function createDetail(eventObj) {
    // ここで詳細データのオブジェクトを作成してください。
    var detailData1 = {
      data : [
        {dcolumn1: 'det0-1', dcolumn2: 'det0-2', dcolumn3: 'det0-3'},
        {dcolumn1: 'det1-1', dcolumn2: 'det1-2', dcolumn3: 'det1-3'},
        {dcolumn1: 'det2-1', dcolumn2: 'det2-2', dcolumn3: 'det2-3'}
      ]
    };
    // ここでJavaScriptAPIを呼び出して詳細データを表示してください。
    grid1.showDetail( eventObj, detailData1, "tree1");
  }

  // ユーザ定義関数
  function createDetailAll(eventObj) {
    // ここで詳細データのオブジェクトを作成してください。
    var allData = new Array();
    ...
    // ここでJavaScriptAPIを呼び出して詳細データを表示してください。
    grid1.openDetailAll( allData, "tree2");
  }
//]]>
</script>

<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:id="grid1" rcf:type="DataGrid" rcf:data="{model1.data}">
  <div rcf:type="ViewColumnGroup">
    <div rcf:type="ViewColumnTree" rcf:name="detail1" rcf:label="詳細"></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 rcf:id="tree1" rcf:type="ViewColumnGroup" rcf:dispType="detail">
    <div rcf:type="ViewColumnGrid" rcf:name="dummy"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="dcolumn1"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="dcolumn2"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="dcolumn3"></div>
  </div>
  <div rcf:id="tree2" rcf:type="ViewColumnGroup" rcf:dispType="detail">
    <div rcf:type="ViewColumnGrid" rcf:name="dcolumn4"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="dcolumn5" columnSpan="2"></div>
  </div>

  <input type="button" onClick="createDetailAll();">全展開</input>
</div>

詳細データを表示した例を以下に示します。

■スタイルプロパティ

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

■イベントリスナ

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

■JavaScript API

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

目次索引