SMART datagrid :: Palette Overview

Concepts.Palette Overview 準備中...

パレットはグリッドセル達を描画する時じ使う塗り、及び線の客体たちを先に登録しておいて、必要な時に持ち出して使えるようにする装置である。

1. パレットの登録

まず、グリッドにパレットを登録する。

Code -1

    grid.registerPalette({
        name: 'f01',
        fills: ['#1000ff00', '#2000ff00', '#3000ff00', '', '#4000ff00', '#5000ff00']
    });
    grid.registerPalette({
        name: 's01',
        strokes: ['#ff0000', '#00ff00', '#0000ff', null]
    });

パラメーターで指定する設定客体に"fills"アレイが含まれたら塗りのパレットで、 "strokes"アレイが含まれたら線パレットで登録される。そうではない場合には無視される。アレイに含まれる塗りや線の項目GridStylesで関連したプロパティーの値たちを指定する時と同一である。空の文字列やundefined、nullなど描画の客体で生成できない値はnull客体で指定される。こんな風に指定されて生成される描画の客体はグリッドレンダリング時点で該当の領域と関わるGridStylesに設定される。

2. 基本の使用方法

登録されたパレットに含まれた項目達は塗りや線客体を指定するGridStylesプロパティー達に設定することができる。

Code -2

    grid.body().setStyles({
        background: 'p(f01)',
        borderRight: 'p(s01)'
    });

"p("と")"の間に先に登録したパレットの名前を指定する。この後、実際に描画の客体が必要な時点にパレットに要請するが、パレットは内部に存在する、現在位置の値に設定されてる描画の客体をリターンして、位置の値を一つ増加させる。位置の値はパレット項目の個数まで増加した後また0に初期化される。

つまり、上のようにパレットを指定すれば実際に使われるパレットの項目を先に予測することができない。実際に色の値は重要ではなく、ただ領域と領域の間を区分する必要がある時、このような方式を使うことができる。

3. 項目の指定

アプリケーションで色相値などが業務的に決定されてパレット項目の中で特別な値を使わなければならないなら位置の値を明示する。

Code -3

    colName.setStyles({
        background: 'p(f01:1)'
    });
    colAddr.setStyles({
        background: 'p(f01:2)'
    });
    colSalary.setStyles({
        background: 'p(f01:12)'
    });

パレットの名前の次に":"で区分して項目の位置の値を定数で指定する。一番目の項目が0である。パレットの項目の個数以上を指定すれば個数で分けた残りに該当する項目をリターンする。つまり、パレットの項目の数が10の時、'pal(f10:12)"で指定すれば三つ目の項目がリターンになる。また、内部で位置の値を一つづつ増加させる方式の代わりに、位置の値を"?"で指定すればパレットに含まれたものたちの中で任意の位置に存在する項目をリターンする。

4. 位置の再設定

パレット項目がリターンになる時点に先に内部の位置を特定の位置に再設定することができる。

Code -4

    colName.setStyles({
        background: 'p(f01:7:0)'
    });

位置の指定の後、":"で区分した後に再設定の位置を指定する。つまり、上のサンプルはパレットが次にリターンする項目の位置を0番に初期化する。

Code -5

    colAddr.setStyles({
        background: 'p(f01::5)'
    });

こんな風に再設定だけして項目の位置を指定しない場合初期化されたいちの項目をリターンする。

5. Scope変数

項目の位置の値でこのパレットを使う範囲か認識する変数を指定することができる。

Code -6

    grid.body().setRowStyles({
        background: 'p(f01:row)'
    });

例えば、 rowStylesはグリッドデータの領域のデータ行達を描画する時に使われるスタイルセットである。backgroundプロパティーをパレットで指定しながら項目の位置の値を"row"で指定すれば現在描画を実行する行の位置の値に該当するパレットの項目をリターンすることになる。どんな変数が使えるかはパレットを使う個別の領域たちで説明される。

この様な使い方はコードを単純にしてやったり、スタイルの設定だけで表示の方法を柔軟に具現できるようにする。また、パレットの構成をコードとは別に準備して実行時間にロードする方法でアプリケーションを構成することもできる。

Code -7

    $(function () {
        grid.loadPalettes([{
            name: 'f01',
            fills: ['#1000ff00', '#2000ff00', '#3000ff00', '', '#4000ff00']
        }, {
            name: 's01',
            strokes: ['#ff0000', '#00ff00', '#0000ff', null]
        }]);
    });

See Also: GridStyles; GridColumn.styles; GridBody.rowStyles; GridBody.cellStyles

Examples: RowStyles; 行の背景色を入れ替わりに表示する