easyui datagrid 基础方法和事件

悠悠 2022-05-10 05:12 326阅读 0赞

\--------------------- 本文来自 kopess 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/yeyingss/article/details/52955010?utm\_source=copy

数据表格属性（DataGrid Properties）

属性继承控制面板，以下是数据表格独有的属性。

<table> 
 <tbody> 
 <tr> 
 <th>名称</th> 
 <th>类型</th> 
 <th>描述</th> 
 <th>默认值</th> 
 </tr> 
 <tr> 
 <td>columns</td> 
 <td>array</td> 
 <td>数据表格列配置对象，查看列属性以获取更多细节。</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>设置为true将自动使列适应表格宽度以防止出现水平滚动。</td> 
 <td>false</td> 
 </tr> 
 <tr> 
 <td>autoRowHeight</td> 
 <td>boolean</td> 
 <td>定义设置行的高度，根据该行的内容。设置为false可以提高负载性能。</td> 
 <td>true</td> 
 </tr> 
 <tr> 
 <td>toolbar</td> 
 <td>array,selector</td> 
 <td>数据表格顶部面板的工具栏。可能的值： 1）数组，每个工具选项和链接按钮相同。 2）选择显示的工具栏。 在一个&lt;div&gt;的标签定义工具栏: <pre>$('#dg').datagrid({
	toolbar: '#tb'
});
&lt;div id="tb"&gt;
&lt;a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a&gt;
&lt;a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a&gt;
&lt;/div&gt;
</pre> 通过数组定义工具栏: <pre>$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('edit')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('help')}
	}]
});
</pre> </td> 
 <td>null</td> 
 </tr> 
 <tr> 
 <td>striped</td> 
 <td>boolean</td> 
 <td>设置为true将交替显示行背景。</td> 
 <td>false</td> 
 </tr> 
 <tr> 
 <td>method</td> 
 <td>string</td> 
 <td>请求远程数据的方法类型。</td> 
 <td>post</td> 
 </tr> 
 <tr> 
 <td>nowrap</td> 
 <td>boolean</td> 
 <td>设置为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>一个用以从远程站点请求数据的超链接地址。</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将在数据表格底部显示分页工具栏。</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>checkOnSelect</td> 
 <td>boolean</td> 
 <td>如果为true，该复选框被选中/取消选中，当用户点击某一行上。如果为false，该复选框仅检查/取消选中，当用户点击完全的复选框。 此属性是1.3版本。</td> 
 <td>true</td> 
 </tr> 
 <tr> 
 <td>selectOnCheck</td> 
 <td>boolean</td> 
 <td>如果设置为true，单击一个复选框，将始终选择行。如果为false，不会选择行选中该复选框。 此属性是1.3版本。</td> 
 <td>true</td> 
 </tr> 
 <tr> 
 <td>pagePosition</td> 
 <td>string</td> 
 <td>&nbsp;定义的分页栏的位置。可用的值有&nbsp;'top','bottom','both'。 此属性是可自1.3版本。</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>当设置分页属性时，初始化每页记录数列表。</td> 
 <td>[10,20,30,40,50]</td> 
 </tr> 
 <tr> 
 <td>queryParams</td> 
 <td>object</td> 
 <td>当请求远程数据时，发送的额外参数。 示例: <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>remoteSort</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>rowStyler</td> 
 <td>function</td> 
 <td>返回样式，如：'background:red'，function有2个参数： index：行索引，从0开始. row：对应于该行记录的对象。 示例: <pre>$('#dg').datagrid({
	rowStyler: function(index,row){
		if (row.listprice&gt;80){
			return 'background-color:#6293BB;color:#fff;';
		}
	}
});
</pre> </td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>loader</td> 
 <td>function</td> 
 <td>定义如何从远程服务器加载数据。返回false可以取消该操作。这个函数接受以下参数： param:&nbsp;参数对象传递到远程服务器。 success(data):&nbsp;回调函数将被调用成功检索的数据。 error():回调函数将被调用失败时检索数据。</td> 
 <td>json loader</td> 
 </tr> 
 <tr> 
 <td>loadFilter</td> 
 <td>function</td> 
 <td>返回过滤的数据显示。该函数需要一个参数'data'，表示原始数据。您可以更改源数据的标准数据格式。此函数必须返回标准数据对象中包含的“total”和“rows”的属性。 示例: <pre>// removing 'd' object from asp.net web service json output
$('#dg').datagrid({
	loadFilter: function(data){
		if (data.d){
			return data.d;
		} else {
			return data;
		}
	}
});
</pre> </td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>editors</td> 
 <td>object</td> 
 <td>定义当编辑一行时的编辑模式。</td> 
 <td>predefined editors</td> 
 </tr> 
 <tr> 
 <td>view</td> 
 <td>object</td> 
 <td>定义数据表格的视图。</td> 
 <td>default view</td> 
 </tr> 
 </tbody> 
