JQueryEasyUidataGrid数据表格--转
转⾄:
数据表格 - DataGrid
继承$.fn.panel.defaults，使⽤$.fn.datagrid.defaults重载默认值。.
数据表格显⽰的数据以表格的形式，并提供了丰富的选择，排序，分组和编辑数据的⽀持。这个数据表格被设计以缩短开发时间，并要求开发商没有具体的知识。它是轻量级的，功能丰富的。单元格合并，
多列标题，冻结列和页脚是其功能只是⼀⼩部分。
依赖组件（Dependencies）
使⽤⽅法（Usage Example）
从现有的表单元素创建数据表格，定义在html中的⾏，列和数据。
1. <tableclass="easyui-datagrid">
2. <thead>
3. <tr>
4. <thdata-options="field:'code'">Code</th>
5. <thdata-options="field:'name'">Name</th>
6. <thdata-options="field:'price'">Price</th>
7. </tr>
8. </thead>
9. <tbody>
10. <tr>
11. <td>001</td><td>name1</td><td>2323</td>
12. </tr>
13. <tr>
14. <td>002</td><td>name2</td><td>4612</td>
15. </tr>
16. </tbody>
17. </table>
<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>标签定义的列的表。
1. <tableclass="easyui-datagrid"
2. data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
3. <thead>
4. <tr>
5. <thdata-options="field:'code',width:100">Code</th>
6. <thdata-options="field:'name',width:100">Name</th>
7. <thdata-options="field:'price',width:100,align:'right'">Price</th>
8. </tr>
9. </thead>
10. </table>
<table class="easyui-datagrid" 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创建数据表格。
1. <tableid="dg"></table>
<table id="dg"></table>
1. $('#dg').datagrid({
2. url:'datagrid_data.json',
3. columns:[[
4. {field:'code',title:'Code',width:100},
5. {field:'name',title:'Name',width:100},
6. {field:'price',title:'Price',width:100,align:'right'}
7. ]]
8. });
$('#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'} ]] });
查询数据填充数据表格。
1. $('#dg').datagrid('load', {
2. name: 'easyui',
3. address: 'ho'
4. });
$('#dg').datagrid('load', { name: 'easyui', address: 'ho' });
数据更改与服务器交互，刷新当前数据。
1. $('#dg').datagrid('reload'); // reload the current page data
$('#dg').datagrid('reload'); // reload the current page data
数据表格属性（DataGrid Properties）
属性继承控制⾯板，以下是数据表格独有的属性。
名称类型描述默认值
columns array数据表格列配置对象，查看列属性以获取更多细节。undefined
frozenColumns array跟列属性⼀样，但是这些列固定在左边，不会滚动。undefined
fitColumns boolean设置为true将⾃动使列适应表格宽度以防⽌出现⽔平滚动。false
autoRowHeight boolean定义设置⾏的⾼度，根据该⾏的内容。设置为false可以提⾼负载性能。true
数据表格顶部⾯板的⼯具栏。可能的值： 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>
toolbar array,selector
通过数组定义⼯具栏:
$('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
jquery字符串截取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 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中数组是对象）。 对象数组中的每⼀个元素都是可配置的对象，每个可配置对象定义⼀个列。
⽰例:
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论