SMART datagrid v1.4 > Examples
데이터셋과 그리드를 생성하고 연결하는 방법은 아주 다양하다. 이번 예제에서는 설정 정보를 이용하는 가장 간편한 방법과 그 과정을 설명한다.
(예제 실행을 위해 SMART datagrid 스크립트 등이 준비돼야 한다. 제품 설치 및 준비 페이지를 참조한다)
먼저 서버에서 로드할 데이터셋의 구조에 맞게 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에 추가하면 된다. 서버 데이터를 로딩하는 방법은 SMARTdatagrid 모듈에는 포함되지 않았으며, 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 databrid 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);
}
};