SMART datagrid v.1 > Examples

Column Styles  Example  準備中...

グリッドはデータを表示するユーザーインターフェース(UI)コンポーネントで 正確で効果的にデータを表せることが一番重要な機能だと言える。 SMART datagridグリッドはGridStyles客体に設定されるスタイルプロパティー達が グリッドを構成するセル達をレンダリングする時点に適用されるようにする。 背景色とテキスト色を含めてGridStylesはデータを区別して表現するに充分なプロパティー達をもっている。 

グリッドセルにGridStylesを適用する方法はいくつかあるが、 このサンプルではカラム毎でスタイルを設定する一番基本的な方法について説明する。 

カラムに設定されるスタイルはカラムに含まれるデータセル達の基本スタイルになる。 別々のカラムは生成の時、内部的にGridStyles客体をもう一つ生成して保ち、 stylesプロパティーで接近できるようにする。 大概、基本スタイルはカラムの生成時点に先に設定する。 

    var columns = [{
        "fieldName": "product_id",
        "styles": {
            "background": "#3000ff00"
        },
    ...
    },
    ..., {
        "fieldName": "unit_price",
        "width": "100",
        "styles": {
            "foreground": "#880000",
            "prefix": "$",
        	"textAlignment": "far"
        }
    }];
    grid.setColumns(columns);

上のコードではbackground, foregroundの色プロパティーと *textAlignment"でテキストの位置を指定している。 また、prefixは実際に値の前に付く文字列を指定するプロパティーである。 

GridStylesは色プロパティー達の以外に数字型や日付型の値の表示の仕方を指定できるプロパティーを持っている。 GridStylesのプロパティーについてはGridStylesトピックとbackgroundのようなプロパティー達のトピックを詳しく参考する。 

    var columns = [{
        "styles": {
            "background": "#555",
            "foreground": "#fff",
            "numberFormat": "#,##0.00",
        	"textAlignment": "far"
        },
        ...
	},
	...,{
        "styles": {
            "datetimeFormat": "yyyy-MM-dd",
            "textAlignment": "center"
        }
    }];

上のコードではと[[c.GridStyles.datetimeFormat]プロパティーを使う。 各数字型と日付型のフィールドの値を表示する形式が指定できるようにする。 

カラムに先にスタイルの値たちを設定すること以外、 必要な時点でスタイルのプロパティー達を直接変更することもできる。 

    btnFontLarger_click: function (ev) {
        var column = grdMain.focusedIndex().column;
        var size = column.styles().fontSize();
        column.styles().setFontSize(Math.min(20, size + 1));
    },
    btnFontSmaller_click: function (ev) {
        var column = grdMain.focusedIndex().column;
        var size = column.styles().fontSize();
        column.styles().setFontSize(Math.max(5, size - 1));
    }

ソースを見る 

See Also

GridStyles

GridColumn.styles