jQuery EasyUI DataGrid API 中文文档

短命女 2022-03-21 02:39 353阅读 0赞

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

扩展自$.fn.panel.defaults，用 $.fn.datagrid.defaults重写了 defaults 。

**依赖**

*  panel
 *  resizable
 *  linkbutton
 *  pagination

**用法**

1.  **<table** id="tt"**></table>**

1.  $('\#tt').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.  \});

**数据表格（****DataGrid****）的特性**

其特性扩展自panel，下列是为 datagrid增加的特性。

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#8cacbb;"> 名称 </td> 
 <td> 类型 </td> 
 <td> 说明 </td> 
 <td> 默认值 </td> 
 </tr> 
 <tr> 
 <td> columns </td> 
 <td> array </td> 
 <td> datagrid&nbsp;的column的配置对象，更多详细请参见&nbsp;column&nbsp;的特性。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> frozenColumns </td> 
 <td> array </td> 
 <td> 和列的特性一样，但是这些列将被冻结在左边。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> fitColumns </td> 
 <td> boolean </td> 
 <td> True&nbsp;就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> striped </td> 
 <td> boolean </td> 
 <td style="width:486px;"> True 就把行条纹化。（即奇偶行使用不同背景色） </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> method </td> 
 <td> string </td> 
 <td> 请求远程数据的&nbsp;method&nbsp;类型。 </td> 
 <td> post </td> 
 </tr> 
 <tr> 
 <td> nowrap </td> 
 <td> boolean </td> 
 <td> True&nbsp;就会把数据显示在一行里。 </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> 从远程站点请求数据的&nbsp;URL。 </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&nbsp;就会在&nbsp;datagrid&nbsp;的底部显示分页栏。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> rownumbers </td> 
 <td> boolean </td> 
 <td> True&nbsp;就会显示行号的列。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> singleSelect </td> 
 <td> boolean </td> 
 <td> True&nbsp;就会只允许选中一行。 </td> 
 <td> false </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> 当请求远程数据时，发送的额外参数。 </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'&nbsp;或&nbsp;'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> 返回例如&nbsp;'background:red'的样式，该函数需要两个参数： rowIndex：行的索引，从&nbsp;0&nbsp;开始。 rowData：此行相应的记录。 </td> 
 <td> &nbsp;span&gt; </td> 
 </tr> 
 <tr> 
 <td> loadFilter </td> 
 <td> function </td> 
 <td> 返回过滤的数据去显示。这个函数需要一个参数'data'，表示原始数据。 你可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有'total'&nbsp;和&nbsp;'rows'特性。 </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> editors </td> 
 <td> object </td> 
 <td> 定义编辑行时的editor&nbsp;。 </td> 
 <td> 预定义的&nbsp;editor </td> 
 </tr> 
 <tr> 
 <td> view </td> 
 <td> object </td> 
 <td> 定义datagrid的&nbsp;view&nbsp;。 </td> 
 <td> 默认的&nbsp;view </td> 
 </tr> 
 </tbody> 
</table>

**列（****Column****）的特性**

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

代码示例：

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.\]\]

**编辑器（****Editor****）**

用 $.fn.datagrid.defaults.editors重写了 defaults。

每个编辑器有下列行为：

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

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重写了 defaults。

view 是一个对象，它告诉datagrid 如何呈现行。这个对象必须定义下列方法。

**事件**

其事件扩展自 panel，下列是为datagrid增加的事件。

**方法**

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#8cacbb;"> 名称 </td> 
 <td> 参数 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> options </td> 
 <td> none </td> 
 <td> 返回options&nbsp;对象。 </td> 
 </tr> 
 <tr> 
 <td> getPager </td> 
 <td> none </td> 
 <td> 返回pager&nbsp;对象。 </td> 
 </tr> 
 <tr> 
 <td> getPanel </td> 
 <td> none </td> 
 <td> 返回&nbsp;panel&nbsp;对象。 </td> 
 </tr> 
 <tr> 
 <td> getColumnFields </td> 
 <td> frozen </td> 
 <td> 返回列的字段，如果frozen&nbsp;设定为&nbsp;true，冻结列的字段被返回。 </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&nbsp;特性。 </td> 
 </tr> 
 <tr> 
 <td> reload </td> 
 <td> param </td> 
 <td> 重新加载行，就像&nbsp;load&nbsp;方法一样，但是保持在当前页。 </td> 
 </tr> 
 <tr> 
 <td> reloadFooter </td> 
 <td> footer </td> 
 <td> 重新加载脚部的行。 </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> 使列自动展开/折叠以适应&nbsp;datagrid&nbsp;的宽度。 </td> 
 </tr> 
 <tr> 
 <td> fixColumnSize </td> 
 <td> none </td> 
 <td> 固定列的尺寸。 </td> 
 </tr> 
 <tr> 
 <td> fixRowHeight </td> 
 <td> index </td> 
 <td> 固定指定行的高度。 </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&nbsp;参数可以是一个行记录或者一个&nbsp;id&nbsp;字段的值。 </td> 
 </tr> 
 <tr> 
 <td> getSelected </td> 
 <td> none </td> 
 <td> 返回第一个选中的行或者&nbsp;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> 选中一行，行索引从&nbsp;0&nbsp;开始。 </td> 
 </tr> 
 <tr> 
 <td> selectRecord </td> 
 <td> idValue </td> 
 <td> 通过&nbsp;id&nbsp;的值做参数选中一行。 </td> 
 </tr> 
 <tr> 
 <td> unselectRow </td> 
 <td> index </td> 
 <td> 取消选中一行。 </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> 获取指定的编辑器，&nbsp;options&nbsp;参数包含两个特性：&nbsp; index：行的索引。 field：字段名。 </td> 
 </tr> 
 <tr> 
 <td> refreshRow </td> 
 <td> index </td> 
 <td> 刷新一行。 </td> 
 </tr> 
 <tr> 
 <td> validateRow </td> 
 <td> index </td> 
 <td> 验证指定的行，有效时返回&nbsp;true。 </td> 
 </tr> 
 <tr> 
 <td> updateRow </td> 
 <td> param </td> 
 <td> 更新指定的行，&nbsp;param&nbsp;参数包含下列特性： index：更新行的索引。 row：行的新数据。 </td> 
 </tr> 
 <tr> 
 <td> appendRow </td> 
 <td> row </td> 
 <td> 追加一个新行。 </td> 
 </tr> 
 <tr> 
 <td> insertRow </td> 
 <td> param </td> 
 <td> 插入一个新行，&nbsp;param&nbsp;参数包括下列特性： index：插入进去的行的索引，如果没有定义，就追加此新行。 row：行的数据。 </td> 
 </tr> 
 <tr> 
 <td> deleteRow </td> 
 <td> index </td> 
 <td> 删除一行。 </td> 
 </tr> 
 <tr> 
 <td> getChanges </td> 
 <td> type </td> 
 <td> 获取最后一次提交以来更改的行，type&nbsp;参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。 当type&nbsp;参数没有分配时，返回所有改变的行。 </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参数包括下列特性： 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>