本文可以当做api来使用
使用方法（Usage Example）
从现有的表单元素创建数据表格，定义在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="400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'code',100">Code</th> <th data-options="field:'name',100">Name</th> <th data-options="field:'price',100,align:'right'">Price</th> </tr> </thead> </table>
使用JavaScript创建数据表格。
<table id="dg"></table>
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',100},
{field:'name',title:'Name',100},
{field:'price',title:'Price',100,align:'right'}
]]
});
查询数据填充数据表格。
$('#dg').datagrid('load', {
name: 'easyui',
address: 'ho'
});
数据更改与服务器交互，刷新当前数据。
$('#dg').datagrid('reload'); // reload the current page data
数据表格属性（DataGrid Properties）
属性继承控制面板，以下是数据表格独有的属性。
| 名称 | 类型 | 描述 | 默认值 |
| columns | array | 数据表格列配置对象，查看列属性以获取更多细节。 | undefined |
| frozenColumns | array | 跟列属性一样，但是这些列固定在左边，不会滚动。 | undefined |
| fitColumns | boolean | 设置为true将自动使列适应表格宽度以防止出现水平滚动。 | false |
| autoRowHeight | boolean | 定义设置行的高度，根据该行的内容。设置为false可以提高负载性能。 | true |
| toolbar | array,selector | 数据表格顶部面板的工具栏。可能的值： 1）数组，每个工具选项和链接按钮相同。 2）选择显示的工具栏。 在一个<div>的标签定义工具栏: $('#dg').datagrid({
toolbar: '#tb'
});
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>
通过数组定义工具栏: $('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('edit')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('help')}
}]
});
|
null |
| striped | boolean | 设置为true将交替显示行背景。 | false |
| method | string | 请求远程数据的方法类型。 | post |
| nowrap | boolean | 设置为true，当数据长度超出列宽时将会自动截取。 | true |
| idField | string | 表明该列是一个唯一列。 | null |
| url | string | 一个用以从远程站点请求数据的超链接地址。 | null |
| loadMsg | string | 当从远程站点载入数据时，显示的一条快捷信息。 | Processing, please wait … |
| pagination | boolean | 设置true将在数据表格底部显示分页工具栏。 | false |
| rownumbers | boolean | 设置为true将显示行数。 | false |
| singleSelect | boolean | 设置为true将只允许选择一行。 | false |
| checkOnSelect | boolean | 如果为true，该复选框被选中/取消选中，当用户点击某一行上。如果为false，该复选框仅检查/取消选中，当用户点击完全的复选框。 此属性是1.3版本。 |
true |
| selectOnCheck | boolean | 如果设置为true，单击一个复选框，将始终选择行。如果为false，不会选择行选中该复选框。 此属性是1.3版本。 |
true |
| pagePosition | string | 定义的分页栏的位置。可用的值有 'top','bottom','both'。 此属性是可自1.3版本。 |
bottom |
| pageNumber | number | 当设置分页属性时，初始化分页码。 | 1 |
| pageSize | number | 当设置分页属性时，初始化每页记录数。 | 10 |
| pageList | array | 当设置分页属性时，初始化每页记录数列表。 | [10,20,30,40,50] |
| queryParams | object | 当请求远程数据时，发送的额外参数。
示例: $('#dg').datagrid({
queryParams: {
name: 'easyui',
subject: 'datagrid'
}
});
|
{} |
| sortName | string | 当数据表格初始化时以哪一列来排序。 | null |
| sortOrder | string | 定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。 | asc |
| remoteSort | boolean | 定义是否通过远程服务器对数据排序。 | true |
| showFooter | boolean | 定义是否显示行底（如果是做统计表格，这里可以显示总计等）。 | false |
| rowStyler | function | 返回样式，如：'background:red'，function有2个参数： index：行索引，从0开始. row：对应于该行记录的对象。 示例: $('#dg').datagrid({
rowStyler: function(index,row){
if (row.listprice>80){
return 'background-color:#6293BB;color:#fff;';
}
}
});
|
|
| loader | function | 定义如何从远程服务器加载数据。返回false可以取消该操作。这个函数接受以下参数： param: 参数对象传递到远程服务器。 success(data): 回调函数将被调用成功检索的数据。 error():回调函数将被调用失败时检索数据。 |
json loader |
| loadFilter | function | 返回过滤的数据显示。该函数需要一个参数'data'，表示原始数据。您可以更改源数据的标准数据格式。此函数必须返回标准数据对象中包含的“total”和“rows”的属性。
示例: // removing 'd' object from asp.net web service json output
$('#dg').datagrid({
loadFilter: function(data){
if (data.d){
return data.d;
} else {
return data;
}
}
});
|
|
| editors | object | 定义当编辑一行时的编辑模式。 | predefined editors |
| view | object | 定义数据表格的视图。 | default view |
列属性（Column Properties）
数据表格的列是一个对象数组，即这个对象中的元素也是一个数组（js中数组是对象）。 对象数组中的每一个元素都是可配置的对象，每个可配置对象定义一个列。
示例:
columns:[[
{field:'itemid',title:'Item ID',rowspan:2,80,sortable:true},
{field:'productid',title:'Product ID',rowspan:2,80,sortable:true},
{title:'Item Details',colspan:4}
],[
{field:'listprice',title:'List Price',80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',100},
{field:'status',title:'Status',60}
]]
| 名称 | 类型 | 描述 | 默认值 |
| title | string | 列标题。 | undefined |
| field | string | 列字段。 | undefined |
| width | number | 列宽。 | undefined |
| rowspan | number | 表明一个单元格跨几行。 | undefined |
| colspan | number | 表明一个单元格跨几列。 | undefined |
| align | string | 表明如何对其列数据，可选值：'left'，'right'，'center'。 | undefined |
| sortable | boolean | 设置为true允许对该列排序。 | undefined |
| resizable | boolean | 设置为true允许该列被缩放。 | undefined |
| hidden | boolean | 设置为true将隐藏列。 | undefined |
| checkbox | boolean | 设置为true将显示复选框。 | undefined |
| formatter | function | 格式化单元格函数，有3个参数： value：字段的值。 rowData：行数据。 rowIndex：行索引。 示例: $('#dg').datagrid({
columns:[[
{field:'userId',title:'User', 80,
formatter: function(value,row,index){
if (row.user){
return row.user.name;
} else {
return value;
}
}
}
]]
});
|
undefined |
| styler | function | 单元格样式函数，返回样式字符串装饰表格如'background:red'，function有3个参数： value：字段值。 rowData：行数据。 rowIndex：行索引。 示例: $('#dg').datagrid({
columns:[[
{field:'listprice',title:'List Price', 80, align:'right',
styler: function(value,row,index){
if (value < 20){
return 'background-color:#ffee00;color:red;';
}
}
}
]]
});
|
undefined |
| sorter | function | T自定义字段排序函数，有2个参数： a：该列的第一个值。 b：该列的第二个值。 示例: $('#dg').datagrid({
remoteSort: false,
columns: [[
{field:'date',title:'Date',80,sortable:true,align:'center',
sorter:function(a,b){
a = a.split('/');
b = b.split('/');
if (a[2] == b[2]){
if (a[0] == b[0]){
return (a[1]>b[1]?1:-1);
} else {
return (a[0]>b[0]?1:-1);
}
} else {
return (a[2]>b[2]?1:-1);
}
}
}
]]
});
|
undefined |
| editor | string,object | 表明编辑类型。如果属性是字符串类型表示编辑类型，如果是对象则包含2个参数： type：字符串，编辑类型，可选值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。 options：对象，对象于编辑类型的编辑器属性。 |
undefined |
转载： https://www.cnblogs.com/prefect/p/5664513.html
详细文档：http://www.jeasyui.net/plugins/183.html