作成日: 2015/08/31 最終更新日: 2016/04/04
文書種別
使用方法
詳細
列ヘッダを複数行にして、各セルを結合する使用方法はW3Cでも言及されており一般的なユースケースです。FlexGridでは以下のようなサンプルコードで汎用的に実現することができます。
２つのサンプルコード：
最初のサンプル（「サンプル1（基本編）」）は単純な処理を実装した分かりやすいサンプルです。
２つ目のサンプル（「サンプル2（応用編）」）はより汎用的なコードになっており、ヘッダクリック時に列の選択処理が追加されています。
/-----------------------------------------/ | | Average | Red | | |-------------------| eyes | | | height | weight | | |-----------------------------------------| | Males | 1.9 | 0.003 | 40% | |-----------------------------------------| | Females | 1.7 | 0.002 | 43% | /-----------------------------------------/
２つのサンプルコード：
最初のサンプル（「サンプル1（基本編）」）は単純な処理を実装した分かりやすいサンプルです。
２つ目のサンプル（「サンプル2（応用編）」）はより汎用的なコードになっており、ヘッダクリック時に列の選択処理が追加されています。
●サンプル1（基本編）の解説
FlexGridでヘッダを結合するには、FlexGridのallowMergingに結合したいエリアを設定した上で、対象オブジェクトのallowMergingをtrueに設定します。
●サンプル2（応用編）の解説
以下のグリッドでは、列が複数の列を含むグループからなる階層的な構造をしています。この構造を表現するために、列ヘッダーではセルの結合を行っています。列ヘッダーセルをクリックすると、列グループ全体が選択されます。
columnGroups ファンクション:
グループに子の列を持っていない場合、列を追加してグループデータからそのプロパティを初期化します。グループに子の列を持っている場合、子の列を作成するために自分自身を再帰的に呼び出し、その後、グループ全体のヘッダーセルにグループのキャプションを適用します。
mergeColumnGroups ファンクション:
列ヘッダ（ColumnHeaders）に対してallowMergingプロパティをtrueに設定することで結合を有効にします。
※ バージョン 5.20193.637 以降では、FlexGridのcolumnGroupsプロパティを使用することで列のグループ化が可能です。columnGroupsプロパティを使用することで、このサンプルで列ヘッダーの結合処理を行って実現しているのと同等の見た目を実現することが可能です。
関連情報
旧文書番号
81444