easyui datagrid属性和方法

本是古典何须时尚 2022-03-21 02:47 425阅读 0赞

**(学习留存，如有侵权，请告知，立刻删除！)**

使用方法（Usage Example）

从现有的表单元素创建数据表格，定义在html中的行，列和数据。

1.  <table class="easyui-datagrid">  
2.      <thead>  
3.          <tr>  
4.              <th data-options="field:'code'">Code</th>  
5.              <th data-options="field:'name'">Name</th>  
6.              <th data-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>标记创建的DataGrid。嵌套的<TH>标签定义的列的表。

1.  <table class="easyui-datagrid" style="width:400px;height:250px"  
2.          data-options="url:'datagrid\_data.json',fitColumns:true,singleSelect:true">  
3.      <thead>  
4.          <tr>  
5.              <th data-options="field:'code',width:100">Code</th>  
6.              <th data-options="field:'name',width:100">Name</th>  
7.              <th data-options="field:'price',width:100,align:'right'">Price</th>  
8.          </tr>  
9.      </thead>  
10. </table>

使用JavaScript创建数据表格。

1.  <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.  \});

查询数据填充数据表格。

1.  $('\#dg').datagrid('load', \{   
2.      name: 'easyui',   
3.      address: 'ho'  
4.  \});

数据更改与服务器交互，刷新当前数据。

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

数据表格属性（DataGrid Properties）

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

<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>数据表格列配置对象，查看列属性以获取更多细节。</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>数据表格顶部面板的工具栏。可能的值：<br> 1）数组，每个工具选项和链接按钮相同。<br> 2）选择显示的工具栏。<br> 在一个&lt;div&gt;的标签定义工具栏: <pre><code>$('#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;
</code></pre> <p>通过数组定义工具栏:</p> <pre><code>$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('edit')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('help')}
	}]
});
</code></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，该复选框仅检查/取消选中，当用户点击完全的复选框。<br> 此属性是1.3版本。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>selectOnCheck</td> 
   <td>boolean</td> 
   <td>如果设置为true，单击一个复选框，将始终选择行。如果为false，不会选择行选中该复选框。<br> 此属性是1.3版本。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>pagePosition</td> 
   <td>string</td> 
   <td>&nbsp;定义的分页栏的位置。可用的值有&nbsp;'top','bottom','both'。<br> 此属性是可自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>当请求远程数据时，发送的额外参数。 <p>示例:</p> <pre><code>$('#dg').datagrid({
	queryParams: {
		name: 'easyui',
		subject: 'datagrid'
	}
});
</code></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个参数：<br> index：行索引，从0开始.<br> row：对应于该行记录的对象。 <p>示例:</p> <pre><code>$('#dg').datagrid({
	rowStyler: function(index,row){
		if (row.listprice&gt;80){
			return 'background-color:#6293BB;color:#fff;';
		}
	}
});
</code></pre> </td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>loader</td> 
   <td>function</td> 
   <td>定义如何从远程服务器加载数据。返回false可以取消该操作。这个函数接受以下参数：<br> param:&nbsp;参数对象传递到远程服务器。<br> success(data):&nbsp;回调函数将被调用成功检索的数据。<br> error():回调函数将被调用失败时检索数据。</td> 
   <td>json loader</td> 
  </tr> 
  <tr> 
   <td>loadFilter</td> 
   <td>function</td> 
   <td>返回过滤的数据显示。该函数需要一个参数'data'，表示原始数据。您可以更改源数据的标准数据格式。此函数必须返回标准数据对象中包含的“total”和“rows”的属性。 <p>示例:</p> <pre><code>// removing 'd' object from asp.net web service json output
$('#dg').datagrid({
	loadFilter: function(data){
		if (data.d){
			return data.d;
		} else {
			return data;
		}
	}
});
</code></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><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>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个参数：<br> value：字段的值。<br> rowData：行数据。<br> rowIndex：行索引。 <p>示例:</p> <pre><code>$('#dg').datagrid({
	columns:[[
		{field:'userId',title:'User', width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});
</code></pre> </td> 
   <td>undefined</td> 
  </tr> 
  <tr> 
   <td>styler</td> 
   <td>function</td> 
   <td>单元格样式函数，返回样式字符串装饰表格如'background:red'，function有3个参数：<br> value：字段值。<br> rowData：行数据。<br> rowIndex：行索引。 <p>示例:</p> <pre><code>$('#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;';
				}
			}
		}
	]]
});
</code></pre> </td> 
   <td>undefined</td> 
  </tr> 
  <tr> 
   <td>sorter</td> 
   <td>function</td> 
   <td>T自定义字段排序函数，有2个参数：<br> a：该列的第一个值。<br> b：该列的第二个值。 <p>示例:</p> <pre><code>$('#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);  
				}  
			}  
		}
	]]
});
</code></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：对象，对象于编辑类型的编辑器属性。</td> 
   <td>undefined</td> 
  </tr> 
 </tbody> 