</table>

列属性（Column Properties）

数据表格的列是一个对象数组，即这个对象中的元素也是一个数组（js中数组是对象）。 对象数组中的每一个元素都是可配置的对象，每个可配置对象定义一个列。

示例:

1.  columns:\[\[   
2.      \{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true\},   
3.      \{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true\},   
4.      \{title:'Item Details',colspan:4\}   
5.  \],\[   
6.      \{field:'listprice',title:'List Price',width:80,align:'right',sortable:true\},   
7.      \{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true\},   
8.      \{field:'attr1',title:'Attribute',width:100\},   
9.      \{field:'status',title:'Status',width:60\}   
10. \]\]

<table> 
 <tbody> 
 <tr> 
 <th>名称</th> 
 <th>类型</th> 
 <th>描述</th> 
 <th>默认值</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>sortable</td> 
 <td>boolean</td> 
 <td>设置为true允许对该列排序。</td> 
 <td>undefined</td> 
 </tr> 
 <tr> 
 <td>resizable</td> 
 <td>boolean</td> 
 <td>设置为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>格式化单元格函数，有3个参数： value：字段的值。 rowData：行数据。 rowIndex：行索引。 示例: <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>单元格样式函数，返回样式字符串装饰表格如'background:red'，function有3个参数： value：字段值。 rowData：行数据。 rowIndex：行索引。 示例: <pre>$('#dg').datagrid({
	columns:[[
		{field:'listprice',title:'List Price', width:80, align:'right',
			styler: function(value,row,index){
				if (value &lt; 20){
					return 'background-color:#ffee00;color:red;';
				}
			}
		}
	]]
});
</pre> </td> 
 <td>undefined</td> 
 </tr> 
 <tr> 
 <td>sorter</td> 
 <td>function</td> 
 <td>T自定义字段排序函数，有2个参数： a：该列的第一个值。 b：该列的第二个值。 示例: <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]&gt;b[1]?1:-1); 
					} else { 
						return (a[0]&gt;b[0]?1:-1); 
					} 
				} else { 
					return (a[2]&gt;b[2]?1:-1); 
				} 
			} 
		}
	]]
});
</pre> </td> 
 <td>undefined</td> 
 </tr> 
 <tr> 
 <td>editor</td> 
 <td>string,object</td> 
 <td>表明编辑类型。如果属性是字符串类型表示编辑类型，如果是对象则包含2个参数： type：字符串，编辑类型，可选值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。 options：对象，对象于编辑类型的编辑器属性。</td> 
 <td>undefined</td> 
 </tr> 
 </tbody> 
</table>

编辑器（Editor）

使用$.fn.datagrid.defaults.editors重载默认值。

每个编辑器都有以下方法:

<table> 
 <tbody> 
 <tr> 
 <th>名称</th> 
 <th>属性</th> 
 <th>描述</th> 
 </tr> 
 <tr> 
 <td>init</td> 
 <td>container, options</td> 
 <td>初始化编辑器并返回目标对象。</td> 
 </tr> 
 <tr> 
 <td>destroy</td> 
 <td>target</td> 
 <td>注销编辑器。</td> 
 </tr> 
 <tr> 
 <td>getValue</td> 
 <td>target</td> 
 <td>获取编辑框的值。</td> 
 </tr> 
 <tr> 
 <td>setValue</td> 
 <td>target , value</td> 
 <td>设置编辑框的值。</td> 
 </tr> 
 <tr> 
 <td>resize</td> 
 <td>target , width</td> 
 <td>调整编辑器</td> 
 </tr> 
 </tbody> 
</table>

如下代码将定义一个文本编辑器:

1. $.extend($.fn.datagrid.defaults.editors, \{   
2.     text: \{   
3.         init: function(container, options)\{   
4.             var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);   
5.             return input;   
6.         \},   
7.         getValue: function(target)\{   
8.             return $(target).val();   
9.         \},   
10.         setValue: function(target, value)\{   
11.             $(target).val(value);   
12.         \},   
13.         resize: function(target, width)\{   
14.             var input = $(target);   
15.             if ($.boxModel == true)\{   
16.                 input.width(width - (input.outerWidth() - input.width()));   
17.             \} else \{   
18.                 input.width(width);   
19.             \}   
20.         \}   
21.     \}   
22. \});

数据表格视图（DataGrid View）

使用$.fn.datagrid.defaults.view重载默认值。

视图是一个告诉数据表格如何呈现行记录的对象，对象必须定义以下方法:

