创建和连接数据组和网格的方法有很多种。 在本次例题中，我们将会说明使用设置信息的最简单的方法和相关过程。
（为运行例题，需要具备SMART datagrid本等。请参考产品设置和准备页面。）
首先，通过fieldName和dataType，构成符合从服务器上加载的数据组结构的字段列表。 本例题中，将会获取以Json数组格式储存在服务器中的数据，并将其显示在网格中。 如果没有在字段项中标明dataType，它就会被指定为ValueType.TEXT。 另外，如果将字段列表的项指定为简单的字符串而不是对象， 则会创建使用此字符串为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);
现在，我们可以从服务器加载数据，并将其添加到刚创建的数据组中。 加载服务器数据的方法，没有被包含在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 = SMART datagrid.createGridView('container');
// 设置列
grid.setColumns(fields);
// 连接到数据组上。
grid.setDataSource(dataset);
此后，我们可以设置网格样式或选项。 有关样式和选项，将会在下列例题中进行说明。
grdMain.checkBar().setVisible(false);
grdMain.header().head().setPopupMenu({
label: 'SMART datagrid 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);
}
};