SMART datagrid :: Column Dynamic Styles

Column Dynamic Styles Example 準備中...

カラムスタイルサンプルでカラムスタイルを指定する基本的な方法を説明し、セルレンダラーサンプルで一つ、二つのレンダラーを扱ってみたが、当然ながらそれだけではデータを効果的に表現することはできない。

カラムの基準スタイル以外に行別スタイルの指定、つまり値によるスタイル指定が必要である。だが、グリッドにローダされたり、追加される行の数は理論的に制限のないゆえに、行とカラムで調合できる相当なセル単位でスタイルを指定することはパフォーマンス的にも不可能なことになる。また、グリッドは最初ロードしたデータで固定されているのではなくユーザーの入力によって値がいつも変わるゆえ、変化する値たちに動的に対応しなければならない。

SMART datagrid グリッドには値、または行の状態によるスタイル値を指定するいくつかの方法があるが、今回のサンプルでは一番簡単な方法について説明する。

Grid - 1

rows

動的スタイルを指定する一番簡単な方法はカラムのdynamicStylesプロパティーを設定することである。一つのdynamic styleはスタイルを適用するか否かを決定する標準(expression)とスタイルのプロパティーで構成される。

Code -1

    {
        "name": "OrderDate",
        "fieldName": "order_date",
        "dynamicStyles": [{
            "expression": "value >= date('2015-01-01')",
            "styles": {
                "background": "#100000ff",
                "foreground": "#ff000088"
            }
        }],
        ...
    }

注文日カラムは日付型のフィールドorder_dateに繋がっているが、標準でセルの値が特定な日付より後ならbackground, foregroundを違って表示するようにしてある。標準ではvalueは今描画されるセルの値を、 dateは右側のISO-8601文字列をDate値で変更するオペレーターである。

上のコードで見えるようにdynamicStylesはアレイプロパティーであるゆえに、一つ以上の動的スタイルが指定できるが、セル毎にすべての標準を計算してtrueをリターンするプロパティー達を全部反映する。違う値たちを同じプロパティーの値として指定する場合なら順番が重要になる。

Code -2

    {
    	"name": "UnitPrice",
    	"fieldName": "unit_price",
    	"dynamicStyles": [{
    	    "expression": "value > 500",
    	    "styles": {
    	        "background": "#10000000"
    	    }
    	}, {
    	    "expression": "value > 700",
    	    "styles": {
    	        "background": "#20000000"
    	    }
    	}, {
    	    "expression": "value > 800",
    	    "styles": {
    	        "background": "#30000000"
    	    }
    	}],
    	...
    }

上のコードですべて値によってbackgroundプロパティーを指定しているが、万が一"500, 700, 800"ではなく"800, 700, 500"の順で指定したら望む結果を得ることはできない。

大概こうして並ばせる方式は基準によって値が違うようになるプロパティーを設定する時役立つ。上の例のように一つの種類の基準に同じプロパティーたちを指定しなければならない場合には下のコードのようにDynamicStyleCaseを使わなければならない。

Code -3

    {
    	"name": "Quantity",
    	"fieldName": "quantity",
    	"dynamicStyles": [{
    	    "expressions": [
    	        "value > 700", 
    	        "value > 500",
    	        "value > 300"
    	    ],
    	    "styles": [
    	        {
    	            "shapeName": "uparrow",
    	            "shapeBackground": "#ff0000"
    	        }, {
    	            "shapeBackground": "#0000ff"
    	        }, {
    	            "shapeBackground": "#008800"
    	        }
    	    ]
    	}],
    	...
    }

expressionsがアレイに設定されたらグリッドはDynamicStyleの代わりにDynamicStyleCase客体を生成する。 DynamicStyleCaseはexpressionで指定された標準の中でtrueをリターンすることがあればその標準に該当するスタイルを指定してそれ以上進行しない。

ソースを見る

See Also: GridStyles; GridColumn.styles; ColumnStyles