<table> 
 <tbody> 
 <tr> 
 <th>名称</th> 
 <th>属性</th> 
 <th>描述</th> 
 </tr> 
 <tr> 
 <td>render</td> 
 <td>target, container, frozen</td> 
 <td>当数据载入时调用。 target: DOM对象，数据网格对象。 container: 行记录容器。 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>这是一个可选函数，它可以被render函数调用。</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>

事件（Events）

事件继承控制面板，以下是数据表格独有的属性。

<table> 
 <tbody> 
 <tr> 
 <th>名称</th> 
 <th>属性</th> 
 <th>描述</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>当用户点击行时触发，参数如下： rowIndex：被点击的行索引，从0开始。 rowData：对应于被点击的行的记录。</td> 
 </tr> 
 <tr> 
 <td>onDblClickRow</td> 
 <td>rowIndex, rowData</td> 
 <td>当用户双击一行时触发，参数如下： rowIndex：被点击的行索引，从0开始。 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>当用户双击单元格时触发。 示例: <pre>// when double click a cell, begin editing and make the editor get focus
$('#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>onSortColumn</td> 
 <td>sort, order</td> 
 <td>当用户对列排序时触发，参数如下： sort：排序字段名称。 order：排序顺序。</td> 
 </tr> 
 <tr> 
 <td>onResizeColumn</td> 
 <td>field, width</td> 
 <td>当用户调整列宽时触发。</td> 
 </tr> 
 <tr> 
 <td>onSelect</td> 
 <td>rowIndex, rowData</td> 
 <td>当用户选择一行是触发，参数如下： rowIndex：被选择的行索引，从0开始。 rowData：对应于被选择行的记录。</td> 
 </tr> 
 <tr> 
 <td>onUnselect</td> 
 <td>rowIndex, rowData</td> 
 <td>当用户取消选择一行时触发，参数如下： rowIndex：被取消选择的行索引，从0开始。 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>当用户选中行时触发，参数包含： rowIndex：选中行的索引，从0开始 rowData：选中的行对应的记录 此属性是1.3版本。</td> 
 </tr> 
 <tr> 
 <td>onUncheck</td> 
 <td>rowIndex,rowData</td> 
 <td>当用户取消选中行时触发，参数包含： rowIndex：取消选中行的索引，从0开始 rowData：未经检查的行对应的记录 此属性是1.3版本。</td> 
 </tr> 
 <tr> 
 <td>onCheckAll</td> 
 <td>rows</td> 
 <td>当用户检查所有行时触发。此属性是1.3版本。</td> 
 </tr> 
 <tr> 
 <td>onUncheckAll</td> 
 <td>rows</td> 
 <td>用户取消所有行时触发。此属性是1.3版本。</td> 
 </tr> 
 <tr> 
 <td>onBeforeEdit</td> 
 <td>rowIndex, rowData</td> 
 <td>当用户开始编辑一行时触发，参数如下： rowIndex：正在编辑的行索引，从0开始。 rowData：对应于正在编辑的行的记录。</td> 
 </tr> 
 <tr> 
 <td>onAfterEdit</td> 
 <td>rowIndex, rowData, changes</td> 
 <td>当用户编辑完成时触发，参数如下： rowIndex：正在编辑的行索引，从0开始。 rowData：对应于正在编辑的行的记录。 changes：被改变的字段内容，对应方式为字段：值。</td> 
 </tr> 
 <tr> 
 <td>onCancelEdit</td> 
 <td>rowIndex, rowData</td> 
 <td>当用户取消编辑行时触发，参数如下： rowIndex：正在编辑的行索引，从0开始。 rowData：对应于正在编辑的行的记录。</td> 
 </tr> 
 <tr> 
 <td>onHeaderContextMenu</td> 
 <td>e, field</td> 
 <td>当数据表格的列标题被鼠标右键单击时触发。</td> 
 </tr> 
 <tr> 
 <td>onRowContextMenu</td> 
 <td>e, rowIndex, rowData</td> 
 <td>当一行被鼠标右键单击时触发。</td> 
 </tr> 
 </tbody> 
</table>

方法（Methods）

<table> 
 <tbody> 
 <tr> 
 <th>名称</th> 
 <th>属性</th> 
 <th>描述</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，将返回固定列的字段名。 示例: <pre>var opts = $('#dg').datagrid('getColumnFields');	// get unfrozen columns
var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
</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'参数，它将会覆盖查询参数属性的值。通过传递一些参数，通常做一个查询，这个方法可以被称为从服务器加载新数据。 <pre>$('#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>// update footer row values and then refresh
var rows = $('#dg').datagrid('getFooterRows');
rows[0]['name'] = 'new name';
rows[0]['salary'] = 60000;
$('#dg').datagrid('reloadFooter');

// update footer rows with new data
$('#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>让列宽自动适应数据表格的宽度。</td> 
 </tr> 
 <tr> 
 <td>fixColumnSize</td> 
 <td>field</td> 
 <td>固定列尺寸。如果“field'&nbsp;参数未指定，将所有列的大小固定。 示例: <pre>$('#dg').datagrid('fixColumnSize', 'name'); // fix the 'name' column size
$('#dg').datagrid('fixColumnSize'); // fix all columns size
</pre> </td> 
 </tr> 
 <tr> 
 <td>fixRowHeight</td> 
 <td>index</td> 
 <td>固定特定列的高度。如果“index'&nbsp;参数未指定，将所有列的高度固定。</td> 
 </tr> 
 <tr> 
 <td>autoSizeColumn</td> 
 <td>field</td> 
 <td>自动调整列宽，以适应内容。此方法是1.3版本特有的。</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>返回指定行的索引，row参数可以是行记录或者是一个id字段的值。</td> 
 </tr> 
 <tr> 
 <td>getChecked</td> 
 <td>none</td> 
 <td>返回所有行的复选框已被选中。此方法是1.3版本特有的。</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>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>检查所有页面的行。此方法是1.3版本特有的。</td> 
 </tr> 
 <tr> 
 <td>uncheckAll</td> 
 <td>none</td> 
 <td>取消检查所有当前页面的行。此方法是1.3版本特有的。</td> 
 </tr> 
 <tr> 
 <td>checkRow</td> 
 <td>index</td> 
 <td>检查行，行索引从0开始。此方法是1.3版本特有的。</td> 
 </tr> 
 <tr> 
 <td>uncheckRow</td> 
 <td>index</td> 
 <td>取消检查行，行索引从0开始。此方法是1.3版本特有的。</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>获取指定行的编辑器，每个编辑器有如下属性： actions：编辑器可以做的行为。 target：目标编辑器jQuery对象。 field：字段名。 type：编辑器类型。</td> 
 </tr> 
 <tr> 
 <td>getEditor</td> 
 <td>options</td> 
 <td>获取特定的编辑器，options参数有2个属性： index：行索引。 field:字段名。 示例: <pre>// get the datebox editor and change its value
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>更新指定的行，param参数包含如下属性： index：要更新的行索引。 row：新的行数据。 示例: <pre>$('#dg').datagrid('updateRow',{
	index: 2,
	row: {
		name: 'new name',
		note: 'new note message'
	}
});
</pre> </td> 
 </tr> 
 <tr> 
 <td>appendRow</td> 
 <td>row</td> 
 <td>添加一行。&nbsp;新的行会被添加到最后一个位置: <pre>$('#dg').datagrid('appendRow',{
	name: 'new name',
	age: 30,
	note: 'some messages'
});
</pre> </td> 
 </tr> 
 <tr> 
 <td>insertRow</td> 
 <td>param</td> 
 <td> 插入一个新行，param参数包含如下属性： index：要插入的行索引，如果没有定义则在最后面添加一个新行。 row：行数据。 示例: <pre>// insert a new row at second row position
$('#dg').datagrid('insertRow',{
	index: 1,	// index start with 0
	row: {
		name: 'new name',
		age: 30,
		note: 'some messages'
	}
});
</pre> </td> 
 </tr> 
 <tr> 
 <td>deleteRow</td> 
 <td>index</td> 
 <td>删除一行。</td> 
 </tr> 
 <tr> 
 <td>getChanges</td> 
 <td>type</td> 
 <td>获取从最后一次提交开始的被修改的所有行，type参数表明修改的类型，可选值：inserted，deleted，updated等 。当没有传递type参数时，返回所有被修改的行。</td> 
 </tr> 
 <tr> 
 <td>acceptChanges</td> 
 <td>none</td> 
 <td>提交所有修改的数据，提交后的数据将不能再修改或者回滚。</td> 
 </tr> 
 <tr> 
 <td>rejectChanges</td> 
 <td>none</td> 
 <td>回滚自创建以来或自上次调用AcceptChanges，所有的变化数据。</td> 
 </tr> 
 <tr> 
 <td>mergeCells</td> 
 <td>options</td> 
 <td>合并单元格，options参数包含如下属性： index：行索引。 field：字段名。 rowspan：整合单元格要跨的行数。 colspan：整合单元格要跨的列数。</td> 
 </tr> 
 <tr> 
 <td>showColumn</td> 
 <td>field</td> 
 <td>显示特定的列。</td> 
 </tr> 
 <tr> 
 <td>hideColumn</td> 
 <td>field</td> 
 <td>隐藏特定的列。</td> 
 </tr> 
 </tbody> 
</table>