easyUI Datagrid数据网格

数据网格（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.通过

标记创建数据网格（datagrid）。嵌套的<th> 标签定义表格中的列。

    <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}
    ]]