</table>

编辑器（Editor）

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

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

<table> 
 <tbody> 
  <tr> 
   <th><strong>名称</strong></th> 
   <th><strong>属性</strong></th> 
   <th><strong>描述</strong></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><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对象，数据网格对象。<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>这是一个可选函数，它可以被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><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><code>// 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();
	}
});
</code></pre> </td> 
  </tr> 
  <tr> 
   <td>onSortColumn</td> 
   <td>sort, order</td> 
   <td>当用户对列排序时触发，参数如下：<br> sort：排序字段名称。<br> order：排序顺序。</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> 此属性是1.3版本。</td> 
  </tr> 
  <tr> 
   <td>onUncheck</td> 
   <td>rowIndex,rowData</td> 
   <td>当用户取消选中行时触发，参数包含：<br> rowIndex：取消选中行的索引，从0开始<br> rowData：未经检查的行对应的记录<br> 此属性是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>当用户开始编辑一行时触发，参数如下：<br> rowIndex：正在编辑的行索引，从0开始。<br> rowData：对应于正在编辑的行的记录。</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>当数据表格的列标题被鼠标右键单击时触发。</td> 
  </tr> 
  <tr> 
   <td>onRowContextMenu</td> 
   <td>e, rowIndex, rowData</td> 
   <td>当一行被鼠标右键单击时触发。</td> 
  </tr> 
 </tbody> 
</table>

方法（Methods）

<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> 示例: <pre><code>var opts = $('#dg').datagrid('getColumnFields');	// get unfrozen columns
var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
</code></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><code>$('#dg').datagrid('load',{
	code: '01',
	name: 'name01'
});
</code></pre> </td> 
  </tr> 
  <tr> 
   <td>reload</td> 
   <td>param</td> 
   <td>重载记录，跟'load'方法一样但是重载的是当前页的记录而非第一页。</td> 
  </tr> 
  <tr> 
   <td>reloadFooter</td> 
   <td>footer</td> 
   <td>重载行底记录。 示例: <pre><code>// 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}
]);
</code></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;参数未指定，将所有列的大小固定。 <p>示例:</p> <pre><code>$('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size
$('#dg').datagrid('fixColumnSize');  // fix all columns size
</code></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>获取指定行的编辑器，每个编辑器有如下属性：<br> actions：编辑器可以做的行为。<br> target：目标编辑器jQuery对象。<br> field：字段名。<br> type：编辑器类型。</td> 
  </tr> 
  <tr> 
   <td>getEditor</td> 
   <td>options</td> 
   <td>获取特定的编辑器，options参数有2个属性：<br> index：行索引。<br> field:字段名。 <p>示例:</p> <pre><code>// get the datebox editor and change its value
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');
</code></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参数包含如下属性：<br> index：要更新的行索引。<br> row：新的行数据。 <p>示例:</p> <pre><code>$('#dg').datagrid('updateRow',{
	index: 2,
	row: {
		name: 'new name',
		note: 'new note message'
	}
});
</code></pre> </td> 
  </tr> 
  <tr> 
   <td>appendRow</td> 
   <td>row</td> 
   <td>添加一行。&nbsp;新的行会被添加到最后一个位置: <pre><code>$('#dg').datagrid('appendRow',{
	name: 'new name',
	age: 30,
	note: 'some messages'
});
</code></pre> </td> 
  </tr> 
  <tr> 
   <td>insertRow</td> 
   <td>param</td> 
   <td> <p>插入一个新行，param参数包含如下属性：<br> index：要插入的行索引，如果没有定义则在最后面添加一个新行。<br> row：行数据。</p> <p>示例:</p> <pre><code>// 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'
	}
});
</code></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参数包含如下属性：<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> 
 </tbody> 
</table>

![复制代码][copycode.gif]

