資料網格（datagrid）以表格格式顯示資料，併為選擇、排序、分組和編輯資料提供了豐富的支援。資料網格（datagrid）的設計目的是為了減少開發時間，且不要求開發人員具備指定的知識。它是輕量級的，但是功能豐富。它的特性包括單元格合併，多列頁首，凍結列和頁尾，等等。

用法

1.從已有的表格元素建立資料網格（datagrid），在 html 中定義列、行及資料。

    <table class="easyui-datagrid">
        <thead>
    		<tr>
    			<th data-options="field:'code'">Code</th>
    			<th data-options="field:'name'">Name</th>
    			<th data-options="field:'price'">Price</th>
    		</tr>
        </thead>
        <tbody>
    		<tr>
    			<td>001</td><td>name1</td><td>2323</td>
    		</tr>
    		<tr>
    			<td>002</td><td>name2</td><td>4612</td>
    		</tr>
    	</tbody>
    </table>
 

2.通過

    <table class="easyui-datagrid" style="width:400px;height:250px"
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
        <thead>
    		<tr>
    			<th data-options="field:'code',width:100">Code</th>
    			<th data-options="field:'name',width:100">Name</th>
    			<th data-options="field:'price',width:100,align:'right'">Price</th>
    		</tr>
        </thead>
    </table>
 

3.可以使用 javascript 建立資料網格（datagrid）。

    <table id="dg"></table>
    
<srcipt>
    $('#dg').datagrid({
        url:'datagrid_data.json',
        columns:[[
    		{field:'code',title:'Code',width:100},
    		{field:'name',title:'Name',width:100},
    		{field:'price',title:'Price',width:100,align:'right'}
        ]]
    });
 </script>
 

資料網格（DataGrid）屬性

該屬性擴充套件自面板（panel），下面是為資料網格（datagrid）新增的屬性。

列屬性

資料網格（DataGrid） 的列（Column）是一個數組物件，它的每個元素也是一個數組。元素陣列的元素是一個配置物件，它定義了每個列的欄位。
程式碼例項：

 columns:[[
        {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
        {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
        {title:'Item Details',colspan:4}
    ],[
        {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]]