SMART datagrid v1.4 > Examples

Back  Forward

Hello Grid  Example

데이터셋그리드를 생성하고 연결하는 방법은 아주 다양하다. 이번 예제에서는 설정 정보를 이용하는 가장 간편한 방법과 그 과정을 설명한다. 

(예제 실행을 위해 SMART datagrid 스크립트 등이 준비돼야 한다. 제품 설치 및 준비 페이지를 참조한다) 

먼저 서버에서 로드할 데이터셋의 구조에 맞게 fieldNamedataType으로 필드 목록을 구성한다. 이 예제에서는 Json 배열로 서버에 저장돼 있는 데이터를 가져와서 그리드에 표시한다. 필드 항목에 dataType을 명시하지 않으면 ValueType.TEXT로 지정된다. 또, 필드 목록의 항목을 Object가 아닌 단순 문자열로 지정하면, 그 문자열을 fieldNamedataType TEXT로 하는 데이터필드가 생성된다. 

Code -1
    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"
        }
    ];

위에서 선언한 필드 목록을 데이터셋필드 목록으로 지정한다. 

Code -2
    var dataset = new DataLudi.GridDataSet();
    // 혹은
    var dataset = DataLudi.createGridDataSet();
    // 필드 목록 설정
    dataset.setFields(fields);

이제 서버로부터 데이터를 로드해서 방금 생성한 dataset에 추가하면 된다. 서버 데이터를 로딩하는 방법은 SMARTdatagrid 모듈에는 포함되지 않았으며, jQuery 등 안정된 라이브러리에서 제공하는 기능을 사용하면 된다. 

Code -3
    // 서버 데이터를 로드한다
    $.ajax({
        url: "url",
        dataType: 'text',
        success: function (data) {
            // 로드 완료되면 데이터셋에 추가한다.
            ds.setRows(data);
            // 여러 포맷의 데이터를 로드할 수 있다.            
            //new DataLudi.DataLoader(dsMain).load("csv", data, {
            //	start:1
            //});
        }
    });

하나의 데이터셋은 하나 이상의 그리드에 연결될 수 있다. 하지만 이 예제에서는 그리드를 하나 생성하고 데이터셋에 연결해 본다. 데이터셋의 필드 목록과 비슷하게 우선 그리드의 컬럼셋을 정의한다. 

Code -4
    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",
            ...
    	}, 
    	...
    ];

위 컬럼 목록을 그리드뷰컬럼 목록으로 지정한다. 그리고, 데이터셋에 연결하면 그리드에 데이터가 표시된다. 

Code -5
    var grid = new DataLudi.GridComponent(null, 'container').gridView();
    // 혹은
    var grid = DataLudi.createGridView('container');
    // 컬럼 설정
    grid.setColumns(fields);
    // 데이터셋에 연결한다.
    grid.setDataSource(dataset);

 

Grid - 1
GridView
Events...

이 후, 그리드 스타일이나 옵션들을 설정할 수 있다. 스타일과 옵션들에 대해서는 다음 예제들에서 다루기로 한다. 

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

또, 그리드는 마우스 클릭이나 편집 동작 등 많은 시점에서 이벤트를 발생시킨다. 

Code -7
    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);
        }
    };

소스보기 JSP 

See Also
제품 설치 및 준비
GridDataSet
DataSet.fields
GridView
GridBase.columns
GridBase.loadStyles
GridBase.checkBar
DataLudi Class System
Examples