1     /
      2         //初始化数据
      3     function initGrid()
      4         {  
      5             $('#grid').datagrid({
      6                 width:'100%',    
      7                 height:'auto',
      8                 nowrap: true,
      9                 striped: true,
     10                 fitColumns:false,
     11                 url:'${contextPath}/cardGift/cardGift.do?method=getCardGiftList&activeId=${information.cardGiftActive.activeId}',
     12                 queryParams:queryParam,
     13                 remoteSort:false,
     14                 //Grid对应的主键列
     15                 idField:'',
     16                 singleSelect:true,
     17                 columns:[[
     18                         {field:'serial',title:'',width:15,checkbox:true},
     19                         {field:'activeName',title:'活动名称',width:50,sortable:true},
     20                         {field:'giftGoodId',title:'赠品商品编码',width:80},
     21                         {field:'goodsName',title:'商品名称',width:120},
     22                         {field:'giftCodeTotal',title:'赠品码生成数量',width:100},
     23                         {field:'genCodeNumber',title:'已生成赠品码数量',width:100},
     24                         {field:'startTime',title:'赠品发放起始时间',width:125},
     25                         {field:'endTime',title:'赠品发放结束时间',width:125},
     26                         {field:'memo',title:'备注',width:120}
     27                 ]],
     28                 pagination:true,
     29                 rownumbers:true,
     30                 toolbar:[
     31                 '-',{
     32                     id:'btnClearSelections',
     33                     text:'修改活动商品',
     34                     iconCls:'icon-edit',
     35                     handler:function(){
     36                         editData();
     37                     }
     38                 },'-',{
     39                     id:'btnDel',
     40                     text:'删除活动商品',
     41                     iconCls:'icon-no',
     42                     handler:function(){
     43                         deleteData();
     44                     }
     45                 },
     46                 '-',{
     47                     id:'btnClearSelections',
     48                     text:'清除选择',
     49                     iconCls:'icon-cut',
     50                     handler:function(){
     51                         $('#grid').datagrid('clearSelections');
     52                         //设置选中值
     53                         document.addForm.reset();
     54                         $('#giftCodeTotal').val("0");
     55                         $('#memoData').html("");
     56                         $('#submitBtn').html("确认提交");
     57                         $('#submitBtn').attr('onclick',"addSubmit('insert');");
     58                     }
     59                 }],
     60                 onLoadError:function(){
     61                     XW_dialog.alert('','加载数据失败！');
     62                 }
     63                 
     64             });
     65             
     66             //设置分页控件  
     67             var p = $('#grid').datagrid('getPager');  
     68             $(p).pagination(PAGE_TEMPLATE);
     69         }
     70         
     71         
     72         function editData(){
     73             var row = $('#grid').datagrid("getSelections");
     74             if($(row).length < 1 || $(row).length > 1)
     75             {
     76                 XW_dialog.alert('',"请选择要查看的记录，只能选取单行！");
     77                 return ;
     78             }
     79             //设置默认选中
     80             $('#goodsSelect').combogrid('grid').datagrid('selectRecord',row[0].giftGoodId);
     81             $('#goodsSelect').hide();
     82             //设置选中值
     83             $('#giftCodeTotal').val(row[0].giftCodeTotal);
     84             $('#memoData').html(row[0].memo);
     85             $('#submitBtn').html("更新");
     86             $('#submitBtn').attr('onclick',"addSubmit('update');");
     87             $('#resetBtn').hide();
     88             
     89         }
     90         
     91         
     92         function deleteData(){
     93         var data = $('#grid').datagrid("getSelections");
     94         //删除 
     95         var delurl = "${contextPath}/cardGift/cardGift.do?method=deleteCardGift&activeId="+data[0].activeId+"&giftGoodId="+data[0].giftGoodId;
     96         //发送删除请求
     97         $.ajax({
     98            type: "POST",
     99            dataType:'json',
    100            url: delurl,
    101            success: function(msg){
    102              if(msg.success)
    103                 {
    104                     //保存回调函数使用的数据
    105                     XW_dialog.addData('callbackData',msg.map);
    106                     //删除成功
    107                     XW_dialog.tips(msg.errorMsg, 3);
    108                     deleteCallBack();
    109                 }
    110                 else
    111                 {
    112                     XW_dialog.alert('',msg.errorMsg);
    113                 }
    114            }
    115     });
    116 }    
    117         
    118         
    119         //删除记录回调函数，默认调用刷新记录方法，
    120         function deleteCallBack(){
    121             reloadGrid("grid");
    122         }
    123

[copycode.gif]: /images/20220321/d272bcf133f84ab1a45ca0c9bb75a656.png