EasyUI中Datagride数据网格的简单使用

￡神魔★判官ぃ 2023-10-18 20:19 14阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 数据网格（DataGrid）属性 ###

该属性扩展自面板（panel），下面是为数据网格（datagrid）添加的属性。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>columns</td> 
   <td>array</td> 
   <td>数据网格（datagrid）的列（column）的配置对象，更多细节请参见列（column）属性。</td> 
   <td>undefined</td> 
  </tr> 
  <tr> 
   <td>frozenColumns</td> 
   <td>array</td> 
   <td>和列（column）属性一样，但是这些列将被冻结在左边。</td> 
   <td>undefined</td> 
  </tr> 
  <tr> 
   <td>fitColumns</td> 
   <td>boolean</td> 
   <td>设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>resizeHandle</td> 
   <td>string</td> 
   <td>调整列的位置，可用的值有：'left'、'right'、'both'。当设置为 'right' 时，用户可通过拖拽列头部的右边缘来调整列。<br> 该属性自版本 1.3.2 起可用。</td> 
   <td>right</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>数据网格（datagrid）面板的头部工具栏。可能的值：<br> 1、数组，每个工具选项与链接按钮（linkbutton）一样。<br> 2、选择器，只是工具栏。<br><br> 在 &lt;div&gt; 标签内定义工具栏： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid({ </li> 
     <li>toolbar: '#tb'</li> 
     <li>});</li> 
     <li>&lt;div id="tb"&gt;</li> 
     <li>&lt;a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"&gt;&lt;/a&gt;</li> 
     <li>&lt;a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"&gt;&lt;/a&gt;</li> 
     <li>&lt;/div&gt;</li> 
    </ol> 通过数组定义工具栏： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid({ </li> 
     <li>toolbar: [{ </li> 
     <li>iconCls: 'icon-edit',</li> 
     <li>handler: function(){alert('edit')}</li> 
     <li>},'-',{ </li> 
     <li>iconCls: 'icon-help',</li> 
     <li>handler: function(){alert('help')}</li> 
     <li>}]</li> 
     <li>});</li> 
    </ol></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>请求远程数据的方法（method）类型。</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>要加载的数据。该属性自版本 1.3.2 起可用。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid({ </li> 
     <li>data: [</li> 
     <li>{f1:'value11', f2:'value12'},</li> 
     <li>{f1:'value21', f2:'value22'}</li> 
     <li>]</li> 
     <li>});</li> 
    </ol></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>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>定义分页栏的位置。可用的值有：'top'、'bottom'、'both'。<br> 该属性自版本 1.3 起可用。</td> 
   <td>bottom</td> 
  </tr> 
  <tr> 
   <td>pageNumber</td> 
   <td>number</td> 
   <td>当设置了 pagination 属性时，初始化页码。</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>pageSize</td> 
   <td>number</td> 
   <td>当设置了 pagination 属性时，初始化页面尺寸。</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>pageList</td> 
   <td>array</td> 
   <td>当设置了 pagination 属性时，初始化页面尺寸的选择列表。</td> 
   <td>[10,20,30,40,50]</td> 
  </tr> 
  <tr> 
   <td>queryParams</td> 
   <td>object</td> 
   <td>当请求远程数据时，发送的额外参数。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid({ </li> 
     <li>queryParams: { </li> 
     <li>name: 'easyui',</li> 
     <li>subject: 'datagrid'</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></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>定义是否启用多列排序。该属性自版本 1.3.4 起可用。</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' 的样式。该函数需要两个参数：<br> rowIndex：行的索引，从 0 开始。<br> rowData：该行相应的记录。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid({ </li> 
     <li>rowStyler: function(index,row){ </li> 
     <li>if (row.listprice&gt;80){ </li> 
     <li>return 'background-color:#6293BB;color:#fff;'; // return inline style</li> 
     <li>// the function can return predefined css class and inline style</li> 
     <li>// return {class:'r1', style:{'color:#fff'}};</li> 
     <li>}</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
   <td>&nbsp;</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' ，表示原始数据。您可以把原始数据变成标准数据格式。该函数必须返回标准数据对象，含有 'total' 和 'rows' 属性。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// removing 'd' object from asp.net web service json output</li> 
     <li>$('#dg').datagrid({ </li> 
     <li>loadFilter: function(data){ </li> 
     <li>if (data.d){ </li> 
     <li>return data.d;</li> 
     <li>} else { </li> 
     <li>return data;</li> 
     <li>}</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></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>定义数据网格（datagrid）的视图。</td> 
   <td>default view</td> 
  </tr> 
 </tbody> 
</table>

### 列（Column）属性 ###

数据网格（DataGrid） 的列（Column）是一个数组对象，它的每个元素也是一个数组。元素数组的元素是一个配置对象，它定义了每个列的字段。

代码实例：

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> 
 <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>halign</td> 
   <td>string</td> 
   <td>指示如何对齐该列的头部，可能的值：'left'、'right'、'center'。如果没有分配值，则头部对齐方式将与通过 'align' 属性定义的数据对齐方式一致。该属性自版本 1.3.2 起可用。</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'。该属性自版本 1.3.2 起可用。</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>单元格的格式化函数，需要三个参数：<br> value：字段的值。<br> rowData：行的记录数据。<br> rowIndex：行的索引。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid({ </li> 
     <li>columns:[[</li> 
     <li>{field:'userId',title:'User', width:80,</li> 
     <li>formatter: function(value,row,index){ </li> 
     <li>if (row.user){ </li> 
     <li>return row.user.name;</li> 
     <li>} else { </li> 
     <li>return value;</li> 
     <li>}</li> 
     <li>}</li> 
     <li>}</li> 
     <li>]]</li> 
     <li>});</li> 
    </ol></td> 
   <td>undefined</td> 
  </tr> 
  <tr> 
   <td>styler</td> 
   <td>function</td> 
   <td>单元格的样式函数，返回样式字符串来自定义该单元格的样式，例如 'background:red' 。该函数需要三个参数：<br> value：字段的值。<br> rowData：行的记录数据。<br> rowIndex：行的索引。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid({ </li> 
     <li>columns:[[</li> 
     <li>{field:'listprice',title:'List Price', width:80, align:'right',</li> 
     <li>styler: function(value,row,index){ </li> 
     <li>if (value &lt; 20){ </li> 
     <li>return 'background-color:#ffee00;color:red;';</li> 
     <li>// the function can return predefined css class and inline style</li> 
     <li>// return {class:'c1',style:'color:red'}</li> 
     <li>}</li> 
     <li>}</li> 
     <li>}</li> 
     <li>]]</li> 
     <li>});</li> 
    </ol></td> 
   <td>undefined</td> 
  </tr> 
  <tr> 
   <td>sorter</td> 
   <td>function</td> 
   <td>用于本地排序的自定义字段的排序函数，需要两个参数：<br> a：第一个字段值。<br> b：第二个字段值。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid({ </li> 
     <li>remoteSort: false,</li> 
     <li>columns: [[</li> 
     <li>{field:'date',title:'Date',width:80,sortable:true,align:'center',</li> 
     <li>sorter:function(a,b){ </li> 
     <li>a = a.split('/');</li> 
     <li>b = b.split('/');</li> 
     <li>if (a[2] == b[2]){ </li> 
     <li>if (a[0] == b[0]){ </li> 
     <li>return (a[1]&gt;b[1]?1:-1);</li> 
     <li>} else { </li> 
     <li>return (a[0]&gt;b[0]?1:-1);</li> 
     <li>}</li> 
     <li>} else { </li> 
     <li>return (a[2]&gt;b[2]?1:-1);</li> 
     <li>}</li> 
     <li>}</li> 
     <li>}</li> 
     <li>]]</li> 
     <li>});</li> 
    </ol></td> 
   <td>undefined</td> 
  </tr> 
  <tr> 
   <td>editor</td> 
   <td>string,object</td> 
   <td>指示编辑类型。当是字符串（string）时则指编辑类型，当是对象（object）时则包含两个属性：<br> type：字符串，编辑类型，可能的类型：text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。<br> options：对象，编辑类型对应的编辑器选项。</td> 
   <td>undefined</td> 
  </tr> 
 </tbody> 
</table>

### 编辑器（Editor） ###

通过 $.fn.datagrid.defaults.editors 重写默认的 defaults。

每个编辑器有下列行为：

<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>

例如，文本编辑器（text editor）定义如下：

$.extend($.fn.datagrid.defaults.editors, {
    
    text: {
    
    init: function(container, options){
    
    var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
    
    return input;
    
    },
    
    destroy: function(target){
    
    $(target).remove();
    
    },
    
    getValue: function(target){
    
    return $(target).val();
    
    },
    
    setValue: function(target, value){
    
    $(target).val(value);
    
    },
    
    resize: function(target, width){
    
    $(target)._outerWidth(width);
    
    }
    
    }
    
    });

### 数据网格视图（DataGrid View） ###

通过 $.fn.datagrid.defaults.view 重写默认的 defaults。

视图（view）是一个对象，它告诉数据网格（datagrid）如何呈现行。该对象必须定义下列函数：

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</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>这是将会被 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>

### 事件 ###

该事件扩展自面板（panel），下面是为数据网格（datagrid）添加的事件。

<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>当用户点击一行时触发，参数包括：<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>当用户双击一个单元格时触发。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// when double click a cell, begin editing and make the editor get focus</li> 
     <li>$('#dg').datagrid({ </li> 
     <li>onDblClickCell: function(index,field,value){ </li> 
     <li>$(this).datagrid('beginEdit', index);</li> 
     <li>var ed = $(this).datagrid('getEditor', {index:index,field:field});</li> 
     <li>$(ed.target).focus();</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></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>当数据网格（datagrid）的头部被右键单击时触发。</td> 
  </tr> 
  <tr> 
   <td>onRowContextMenu</td> 
   <td>e, rowIndex, rowData</td> 
   <td>当右键点击行时触发。</td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回选项（options）对象。</td> 
  </tr> 
  <tr> 
   <td>getPager</td> 
   <td>none</td> 
   <td>返回分页（pager）对象。</td> 
  </tr> 
  <tr> 
   <td>getPanel</td> 
   <td>none</td> 
   <td>返回面板（panel）对象。</td> 
  </tr> 
  <tr> 
   <td>getColumnFields</td> 
   <td>frozen</td> 
   <td>返回列的字段，如果 frozen 设置为 true，则冻结列的字段被返回。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>var opts = $('#dg').datagrid('getColumnFields'); // get unfrozen columns</li> 
     <li>var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns</li> 
    </ol></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>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid('load',{ </li> 
     <li>code: '01',</li> 
     <li>name: 'name01'</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>reload</td> 
   <td>param</td> 
   <td>重新加载行，就像 load 方法一样，但是保持在当前页。</td> 
  </tr> 
  <tr> 
   <td>reloadFooter</td> 
   <td>footer</td> 
   <td>重新加载底部的行。代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// update footer row values and then refresh</li> 
     <li>var rows = $('#dg').datagrid('getFooterRows');</li> 
     <li>rows[0]['name'] = 'new name';</li> 
     <li>rows[0]['salary'] = 60000;</li> 
     <li>$('#dg').datagrid('reloadFooter');</li> 
     <li>&nbsp;</li> 
     <li>// update footer rows with new data</li> 
     <li>$('#dg').datagrid('reloadFooter',[</li> 
     <li>{name: 'name1', salary: 60000},</li> 
     <li>{name: 'name2', salary: 65000}</li> 
     <li>]);</li> 
    </ol></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' 参数未设置，所有的列的尺寸将是固定的。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid('fixColumnSize', 'name'); // fix the 'name' column size</li> 
     <li>$('#dg').datagrid('fixColumnSize'); // fix all columns size</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>fixRowHeight</td> 
   <td>index</td> 
   <td>固定指定行的高度。如果 'index' 参数未设置，所有的行的高度将是固定的。</td> 
  </tr> 
  <tr> 
   <td>freezeRow</td> 
   <td>index</td> 
   <td>冻结指定的行，以便数据网格（datagrid）向下滚动时这些冻结行总是被显示在顶部。该方法自版本 1.3.2 起可用。</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>clearChecked</td> 
   <td>none</td> 
   <td>清除所有勾选的行。该方法自版本 1.3.2 起可用。</td> 
  </tr> 
  <tr> 
   <td>scrollTo</td> 
   <td>index</td> 
   <td>滚动到指定行。该方法自版本 1.3.3 起可用。</td> 
  </tr> 
  <tr> 
   <td>highlightRow</td> 
   <td>index</td> 
   <td>高亮显示一行。该方法自版本 1.3.3 起可用。</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：编辑器的类型，比如：'text'、'combobox'、'datebox'，等等。</td> 
  </tr> 
  <tr> 
   <td>getEditor</td> 
   <td>options</td> 
   <td>获取指定的编辑器， options 参数包含两个属性：<br> index：行的索引。<br> field：字段名。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// get the datebox editor and change its value</li> 
     <li>var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});</li> 
     <li>$(ed.target).datebox('setValue', '5/4/2012');</li> 
    </ol></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：新的行数据。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid('updateRow',{ </li> 
     <li>index: 2,</li> 
     <li>row: { </li> 
     <li>name: 'new name',</li> 
     <li>note: 'new note message'</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>appendRow</td> 
   <td>row</td> 
   <td>追加一个新行。新的行将被添加在最后的位置： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dg').datagrid('appendRow',{ </li> 
     <li>name: 'new name',</li> 
     <li>age: 30,</li> 
     <li>note: 'some messages'</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>insertRow</td> 
   <td>param</td> 
   <td>插入一个新行， param 参数包括下列属性：<br> index：插入进去的行的索引，如果没有定义，就追加该新行。<br> row：行的数据。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// insert a new row at second row position</li> 
     <li>$('#dg').datagrid('insertRow',{ </li> 
     <li>index: 1, // index start with 0</li> 
     <li>row: { </li> 
     <li>name: 'new name',</li> 
     <li>age: 30,</li> 
     <li>note: 'some messages'</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></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>提交自从被加载以来或最后一次调用 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> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <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>
    </body>
    </html>

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190621203936211.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70