igGridで同じ列の隣接セルを結合して表示する

IgniteUI

igGridで表示したグリッドで、よくExcelでやるように同じ列の複数行を結合して表示させる方法。

igGridCellMergingを使用します。

確認は、JSFiddleのigGrid選択サンプルページ　で行いました。

igGridCellMergingを適用する

「単一のセルを選択」のタイトルがついているグリッドの、igGrid初期化処理中のfeaturesプロパティに機能の配列を渡しているところの末尾に以下の処理を追加します。

1
2
3
4
5
6
7
},
{
  name: "CellMerging"
},
{
  name: "Sorting"
}

画面左上の「Run」のリンクを踏み、画面が更新されたら、「役職」列をクリックして並び替えるとこんな感じになります。

同じ列で、隣り合った行の値が同じものをマージして表示する機能なので、ソートが必要です。

初期表示時点でマージ表示する

initialStateプロパティをmergedにすると、対象のすべての列をマージした状態で表示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
},
{
  name: "CellMerging",
  initialState: "merged"
},
{
  name: "Sorting",
  columnSettings : [
      {
          columnIndex: 1,
          allowSorting: true,
          firstSortDirection: "ascending",
          currentSortDirection: "descending"
      }
  ]           
}

 

igGridGroupByでも適用される

GroupBy機能を利用した場合も、同じ値が隣接行に並ぶので、CellMergingは適用されるようです。

GroupByのサンプルページでもfeaturesでGroupByとCellMergingを両方適用しているので確認できます。