### DataGrid(数据表格)
扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。
DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
![](https://box.kancloud.cn/2016-07-19_578d913a66bd8.png)
####
#### 依赖关系
-
[panel](#)
-
[resizable](#)
-
[linkbutton](#)
-
[pagination](#)
####
#### 使用案例
从现有的表格元素创建DataGrid,在HTML中定义列、行和数据。
1. **<table** class="easyui-datagrid"**>**
1. **<thead>**
1. **<tr>**
1. **<th** data-options="field:'code'"**>**编码**</th>**
1. **<th** data-options="field:'name'"**>**名称**</th>**
1. **<th** data-options="field:'price'"**>**价格**</th>**
1. **</tr>**
1. **</thead>**
1. **<tbody>**
1. **<tr>**
1. **<td>**001**</td><td>**name1**</td><td>**2323**</td>**
1. **</tr>**
1. **<tr>**
1. **<td>**002**</td><td>**name2**</td><td>**4612**</td>**
1. **</tr>**
1. **</tbody>**
1. **</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. **<table** class="easyui-datagrid" style="width:400px;height:250px"
1. data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"**>**
1. **<thead>**
1. **<tr>**
1. **<th** data-options="field:'code',width:100"**>**编码**</th>**
1. **<th** data-options="field:'name',width:100"**>**名称**</th>**
1. **<th** data-options="field:'price',width:100,align:'right'"**>**价格**</th>**
1. **</tr>**
1. **</thead>**
1. **</table>**
<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控件。
1. **<table** id="dg"**></table>**
<table id="dg"></table>
1. $('#dg').datagrid({
1. url:'datagrid_data.json',
1. columns:[[
1. {field:'code',title:'Code',width:100},
1. {field:'name',title:'Name',width:100},
1. {field:'price',title:'Price',width:100,align:'right'}
1. ]]
1. });
$('#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', {
1. name: 'easyui',
1. address: 'ho'
1. });
$('#dg').datagrid('load', { name: 'easyui', address: 'ho' });
改变的数据保存到服务器之后,刷新当前数据。
1. $('#dg').datagrid('reload'); // 重新载入当前页面数据
$('#dg').datagrid('reload'); // 重新载入当前页面数据
####
#### DataGrid属性
该属性扩展自[panel](#)(面板),下面是DataGrid控件添加的属性。
<table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>columns</td> <td>array</td> <td>DataGrid列配置对象,详见列属性说明中更多的细节。</td> <td>undefined</td></tr><tr><td>frozenColumns</td> <td>array</td> <td>同列属性,但是这些列将会被冻结在左侧。</td> <td>undefined</td></tr><tr><td>fitColumns</td> <td>boolean</td> <td><span lang="zh-CN" id="result_box" class="short_text" closure_uid_753530015="123" ud="null" a="undefined" c="4"><span closure_uid_753530015="276">真正的</span><span closure_uid_753530015="277">自动展开</span><span closure_uid_753530015="278">/</span><span closure_uid_753530015="279">收缩</span><span closure_uid_753530015="280">列</span><span closure_uid_753530015="281">的大小</span><span closure_uid_753530015="282">,以适应</span><span closure_uid_753530015="283">网格的宽度</span><span closure_uid_753530015="284">,防止</span><span closure_uid_753530015="285">水平</span><span closure_uid_753530015="286">滚动</span><span closure_uid_753530015="287">。</span></span></td> <td>false</td></tr><tr><td>resizeHandle</td> <td>string</td> <td> <p>调整列的位置,可用的值有:'left','right','both'。在使用'right'的时候<span closure_uid_753530015="349">用户</span><span closure_uid_753530015="350">可以</span><span closure_uid_753530015="352">通过</span><span closure_uid_753530015="353">拖动</span><span closure_uid_753530015="354">右侧边缘</span><span closure_uid_753530015="355">的</span><span closure_uid_753530015="356">列标题调整<span closure_uid_753530015="351">列,等等。<strong><font color="#ff0000">(该属性自1.3.2版开始可用)</font></strong></span></span></p></td> <td>right</td></tr><tr><td>autoRowHeight</td> <td>boolean</td> <td><span lang="zh-CN" id="result_box" class="short_text" closure_uid_753530015="123" ud="null" a="undefined" c="4"><span closure_uid_753530015="384">定义</span><span closure_uid_753530015="385">设置行的高度</span><span closure_uid_753530015="386">,</span><span closure_uid_753530015="387">根据</span><span closure_uid_753530015="388">该行</span><span closure_uid_753530015="389">的内容</span><span closure_uid_753530015="390">。</span><span closure_uid_753530015="391">设置为</span><span closure_uid_753530015="392">false可以提高</span><span closure_uid_753530015="393">负载性能</span><span closure_uid_753530015="394">。</span></span></td> <td>true</td></tr><tr><td>toolbar</td> <td>array,selector</td> <td>顶部工具栏的DataGrid面板。可能的值:<br/>1) 一个数组,每个工具属性都和linkbutton一样。<br/>2) 选择器指定的工具栏。 <p>在<div>标签上定义工具栏: </p><p/><pre>$('#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>
</pre> <p>通过数组定义工具栏:</p><pre>$('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('编辑按钮')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('帮助按钮')}
}]
});
</pre></td> <td>null</td></tr><tr><td>striped</td> <td>boolean</td> <td>是否显示斑马线效果。</td> <td>false</td></tr><tr><td>method</td> <td>string</td> <td><span lang="zh-CN" id="result_box" class="short_text" closure_uid_753530015="123" ud="null" a="undefined" c="4"><span closure_uid_753530015="593">该方法</span><span closure_uid_753530015="594">类型</span><span closure_uid_753530015="595">请求</span><span closure_uid_753530015="596">远程数据。</span></span></td> <td>post</td></tr><tr><td>nowrap</td> <td>boolean</td> <td>如果为true,则在同一行中显示数据。设置为true可以提高加载性能。</td> <td>true</td></tr><tr><td>idField</td> <td>string</td> <td>指明哪一个字段是标识字段。</td> <td>null</td></tr><tr><td>url</td> <td>string</td> <td>一个URL从远程站点请求数据。</td> <td>null</td></tr><tr><td>data</td> <td>array,object</td> <td>数据加载<strong><font color="#ff0000">(该属性自1.3.2版开始可用)</font></strong> <p>代码示例:</p><pre>$('#dg').datagrid({
data: [
{f1:'value11', f2:'value12'},
{f1:'value21', f2:'value22'}
]
});
</pre></td> <td>null</td></tr><tr><td>loadMsg</td> <td>string</td> <td>在从远程站点加载数据的时候显示提示消息。</td> <td>Processing, please wait …</td></tr><tr><td>pagination</td> <td>boolean</td> <td>如果为true,则在DataGrid控件底部显示分页工具栏。</td> <td>false</td></tr><tr><td>rownumbers</td> <td>boolean</td> <td>如果为true,则显示一个行号列。</td> <td>false</td></tr><tr><td>singleSelect</td> <td>boolean</td> <td>如果为true,则只允许选择一行。</td> <td>false</td></tr><tr><td>ctrlSelect</td> <td>boolean</td> <td>在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作。<strong><font color="#ff0000">(该属性自1.3.6版开始可用)</font></strong></td> <td>false</td></tr><tr><td>checkOnSelect</td> <td>boolean</td> <td>如果为true,当用户点击行的时候该复选框就会被选中或取消选中。<br/>如果为false,当用户仅在点击该复选框的时候才会呗选中或取消。<br/><strong><font color="#ff0000">(该属性自1.3版开始可用)</font></strong></td> <td>true</td></tr><tr><td>selectOnCheck</td> <td>boolean</td> <td> <p>如果为true,单击复选框将永远选择行。<br/>如果为false,选择行将不选中复选框。<br/><strong><font color="#ff0000">(该属性自1.3版开始可用)</font></strong></p></td> <td>true</td></tr><tr><td>pagePosition</td> <td>string</td> <td>定义分页工具栏的位置。可用的值有:'top','bottom','both'。<br/><strong><font color="#ff0000">(该属性自1.3版开始可用)</font></strong></td> <td>bottom</td></tr><tr><td>pageNumber</td> <td>number</td> <td>在设置分页属性的时候初始化页码。</td> <td>1</td></tr><tr><td>pageSize</td> <td>number</td> <td>在设置分页属性的时候初始化页面大小。</td> <td>10</td></tr><tr><td>pageList</td> <td>array</td> <td>在设置分页属性的时候 初始化页面<!--WizRtf2Html Charset=134 --><span style="FONT-SIZE: 9pt; FONT-FAMILY: '宋体'; BACKGROUND-COLOR: black"><span style="BACKGROUND-COLOR: window">大小选择列表。</span></span></td> <td>[10,20,30,40,50]</td></tr><tr><td>queryParams</td> <td>object</td> <td>在请求远程数据的时候发送额外的参数。 <p>代码示例:</p><pre>$('#dg').datagrid({
queryParams: {
name: 'easyui',
subject: 'datagrid'
}
});
</pre></td> <td>{}</td></tr><tr><td>sortName</td> <td>string</td> <td>定义哪些列可以进行排序。</td> <td>null</td></tr><tr><td>sortOrder</td> <td>string</td> <td>定义列的排序顺序,只能是'asc'或'desc'。</td> <td>asc</td></tr><tr><td>multiSort</td> <td>boolean</td> <td>定义是否允许多列排序。<strong><font color="#ff0000">(该属性自1.3.4版开始可用)</font></strong></td> <td>false</td></tr><tr><td>remoteSort</td> <td>boolean</td> <td>定义从服务器对数据进行排序。</td> <td>true</td></tr><tr><td>showHeader</td> <td>boolean</td> <td>定义是否显示行头。</td> <td>true</td></tr><tr><td>showFooter</td> <td>boolean</td> <td>定义是否显示行脚。</td> <td>false</td></tr><tr><td>scrollbarSize</td> <td>number</td> <td>滚动条的宽度(当滚动条是垂直的时候)或高度(当滚动条是水平的时候)。</td> <td>18</td></tr><tr><td>rowStyler</td> <td>function</td> <td>返回样式如'background:red'。带2个参数的函数:<br/>rowIndex:该行索引从0开始<br/>rowData:与此相对应的记录行。 <p>代码示例:</p><pre>$('#dg').datagrid({
rowStyler: function(index,row){
if (row.listprice>80){
return 'background-color:#6293BB;color:#fff;';
}
}
});</pre><pre>译者注(1.3.4新增方式):<pre>$('#dg').datagrid({
rowStyler: function(index,row){
if (row.listprice>80){
return 'rowStyle'; // rowStyle是一个已经定义了的ClassName(类名)
}
}
});
</pre></pre></td> <td/></tr><tr><td>loader</td> <td>function</td> <td>定义如何从远程服务器加载数据。返回false可以放弃本次请求动作。该函数接受以下参数:<br/>param:参数对象传递给远程服务器。<br/>success(data):当检索数据成功的时候会调用该回调函数。<br/>error():当检索数据失败的时候会调用该回调函数。</td> <td>json loader</td></tr><tr><td>loadFilter</td> <td>function</td> <td>返回过滤数据显示。该函数带一个参数'data'用来指向源数据(即:获取的数据源,比如Json对象)。您可以改变源数据的标准数据格式。这个函数必须返回包含'total'和'rows'属性的标准数据对象。 <p>代码示例:</p><pre>// 从Web Service(asp.net、java、php等)输出的JSON对象中移除'd'对象
$('#dg').datagrid({
loadFilter: function(data){
if (data.d){
return data.d;
} else {
return data;
}
}
});
</pre></td> <td/></tr><tr><td>editors</td> <td>object</td> <td>定义在编辑行的时候使用的编辑器。</td> <td>预定义编辑器</td></tr><tr><td>view</td> <td>object</td> <td>定义DataGrid的视图。</td> <td>默认视图</td></tr></tbody></table>
#### 列属性
DataGrid列是一个数组对象,该元素也是一个数组对象。元素数组里面的元素是一个配置对象,它用来定义每一个列字段。
代码示例:
1. columns:[[
1. {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
1. {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
1. {title:'Item Details',colspan:4}
1. ],[
1. {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
1. {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
1. {field:'attr1',title:'Attribute',width:100},
1. {field:'status',title:'Status',width:60}
1. ]]
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} ]]
<table class="doc-table"><tbody><tr><th><strong>属性名称</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>title</td> <td>string</td> <td>列标题文本。</td> <td>undefined</td></tr><tr><td>field</td> <td>string</td> <td>列字段名称。</td> <td>undefined</td></tr><tr><td>width</td> <td>number</td> <td>列的宽度。如果没有定义,宽度将自动扩充以适应其内容。</td> <td>undefined</td></tr><tr><td>rowspan</td> <td>number</td> <td>指明将占用多少行单元格(合并行)。</td> <td>undefined</td></tr><tr><td>colspan</td> <td>number</td> <td>指明将占用多少列单元格(合并列)。</td> <td>undefined</td></tr><tr><td>align</td> <td>string</td> <td>指明如何对齐列数据。可以使用的值有:'left','right','center'。</td> <td>undefined</td></tr><tr><td>halign</td> <td>string</td> <td>指明如何对齐列标题。可以使用的值有:'left','right','center'。如果没有指定,则按照align属性进行对齐。<br/><strong><font color="#ff0000">(该属性自1.3.2版开始可用)</font></strong> </td> <td>undefined</td></tr><tr><td>sortable</td> <td>boolean</td> <td>如果为true,则允许列使用排序。</td> <td>undefined</td></tr><tr><td>order</td> <td>string</td> <td>默认排序数序,只能是'asc'或'desc'。<br/><strong><font color="#ff0000">(该属性自1.3.2版开始可用)</font></strong> </td> <td>undefined</td></tr><tr><td>resizable</td> <td>boolean</td> <td>如果为true,允许列改变大小。</td> <td>undefined</td></tr><tr><td>fixed</td> <td>boolean</td> <td>如果为true,在"fitColumns"设置为true的时候阻止其自适应宽度。</td> <td>undefined</td></tr><tr><td>hidden</td> <td>boolean</td> <td>如果为true,则隐藏列。</td> <td>undefined</td></tr><tr><td>checkbox</td> <td>boolean</td> <td>如果为true,则显示复选框。该复选框列固定宽度。</td> <td>undefined</td></tr><tr><td>formatter</td> <td>function</td> <td>单元格formatter(格式化器)函数,带3个参数:<br/>value:字段值。<br/>rowData:行记录数据。<br/>rowIndex: 行索引。 <p>代码示例:</p><pre>$('#dg').datagrid({
columns:[[
{field:'userId',title:'User', width:80,
formatter: function(value,row,index){
if (row.user){
return row.user.name;
} else {
return value;
}
}
}
]]
});
</pre></td> <td>undefined</td></tr><tr><td>styler</td> <td>function</td> <td>单元格styler(样式)函数,返回如'background:red'这样的自定义单元格样式字符串。该函数带3个参数:<br/>value:字段值。<br/>rowData:行记录数据。<br/>rowIndex: 行索引。 <p>代码示例:</p><pre>$('#dg').datagrid({
columns:[[
{field:'listprice',title:'List Price', width:80, align:'right',
styler: function(value,row,index){
if (value < 20){
return 'background-color:#ffee00;color:red;';
}
}
}
]]
});
</pre></td> <td>undefined</td></tr><tr><td>sorter</td> <td>function</td> <td>用来做本地排序的自定义字段排序函数,带2个参数:<br/>a:第一个字段值。<br/>b:第二个字段值。 <p>代码示例:</p><pre>$('#dg').datagrid({
remoteSort: false,
columns: [[
{field:'date',title:'Date',width: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);
}
}
}
]]
});
</pre></td> <td>undefined</td></tr><tr><td>editor</td> <td>string,object</td> <td>指明编辑类型。当字符串指明编辑类型的时候,对象包含2个属性:<br/>type:字符串,该编辑类型可以使用的类型有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。<br/>options:对象,object, 该编辑器属性对应于编辑类型。</td> <td>undefined</td></tr></tbody></table>
####
#### Editor(编辑器)
使用$.fn.datagrid.defaults.editors重写默认值对象。
每一个编辑器都有下面的动作:
| **名称** | **参数** | **描述** |
|-----|-----|-----|
| init | container, options | 初始化编辑器并返回目标对象。 |
| destroy | target | 如果有必要销毁编辑器。 |
| getValue | target | 从编辑器中获取值。 |
| setValue | target , value | 向编辑器中写入值。 |
| resize | target , width | 如果有必要调整编辑器的大小。 |
例如,该文本编辑器定义如下:
1. $.extend($.fn.datagrid.defaults.editors, {
1. text: {
1. init: function(container, options){
1. var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
1. return input;
1. },
1. getValue: function(target){
1. return $(target).val();
1. },
1. setValue: function(target, value){
1. $(target).val(value);
1. },
1. resize: function(target, width){
1. var input = $(target);
1. if ($.boxModel == true){
1. input.width(width - (input.outerWidth() - input.width()));
1. } else {
1. input.width(width);
1. }
1. }
1. }
1. });
$.extend($.fn.datagrid.defaults.editors, { text: { init: function(container, options){ var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container); return input; }, getValue: function(target){ return $(target).val(); }, setValue: function(target, value){ $(target).val(value); }, resize: function(target, width){ var input = $(target); if ($.boxModel == true){ input.width(width - (input.outerWidth() - input.width())); } else { input.width(width); } } } });
####
#### DataGrid View
使用$.fn.datagrid.defaults.view重写默认值对象。
该视图是一个对象,将告诉DataGrid如何渲染行。该对象必须定义下列函数:
<table class="doc-table"><tbody><tr><th><strong>名称</strong></th> <th><strong>参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>render</td> <td>target, container, frozen</td> <td>数据加载时调用。<br/>target:DOM对象,DataGrid对象。<br/>container:行容器。<br/>frozen:指明如何渲染冻结容器。</td></tr><tr><td>renderFooter</td> <td>target, container, frozen</td> <td>这是一个选择函数来渲染行页脚。</td></tr><tr><td>renderRow</td> <td>target, fields, frozen, rowIndex, rowData</td> <td><span lang="zh-CN" id="result_box" class="short_text" a="undefined" c="4" closure_uid_569652002="107"><span closure_uid_569652002="168">这是一个属性</span><span closure_uid_569652002="169">功能</span><span closure_uid_569652002="170">,</span><span closure_uid_569652002="171">将调用</span><span closure_uid_569652002="172">render函数</span><span closure_uid_569652002="173">。</span></span></td></tr><tr><td>refreshRow</td> <td>target, rowIndex</td> <td>定义如何刷新指定的行。</td></tr><tr><td>onBeforeRender</td> <td>target, rows</td> <td>在视图被呈现之前触发。</td></tr><tr><td>onAfterRender</td> <td>target</td> <td>在视图呗呈现之后触发。</td></tr></tbody></table>
#### 事件
事件继承自[panel](#)(面板),以下是DataGrid新增的事件。
<table class="doc-table"><tbody><tr><th><strong>事件名</strong></th> <th><strong>参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>onLoadSuccess</td> <td>data</td> <td>在数据加载成功的时候触发。</td></tr><tr><td>onLoadError</td> <td>none</td> <td>在载入远程数据产生错误的时候触发。</td></tr><tr><td>onBeforeLoad</td> <td>param</td> <td>在载入请求数据数据之前触发,如果返回false可终止载入数据操作。</td></tr><tr><td>onClickRow</td> <td>rowIndex, rowData</td> <td>在用户点击一行的时候触发,参数包括:<br/>rowIndex:点击的行的索引值,该索引值从0开始。<br/>rowData:对应于点击行的记录。</td></tr><tr><td>onDblClickRow</td> <td>rowIndex, rowData</td> <td>在用户双击一行的时候触发,参数包括:<br/>rowIndex:点击的行的索引值,该索引值从0开始。<br/>rowData:对应于点击行的记录。</td></tr><tr><td>onClickCell</td> <td>rowIndex, field, value</td> <td>在用户点击一个单元格的时候触发。</td></tr><tr><td>onDblClickCell</td> <td>rowIndex, field, value</td> <td>在用户双击一个单元格的时候触发。 <p>代码示例:</p><pre>// 在双击一个单元格的时候开始编辑并生成编辑器,然后定位到编辑器的输入框上
$('#dg').datagrid({
onDblClickCell: function(index,field,value){
$(this).datagrid('beginEdit', index);
var ed = $(this).datagrid('getEditor', {index:index,field:field});
$(ed.target).focus();
}
});
</pre></td></tr><tr><td>onBeforeSortColumn</td> <td>sort, order</td> <td>在用户排序一个列之前触发,返回false可以取消排序。<strong><font color="#ff0000">(该事件自1.3.6版开始可用)</font></strong></td></tr><tr><td>onSortColumn</td> <td>sort, order</td> <td>在用户排序一列的时候触发,参数包括:<br/>sort:排序列字段名称。<br/>order:排序列的顺序(ASC或DESC)</td></tr><tr><td>onResizeColumn</td> <td>field, width</td> <td>在用户调整列大小的时候触发。</td></tr><tr><td>onSelect</td> <td>rowIndex, rowData</td> <td>在用户选择一行的时候触发,参数包括:<br/>rowIndex:选择的行的索引值,索引从0开始。<br/>rowData:对应于所选行的记录。</td></tr><tr><td>onUnselect</td> <td>rowIndex, rowData</td> <td>在用户取消选择一行的时候触发,参数包括:<br/>rowIndex:选择的行的索引值,索引从0开始。<br/>rowData:对应于取消选择行的记录。</td></tr><tr><td>onSelectAll</td> <td>rows</td> <td>在用户选择所有行的时候触发。</td></tr><tr><td>onUnselectAll</td> <td>rows</td> <td>在用户取消选择所有行的时候触发。</td></tr><tr><td>onCheck</td> <td>rowIndex,rowData</td> <td>在用户勾选一行的时候触发,参数包括:<br/>rowIndex:选中的行索引,索引从0开始。<br/>rowData:对应于所选行的记录。<br/><strong><font color="#ff0000">(该事件自1.3版开始可用)</font></strong></td></tr><tr><td>onUncheck</td> <td>rowIndex,rowData</td> <td>在用户取消勾选一行的时候触发,参数包括:<br/>rowIndex:选中的行索引,索引从0开始。<br/>rowData:对应于取消勾选行的记录。<br/><strong><font color="#ff0000">(该事件自1.3版开始可用)</font></strong></td></tr><tr><td>onCheckAll</td> <td>rows</td> <td>在用户勾选所有行的时候触发。<strong><font color="#ff0000">(该事件自1.3版开始可用)</font></strong></td></tr><tr><td>onUncheckAll</td> <td>rows</td> <td>在用户取消勾选所有行的时候触发。<strong><font color="#ff0000">(该事件自1.3版开始可用)</font></strong></td></tr><tr><td>onBeforeEdit</td> <td>rowIndex, rowData</td> <td>在用户开始编辑一行的时候触发,参数包括:<br/>rowIndex:编辑行的索引,索引从0开始。<br/>rowData:对应于编辑行的记录。</td></tr><tr><td>onBeginEdit</td> <td>rowIndex, rowData</td> <td>在一行进入编辑模式的时候触发。<strong><font color="#ff0000">(该事件自1.3.6版开始可用)</font></strong></td></tr><tr><td>onEndEdit</td> <td>rowIndex, rowData, changes</td> <td>在完成编辑但编辑器还没有销毁之前触发。<strong><font color="#ff0000">(该事件自1.3.6版开始可用)</font></strong></td></tr><tr><td>onAfterEdit</td> <td>rowIndex, rowData, changes</td> <td>在用户完成编辑一行的时候触发,参数包括:<br/>rowIndex:编辑行的索引,索引从0开始。<br/>rowData:对应于完成编辑的行的记录。<br/>changes:更改后的字段(键)/值对。</td></tr><tr><td>onCancelEdit</td> <td>rowIndex, rowData</td> <td>在用户取消编辑一行的时候触发,参数包括:<br/>rowIndex:编辑行的索引,索引从0开始。<br/>rowData:对应于编辑行的记录。</td></tr><tr><td>onHeaderContextMenu</td> <td>e, field</td> <td>在鼠标右击DataGrid表格头的时候触发。</td></tr><tr><td>onRowContextMenu</td> <td>e, rowIndex, rowData</td> <td>在鼠标右击一行记录的时候触发。</td></tr></tbody></table>
#### 方法
<table class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回属性对象。</td></tr><tr><td>getPager</td> <td>none</td> <td>返回页面对象。</td></tr><tr><td>getPanel</td> <td>none</td> <td>返回面板对象。</td></tr><tr><td>getColumnFields</td> <td>frozen</td> <td>返回列字段。如果设置了frozen属性为true,将返回固定列的字段名。<br/>代码示例:<br/><pre style="COLOR: #006600">var opts = $('#dg').datagrid('getColumnFields'); // 获取解冻列
var opts = $('#dg').datagrid('getColumnFields', true); // 获取冻结列</pre></td></tr><tr><td>getColumnOption</td> <td>field</td> <td>返回指定列属性。</td></tr><tr><td>resize</td> <td>param</td> <td>做调整和布局。</td></tr><tr><td>load</td> <td>param</td> <td>加载和显示第一页的所有行。如果指定了'param',它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询,通过调用这个方法从服务器加载新数据。<pre style="COLOR: #006600">$('#dg').datagrid('load',{
code: '01',
name: 'name01'
});
</pre></td></tr><tr><td>reload</td> <td>param</td> <td>重载行。等同于'load'方法,但是它将保持在当前页。</td></tr><tr><td>reloadFooter</td> <td>footer</td> <td>重载页脚行。代码示例: <pre style="COLOR: #006600">// 更新页脚行的值并刷新var rows = $('#dg').datagrid('getFooterRows');
rows[0]['name'] = 'new name';
rows[0]['salary'] = 60000;
$('#dg').datagrid('reloadFooter');
// 更新页脚行并载入新数据$('#dg').datagrid('reloadFooter',[
{name: 'name1', salary: 60000},
{name: 'name2', salary: 65000}
]);
</pre></td></tr><tr><td>loading</td> <td>none</td> <td>显示载入状态。</td></tr><tr><td>loaded</td> <td>none</td> <td>隐藏载入状态。</td></tr><tr><td>fitColumns</td> <td>none</td> <td>使列自动展开/收缩到合适的DataGrid宽度。</td></tr><tr><td>fixColumnSize</td> <td>field</td> <td>固定列大小。如果'field'参数未配置,所有列大小将都是固定的。 <p>代码示例:</p><pre>$('#dg').datagrid('fixColumnSize', 'name'); // 固定'name'列大小
$('#dg').datagrid('fixColumnSize'); // 固定所有列大小</pre></td></tr><tr><td>fixRowHeight</td> <td>index</td> <td>固定指定列高度。如果'index'参数未配置,所有行高度都是固定的。</td></tr><tr><td>freezeRow</td> <td>index</td> <td>冻结指定行,当DataGrid表格向下滚动的时候始终保持被冻结的行显示在顶部。<strong><font color="#ff0000">(该方法自1.3.2版开始可用)</font></strong> </td></tr><tr><td>autoSizeColumn</td> <td>field</td> <td>自动调整列宽度以适应内容。<strong><font color="#ff0000">(该方法自1.3版开始可用)</font></strong></td></tr><tr><td>loadData</td> <td>data</td> <td>加载本地数据,旧的行将被移除。</td></tr><tr><td>getData</td> <td>none</td> <td>返回加载完毕后的数据。</td></tr><tr><td>getRows</td> <td>none</td> <td>返回当前页的所有行。</td></tr><tr><td>getFooterRows</td> <td>none</td> <td>返回页脚行。</td></tr><tr><td>getRowIndex</td> <td>row</td> <td>返回指定行的索引号,该行的参数可以是一行记录或一个ID字段值。</td></tr><tr><td>getChecked</td> <td>none</td> <td>在复选框呗选中的时候返回所有行。<strong><font color="#ff0000">(该方法自1.3版开始可用)</font></strong></td></tr><tr><td>getSelected</td> <td>none</td> <td>返回第一个被选中的行或如果没有选中的行则返回null。</td></tr><tr><td>getSelections</td> <td>none</td> <td>返回所有被选中的行,当没有记录被选中的时候将返回一个空数组。</td></tr><tr><td>clearSelections</td> <td>none</td> <td>清除所有选择的行。</td></tr><tr><td>clearChecked</td> <td>none</td> <td>清除所有勾选的行。<strong><font color="#ff0000">(该方法自1.3.2版开始可用)</font></strong> </td></tr><tr><td>scrollTo</td> <td>index</td> <td>滚动到指定的行。<strong><font color="#ff0000">(该方法自1.3.3版开始可用)</font></strong> </td></tr><tr><td>highlightRow</td> <td>index</td> <td>高亮一行。<strong><font color="#ff0000">(该方法自1.3.3版开始可用)</font></strong> </td></tr><tr><td>selectAll</td> <td>none</td> <td>选择当前页中所有的行。</td></tr><tr><td>unselectAll</td> <td>none</td> <td>取消选择所有当前页中所有的行。</td></tr><tr><td>selectRow</td> <td>index</td> <td>选择一行,行索引从0开始。</td></tr><tr><td>selectRecord</td> <td>idValue</td> <td>通过ID值参数选择一行。</td></tr><tr><td>unselectRow</td> <td>index</td> <td>取消选择一行。</td></tr><tr><td>checkAll</td> <td>none</td> <td>勾选当前页中的所有行。<strong><font color="#ff0000">(该方法自1.3版开始可用)</font></strong></td></tr><tr><td>uncheckAll</td> <td>none</td> <td>取消勾选当前页中的所有行。<strong><font color="#ff0000">(该方法自1.3版开始可用)</font></strong></td></tr><tr><td>checkRow</td> <td>index</td> <td>勾选一行,行索引从0开始。<strong><font color="#ff0000">(该方法自1.3版开始可用)</font></strong></td></tr><tr><td>uncheckRow</td> <td>index</td> <td>取消勾选一行,行索引从0开始。<strong><font color="#ff0000">(该方法自1.3版开始可用)</font></strong></td></tr><tr><td>beginEdit</td> <td>index</td> <td>开始编辑行。</td></tr><tr><td>endEdit</td> <td>index</td> <td>结束编辑行。</td></tr><tr><td>cancelEdit</td> <td>index</td> <td>取消编辑行。</td></tr><tr><td>getEditors</td> <td>index</td> <td>获取指定行的编辑器。每个编辑器都有以下属性:<br/>actions:编辑器可以执行的动作,同编辑器定义。<br/>target:目标编辑器的jQuery对象。<br/>field:字段名称。<br/>type:编辑器类型,比如:'text','combobox','datebox'等。</td></tr><tr><td>getEditor</td> <td>options</td> <td>获取指定编辑器,options包含2个属性:<br/>index:行索引。<br/>field:字段名称。 <p>代码示例:</p><pre>// 获取日期输入框编辑器并更改它的值
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');
</pre></td></tr><tr><td>refreshRow</td> <td>index</td> <td>刷新行。</td></tr><tr><td>validateRow</td> <td>index</td> <td>验证指定的行,当验证有效的时候返回true。</td></tr><tr><td>updateRow</td> <td>param</td> <td>更新指定行,参数包含下列属性:<br/>index:执行更新操作的行索引。<br/>row:更新行的新数据。 <p>代码示例:</p><pre>$('#dg').datagrid('updateRow',{
index: 2,
row: {
name: '新名称',
note: '新消息'
}
});
</pre></td></tr><tr><td>appendRow</td> <td>row</td> <td>追加一个新行。新行将被添加到最后的位置。 <pre style="COLOR: #006600">$('#dg').datagrid('appendRow',{
name: '新名称',
age: 30,
note: '新消息'
});
</pre></td></tr><tr><td>insertRow</td> <td>param</td> <td> <p>插入一个新行,参数包括一下属性:<br/>index:要插入的行索引,如果该索引值未定义,则追加新行。<br/>row:行数据。</p> <p>代码示例:</p><pre style="COLOR: #006600">// 在第二行的位置插入一个新行
$('#dg').datagrid('insertRow',{
index: 1, // 索引从0开始
row: {
name: '新名称',
age: 30,
note: '新消息'
}
});
</pre></td></tr><tr><td>deleteRow</td> <td>index</td> <td>删除行。</td></tr><tr><td>getChanges</td> <td>type</td> <td>从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行,可以使用的值有:inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行。</td></tr><tr><td>acceptChanges</td> <td>none</td> <td>提交所有从加载或者上一次调用acceptChanges函数后更改的数据。</td></tr><tr><td>rejectChanges</td> <td>none</td> <td>回滚所有从创建或者上一次调用acceptChanges函数后更改的数据。</td></tr><tr><td>mergeCells</td> <td>options</td> <td>合并单元格,options包含以下属性:<br/>index:行索引。<br/>field:字段名称。<br/>rowspan:合并的行数。<br/>colspan:合并的列数。</td></tr><tr><td>showColumn</td> <td>field</td> <td>显示指定的列。</td></tr><tr><td>hideColumn</td> <td>field</td> <td>隐藏指定的列。</td></tr><tr><td>sort</td> <td>param</td> <td> <p>排序datagrid表格。<strong><font color="#ff0000">(该方法自1.3.6版开始可用)</font></strong></p> <p>代码示例:</p><pre style="COLOR: #006600">$('#dg').datagrid('sort', 'itemid'); // 排序一个列
$('#dg').datagrid('sort', { // 指定了排序顺序的列
sortName: 'productid',
sortOrder: 'desc'
});</pre></td></tr></tbody></table>
- jQuery EasyUI 1.4 版 API 中文版 (Made By Richie696)
- 文档说明
- 汉化说明
- EasyUI更新说明
- Base(基础)
- parser(解析器)
- easyloader(简单加载)
- draggable(拖动)
- droppable(放置)
- resizable(调整大小)
- pagination(分页)
- searchbox(搜索框)
- progressbar(进度条)
- tooltip(提示框)
- Layout(布局)
- panel(面板)
- tabs(选项卡)
- accordion(分类)
- layout(布局)
- Menu and Button(菜单和按钮)
- menu(菜单)
- linkbutton(按钮)
- menubutton(菜单按钮)
- splitbutton(分割按钮)
- Form(表单)
- form(表单)
- validatebox(验证框)
- textbox(文本框)
- combo(自定义下拉框)
- combobox(下拉列表框)
- combotree(树形下拉框)
- combogrid(数据表格下拉框)
- numberbox(数值输入框)
- datebox(日期输入框)
- datetimebox(日期时间输入框)
- datetimespinner(日期时间微调框)
- calendar(日历)
- spinner(微调)
- numberspinner(数字微调)
- timespinner(时间微调)
- slider(滑动条)
- filebox(文件框)
- Window(窗口)
- window(窗口)
- dialog(对话框窗口)
- messager(消息窗口)
- DataGrid and Tree(表格和树)
- datagrid(数据表格)
- propertygrid(属性表格)
- tree(树)
- treegrid(树形表格)
- Extension(扩展)
- Portal(门户)
- DataGrid View(数据表格展示)
- Editable DataGrid(可编辑表格)
- Editable Tree(可编辑树)
- DataGrid Filter Row(可过滤行的数据表格)
- Drag and Drop Rows in DataGrid(可拖放行的数据表格)
- Drag and Drop Rows in TreeGrid(可拖放行的树形表格)
- DWR Loader(DWR装载器)
- RTL Support(RTL支持)
- Ribbon(Ribbon界面)