[FlexGrid]複数行/列ヘッダを結合する方法

文書番号 : 81444     文書種別 : HowTo
登録日 : 2015/08/31     最終更新日 : 2016/04/04

対象製品

Wijmo 5

詳細

列ヘッダを複数行にして、各セルを結合する使用方法はW3Cでも言及されており一般的なユースケースです。FlexGridでは以下のようなサンプルコードで汎用的に実現することができます。
 /-----------------------------------------/
 |          |      Average      |   Red    |
 |          |-------------------|  eyes    |
 |          |  height |  weight |          |
 |-----------------------------------------|
 |  Males   | 1.9     | 0.003   |   40%    |
 |-----------------------------------------|
 | Females  | 1.7     | 0.002   |   43%    |
 /-----------------------------------------/

●2つのサンプルコード
最初のサンプル(「サンプル1(基本編)」)はPureJavaScriptで記述した分かりやすいサンプルです。2つ目のサンプル(「サンプル2(応用編)」)はより汎用的なコードになっており、ヘッダクリック時に列の選択処理が追加されています。

●サンプル1(基本編)の解説
FlexGridでヘッダを結合するには、FlexGridのallowMergingに結合したいエリアを設定した上で、対象オブジェクトのallowMergingをtrueに設定します。

サンプル1(基本編)




●サンプル2(応用編)の解説
columnGroups ファンクション: グループに子の列を持っていない場合、列を追加してグループデータからそのプロパティを初期化します。グループに子の列を持っている場合、子の列を作成するために自分自身を再帰的に呼び出し、その後、グループ全体のヘッダーセルにグループのキャプションを適用します。

mergeColumnGroups ファンクション: 列ヘッダ(ColumnHeaders)に対してallowMerging プロパティをtrueに設定することで結合を有効にします。

サンプル2(応用編)