Alternate Row Colors Example 
準備中...
グリッド行の背景色を交代に表示して可読性を高めることができる。 Dataludi gridではアプリケーションの状況に合わせて要求事項が具現できるようにいくつかの方法を提供する。 まず、データセル並みで処理する方法について説明した後、データ行並みでレンダリングする方法について説明する。
1. セル動的スタイル
GridBody.rowDynamicStylesを利用して行の番号によってデータセルの背景色を別々にすることができる。 rowDynamicStylesは一つの行のすべてのデータセルに同じように適用される動的スタイルで、 グリッドレンダリング時点で行ごとに一回スタイルプロパティーの値たちが決定される。
grid.body().setRowDynamicStyles([{
expression: 'row % 2',
styles: { background: '#100000ff' }
}]);
"数量" カラムはignoreRowDynamicStylesプロパティーをtrueに指定して カラムスタイルで指定した色相で表示されている。
또, GridBody.cellDynamicStylesを利用して行の番号によってデータセルの背景の色を別々にすることができる。 cellDynamicStylesはrowDynamicStylesと同じように一つの行のすべてのデータセルに一緒に提供される動的スタイルであるが、 グリッドレンダリング時点にセル毎に数式を計算してスタイルの値たちを決定する。 rowDynamicStylesで具現できる状況なら、cellDynamicStylesを利用する必要がない。
grid.body().setCellDynamicStyles([{
expression: 'row % 2',
styles: { background: '#100000ff' }
}]);
"数量" カラムはignoreDefaultDynamicStylesプロパティーをtrueに指定して カラムスタイルで指定した色相で表示されている。
カラムのValueColumn.dynamicStylesを利用しても同一に具現できる。 しかし、すべてのカラムについて動的スタイルを指定しなければならない。
2. 行のスタイル
データセル達が描画される前にセル達が含まれたグリッド行が先に描画されることになるが、 グリッド行のスタイルを設定して背景色を区分することができる。 セル動的スタイル達を利用することよりパフォーマンスがよくなるので、なるべくこの通りに具現するようにする。
// パレットを登録する。
grid.loadPalettes([{
name: 'p01',
fills: [null, '#080000ff']
}]);
// 背景色でパレットの項目を設定する。
grid.body().setRowStyles({
background: 'p(p01:row)'
});
"数量"カラムのセル達が描画された結果が上のセルの動的スタイルのサンプルとは違うことに注意する。 行が描画された上に半透明のセルが描画されるので重なった色で表示されている。
基本の行のスタイル以外に行に範囲毎にスタイルを指定することもできる。
grid.body().setRowRangeStyles({
'row % 2': { background: '#10000080' }
});
上の二つの方式で利用するとコードなしにもいろいろな方法で背景色の区分ができる。 例えば、下のコードのように3行ずつ束ねて区分して表示する。
grid.body().setRowRangeStyles({
'(row div 3) % 2': { background: '#10000080' }
});
rowRangeStylesヘルプのトピックを参考する。
- See Also
- GridBody.rowStyles
- GridBody.rowDynamicStyles
- GridColumn.styles
- GridRowStyles
- GridStyles
- 動的スタイルの概要
- Expression概要
- Examples
- Row Styles