SMART datagrid v.1 > Examples

Hello Grid  Example  準備中...

データセットとグリッドを生成して繋ぐ方法にはいろいろある。 今回の例題では設定情報を利用して一番簡単な方法とその過程を説明する。 

まず、サーバーからロードするデータセットの構造に合わせてfieldNameとdataTypeでフィールドの目録を構成する。 この例題ではJsonアレイでサーバーにセーブされているデータを取得してグリッドに表示する。 フィールドの項目にdataTypeを明示しなければValueType.TEXTで指定される。 また、フィールド目録の項目をObjectではない単純な文字列に指定すれば、その文字列をfieldName, dataType TEXTとするデータフィールドが生成される。 

    var fields = [
        {
            fieldName: "product_id",
            dataType: "text"
        }, {
            fieldName: "product_name"
        }, {
            fieldName: "customer_id"
        },
            "customer_name",
            "country",
            "phone",
            "unit",
            "currency",
        }, {
            fieldName: "unit_price",
            dataType: "number"
        }, {
            fieldName: "quantity",
            dataType: "number"
        }, {
            fieldName: "order_date",
            dataType: "datetime",
            datetimeFormat: "yyyy-MM-dd"
        }, {
            fieldName: "ship_date",
            dataType: "datetime"
        }
    ];

上で宣言したフィールドの目録をデータセットのフィールドの目録で指定する。 

    var dataset = new DataLudi.GridDataSet();
    // もしくは
    var dataset = DataLudi.createGridDataSet();
    // フィールド目録設定
    dataset.setFields(fields);

それからはサーバーからデータをロードして今生成したdatasetに追加すればいい。 サーバーデータをローディングする方法はSMART datagridモジュールには含まれていない。 jQueryなど安定したライブラリーで提供する機能を使えばいい。 

    // サーバーデータをロードする。
    $.ajax({
        url: "url",
        dataType: 'text',
        success: function (data) {
            // 로드 완료되면 데이터셋에 추가한다.
            ds.setRows(data);
            // 여러 포맷의 데이터를 로드할 수 있다.
            //new DataLudi.DataLoader(dsMain).load("csv", data, {
　          //	start:1
            //});
        }
    });

一つのデータセットは一つ以上のグリッドに繋ぐことができる。 しかしこの例題ではグリッドを一つ生成してデータセットに繋いでみる。 データセットのフィールドの目録みたいにまずグリッドのカラムセットを定義する。 

    var columns = [
        {
            "name": "ProductId",
            "fieldName": "product_id",
            "width": "90"
            "header": {
            	"text": strings["ProductId"]
            }
    	}, {
            "name": "ProductName",
            "fieldName": "product_name",
            ...
        }, {
            "name": "CustomerId",
            "fieldName": "customer_id",
            ...
    	}, {
            "name": "CustomerName",
            "fieldName": "customer_name",
            ...
    	}, 
    	...
    ];

上のカラムの目録をグリッドビューのカラム目録で指定する。 そして、データセットに繋ぐとグリッドにデータが表示される。 

    var grid = new DataLudi.GridComponent(null, 'container').gridView();
    // または、
    var grid = DataLudi.createGridView('container');
    // カラム設定
    grid.setColumns(fields);
    // データセットに繋ぐ
    grid.setDataSource(dataset);

以後、グリッドスタイルやオップション達を設定することができる。 スタイルとオップションについては次のサンプルで扱うことにする。 

    grdMain.checkBar().setVisible(false);
    grdMain.header().head().setPopupMenu({
        label: 'SMART datagrid Grid Version',
        callback: function () { alert(DataLudi.getVersion()); }
    });

また、グリッドはマウスのグリックや編集動作など多くの時点でイベントを発生させる。 

    grdMain.onDataCellClicked = function (grid, index) {
        if (index && index.dataColumn() && index.getDataIndex(grid) >= 0) {
            var v = dsMain.getValue(index.getDataIndex(grid), index.dataField());
            $('#txtMessage').text('onDataCellClicked: ' + v);
        }
    };

ソースを見る 

See Also

製品の設置及び準備

GridDataSet

DataSet.fields

GridView

GridBase.columns

GridBase.loadStyles

GridBase.checkBar

SMART datagrid Class System

Examples