EasyUI Jquery 学习笔记 ——DataGrid（数据网格）与 Tree（树）详细版

1. DataGrid（数据网格）与 Tree（树）

1.1 Datagrid 数据网格 

扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。

数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。

依赖

• panel
• resizable
• linkbutton
• pagination

用法

从已有的表格元素创建数据网格（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>

通过 <table> 标记创建数据网格（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>

也可以使用 javascript 创建数据网格（datagrid）。

    <table id="dg"></table>


    $('#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'}
    ]]
    });

通过一些参数查询数据。

$('#dg').datagrid('load', {
name: 'easyui',
address: 'ho'
});

在向服务器改变数据之后，更新前台数据。

$('#dg').datagrid('reload'); // reload the current page data

数据网格（DataGrid）属性

该属性扩展自面板（panel），下面是为数据网格（datagrid）添加的属性。

列（Column）属性

数据网格（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}
]]