jQuery EasyUI API 中文文档 - 数据表格（DataGrid）

cu_Cbear

jQuery EasyUI API 中文文档 - 数据表格（DataGrid）

扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。
依赖
•panel•resizable•linkbutton•pagination用法
1.  <table id="tt"></table>

1. 1.  $('#tt').datagrid({   
   
2. 2.      url:'datagrid_data.json',   
   
3. 3.      columns:[[   
   
4. 4.          {field:'code',title:'Code',width:100},   
   
5. 5.          {field:'name',title:'Name',width:100},   
   
6. 6.          {field:'price',title:'Price',width:100,align:'right'}   
   
7. 7.      ]]   
   
8. 8.  });  

复制代码

数据表格（DataGrid）的特性
其特性扩展自 panel，下列是为 datagrid 增加的特性。

1. 名称
   
2. 类型
   
3. 说明
   
4. 默认值
   
5. 
   
6. columns
   
7. array
   
8. datagrid 的 column 的配置对象，更多详细请参见 column 的特性。
   
9. null
   
10. 
    
11. frozenColumns
    
12. array
    
13. 和列的特性一样，但是这些列将被冻结在左边。
    
14. null
    
15. 
    
16. fitColumns
    
17. boolean
    
18. True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。
    
19. false
    
20. 
    
21. striped
    
22. boolean
    
23. True 就把行条纹化。（即奇偶行使用不同背景色）
    
24. false
    
25. 
    
26. method
    
27. string
    
28. 请求远程数据的 method 类型。
    
29. post
    
30. 
    
31. nowrap
    
32. boolean
    
33. True 就会把数据显示在一行里。
    
34. true
    
35. 
    
36. idField
    
37. string
    
38. 标识字段。
    
39. null
    
40. 
    
41. url
    
42. string
    
43. 从远程站点请求数据的 URL。
    
44. null
    
45. 
    
46. loadMsg
    
47. string
    
48. 当从远程站点加载数据时，显示的提示信息。
    
49. Processing, please wait …
    
50. 
    
51. pagination
    
52. boolean
    
53. True 就会在 datagrid 的底部显示分页栏。
    
54. false
    
55. 
    
56. rownumbers
    
57. boolean
    
58. True 就会显示行号的列。
    
59. false
    
60. 
    
61. singleSelect
    
62. boolean
    
63. True 就会只允许选中一行。
    
64. false
    
65. 
    
66. pageNumber
    
67. number
    
68. 当设置了 pagination 特性时，初始化页码。
    
69. 1
    
70. 
    
71. pageSize
    
72. number
    
73. 当设置了 pagination 特性时，初始化页码尺寸。
    
74. 10
    
75. 
    
76. pageList
    
77. array
    
78. 当设置了 pagination 特性时，初始化页面尺寸的选择列表。
    
79. [10,20,30,40,50]
    
80. 
    
81. queryParams
    
82. object
    
83. 当请求远程数据时，发送的额外参数。
    
84. {}
    
85. 
    
86. sortName
    
87. string
    
88. 定义可以排序的列。
    
89. null
    
90. 
    
91. sortOrder
    
92. string
    
93. 定义列的排序顺序，只能用 'asc' 或 'desc'。
    
94. asc
    
95. 
    
96. remoteSort
    
97. boolean
    
98. 定义是否从服务器给数据排序。
    
99. true
    
100. 
     
101. showFooter
     
102. boolean
     
103. 定义是否显示一行页脚。
     
104. false
     
105. 
     
106. rowStyler
     
107. function
     
108. 返回例如 'background:red' 的样式，该函数需要两个参数：
     
109. rowIndex： 行的索引，从 0 开始。
     
110. rowData： 此行相应的记录。
     
111.   

复制代码

loadFilter
function
返回过滤的数据去显示。这个函数需要一个参数 'data' ，表示原始数据。

你可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有 'total' 和 'rows' 特性。

1. editors
   
2. object
   
3. 定义编辑行时的 editor 。
   
4. 预定义的 editor
   
5. 
   
6. view
   
7. object
   
8. 定义 datagrid 的 view 。
   
9. 默认的 view

复制代码

列（Column）的特性
DataGrid 的 Column 是一个数组对象，它的每个元素也是一个数组。数组元素的元素是一个配置对象，它定义了每个列的字段。
代码示例：

1. 1.  columns:[[   
   
2. 2.      {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   
   
3. 3.      {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   
   
4. 4.      {title:'Item Details',colspan:4}   
   
5. 5.  ],[   
   
6. 6.      {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   
   
7. 7.      {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   
   
8. 8.      {field:'attr1',title:'Attribute',width:100},   
   
9. 9.      {field:'status',title:'Status',width:60}   
   
10. 10. ]]  
    
11. 
    
12. 名称
    
13. 类型
    
14. 说明
    
15. 默认值
    
16. 
    
17. title
    
18. string
    
19. 列的标题文字。
    
20. undefined
    
21. 
    
22. field
    
23. string
    
24. 列的字段名。
    
25. undefined
    
26. 
    
27. width
    
28. number
    
29. 列的宽度。
    
30. undefined
    
31. 
    
32. rowspan
    
33. number
    
34. 指一个单元格占据多少行。
    
35. undefined
    
36. 
    
37. colspan
    
38. number
    
39. 指一个单元格占据多少列。
    
40. undefined
    
41. 
    
42. align
    
43. string
    
44. 指如何对齐此列的数据，可以用 'left'、'right'、'center'。
    
45. undefined
    
46. 
    
47. sortable
    
48. boolean
    
49. True 就允许此列被排序。
    
50. undefined
    
51. 
    
52. resizable
    
53. boolean
    
54. True 就允许此列被调整尺寸。
    
55. undefined
    
56. 
    
57. hidden
    
58. boolean
    
59. True 就隐藏此列。
    
60. undefined
    
61. 
    
62. checkbox
    
63. boolean
    
64. True 就显示 checkbox。
    
65. undefined
    
66. 
    
67. formatter
    
68. function
    
69. 单元格的格式化函数，需要三个参数：
    
70. value： 字段的值。
    
71. rowData： 行的记录数据。
    
72. rowIndex： 行的索引。
    
73. undefined
    
74. 
    
75. styler
    
76. function
    
77. 单元格的样式函数，返回样式字符串来自定义此单元格的样式，例如 'background:red' 。此函数需要三个参数：
    
78. value： 字段的值。
    
79. rowData： 行的记录数据。
    
80. rowIndex： 行的索引。
    
81. undefined
    
82. 
    
83. sorter
    
84. function
    
85. 自定义字段的排序函数，需要两个参数：
    
86. a： 第一个字段值。
    
87. b： 第二个字段值。
    
88. undefined
    
89. 
    
90. editor
    
91. string,object
    
92. 指编辑类型。当是 string 时指编辑类型，当 object 时包含两个特性：
    
93. type：string，编辑类型，可能的类型是：
    
94. 
    
95. text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
    
96. options：对象，编辑类型对应的编辑器选项。
    
97. undefined
    

复制代码

编辑器（Editor）
用 $.fn.datagrid.defaults.editors 重写了 defaults。
每个编辑器有下列行为：

1. 名称
   
2. 参数
   
3. 说明
   
4. 
   
5. init
   
6. container, options
   
7. 初始化编辑器并且返回目标对象。
   
8. 
   
9. destroy
   
10. target
    
11. 如果必要就销毁编辑器。
    
12. 
    
13. getValue
    
14. target
    
15. 从编辑器的文本返回值。
    
16. 
    
17. setValue
    
18. target , value
    
19. 给编辑器设置值。
    
20. 
    
21. resize
    
22. target , width
    
23. 如果必要就调整编辑器的尺寸。

复制代码

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

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

复制代码

数据表格视图（DataGrid View）
用 $.fn.datagrid.defaults.view 重写了 defaults。
view 是一个对象，它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。

1. 名称
   
2. 参数
   
3. 说明
   
4. 
   
5. render
   
6. target, container, frozen
   
7. 当数据加载时调用。
   
8. target：DOM 对象，datagrid 对象。
   
9. container：行的容器。
   
10. frozen：表示是否呈现冻结容器。
    
11. 
    
12. renderFooter
    
13. target, container, frozen
    
14. 这是呈现行脚选项的函数。
    
15. 
    
16. renderRow
    
17. target, fields, frozen, rowIndex, rowData
    
18. 这是选项的函数，将会被 render 函数调用。
    
19. 
    
20. refreshRow
    
21. target, rowIndex
    
22. 定义如何刷新指定的行。
    
23. 
    
24. onBeforeRender
    
25. target, rows
    
26. 视图被呈现前触发。
    
27. 
    
28. onAfterRender
    
29. target
    
30. 视图被呈现后触发。

复制代码

事件

1. 其事件扩展自 panel，下列是为 datagrid 增加的事件。
   
2. 名称
   
3. 参数
   
4. 说明
   
5. 
   
6. onLoadSuccess
   
7. data
   
8. 当数据加载成功时触发。
   
9. 
   
10. onLoadError
    
11. none
    
12. 加载远程数据发生某些错误时触发。
    
13. 
    
14. onBeforeLoad
    
15. param
    
16. 发送加载数据的请求前触发，如果返回 false加载动作就会取消。
    
17. 
    
18. onClickRow
    
19. rowIndex, rowData
    
20. 当用户点击一行时触发，参数包括：
    
21. rowIndex：被点击行的索引，从 0 开始。
    
22. rowData：被点击行对应的记录。
    
23. 
    
24. onDblClickRow
    
25. rowIndex, rowData
    
26. 当用户双击一行时触发，参数包括：
    
27. rowIndex：被双击行的索引，从 0 开始。
    
28. rowData：被双击行对应的记录。
    
29. 
    
30. onClickCell
    
31. rowIndex, field, value
    
32. 当用户单击一个单元格时触发。
    
33. 
    
34. onDblClickCell
    
35. rowIndex, field, value
    
36. 当用户双击一个单元格时触发。
    
37. 
    
38. onSortColumn
    
39. sort, order
    
40. 当用户对一列进行排序时触发，参数包括：
    
41. sort：排序的列的字段名
    
42. order：排序的列的顺序
    
43. 
    
44. onResizeColumn
    
45. field, width
    
46. 当用户调整列的尺寸时触发。
    
47. 
    
48. onSelect
    
49. rowIndex, rowData
    
50. 当用户选中一行时触发，参数包括：
    
51. rowIndex：选中行的索引，从 0 开始
    
52. rowData：选中行对应的记录
    
53. 
    
54. onUnselect
    
55. rowIndex, rowData
    
56. 当用户取消选择一行时触发，参数包括：
    
57. rowIndex：取消选中行的索引，从 0 开始
    
58. rowData：取消选中行对应的记录
    
59. 
    
60. onSelectAll
    
61. rows
    
62. 当用户选中全部行时触发。
    
63. 
    
64. onUnselectAll
    
65. rows
    
66. 当用户取消选中全部行时触发。
    
67. 
    
68. onBeforeEdit
    
69. rowIndex, rowData
    
70. 当用户开始编辑一行时触发，参数包括：
    
71. rowIndex：编辑行的索引，从 0 开始
    
72. rowData：编辑行对应的记录
    
73. 
    
74. onAfterEdit
    
75. rowIndex, rowData, changes
    
76. 当用户完成编辑一行时触发，参数包括：
    
77. rowIndex：编辑行的索引，从 0 开始
    
78. rowData：编辑行对应的记录
    
79. changes：更改的字段/值对
    
80. 
    
81. onCancelEdit
    
82. rowIndex, rowData
    
83. 当用户取消编辑一行时触发，参数包括：
    
84. rowIndex：编辑行的索引，从 0 开始
    
85. rowData：编辑行对应的记录
    
86. 
    
87. onHeaderContextMenu
    
88. e, field
    
89. 当 datagrid 的头部被右键单击时触发。
    
90. 
    
91. onRowContextMenu
    
92. e, rowIndex, rowData
    
93. 当右键点击行时触发。

复制代码

1. 
   
2. 方法
   
3. 名称
   
4. 参数
   
5. 说明
   
6. 
   
7. options
   
8. none
   
9. 返回 options 对象。
   
10. 
    
11. getPager
    
12. none
    
13. 返回 pager 对象。
    
14. 
    
15. getPanel
    
16. none
    
17. 返回 panel 对象。
    
18. 
    
19. getColumnFields
    
20. frozen
    
21. 返回列的字段，如果 frozen 设定为 true，冻结列的字段被返回。
    
22. 
    
23. getColumnOption
    
24. field
    
25. 返回指定列的选项。
    
26. 
    
27. resize
    
28. param
    
29. 调整尺寸和布局。
    
30. 
    
31. load
    
32. param
    
33. 加载并显示第一页的行，如果指定 param 参数，它将替换 queryParams 特性。
    
34. 
    
35. reload
    
36. param
    
37. 重新加载行，就像 load 方法一样，但是保持在当前页。
    
38. 
    
39. reloadFooter
    
40. footer
    
41. 重新加载脚部的行。
    
42. 
    
43. loading
    
44. none
    
45. 显示正在加载状态。
    
46. 
    
47. loaded
    
48. none
    
49. 隐藏正在加载状态。
    
50. 
    
51. fitColumns
    
52. none
    
53. 使列自动展开/折叠以适应 datagrid 的宽度。
    
54. 
    
55. fixColumnSize
    
56. none
    
57. 固定列的尺寸。
    
58. 
    
59. fixRowHeight
    
60. index
    
61. 固定指定行的高度。
    
62. 
    
63. loadData
    
64. data
    
65. 加载本地数据，旧的行会被移除。
    
66. 
    
67. getData
    
68. none
    
69. 返回加载的数据。
    
70. 
    
71. getRows
    
72. none
    
73. 返回当前页的行。
    
74. 
    
75. getFooterRows
    
76. none
    
77. 返回脚部的行。
    
78. 
    
79. getRowIndex
    
80. row
    
81. 返回指定行的索引，row 参数可以是一个行记录或者一个 id 字段的值。
    
82. 
    
83. getSelected
    
84. none
    
85. 返回第一个选中的行或者 null。
    
86. 
    
87. getSelections
    
88. none
    
89. 返回所有选中的行，当没有选中的记录时，将返回空数组。
    
90. 
    
91. clearSelections
    
92. none
    
93. 清除所有的选择。
    
94. 
    
95. selectAll
    
96. none
    
97. 选中当前页所有的行。
    
98. 
    
99. unselectAll
    
100. none
     
101. 取消选中当前页所有的行。
     
102. 
     
103. selectRow
     
104. index
     
105. 选中一行，行索引从 0 开始。
     
106. 
     
107. selectRecord
     
108. idValue
     
109. 通过 id 的值做参数选中一行。
     
110. 
     
111. unselectRow
     
112. index
     
113. 取消选中一行。
     
114. 
     
115. beginEdit
     
116. index
     
117. 开始对一行进行编辑。
     
118. 
     
119. endEdit
     
120. index
     
121. 结束对一行进行编辑。
     
122. 
     
123. cancelEdit
     
124. index
     
125. 取消对一行进行编辑。
     
126. 
     
127. getEditors
     
128. index
     
129. 获取指定行的编辑器们。每个编辑器有下列特性：
     
130. actions：编辑器能做的动作们。
     
131. target：目标编辑器的 jQuery 对象。
     
132. field：字段名。
     
133. type：编辑器的类型。
     
134. 
     
135. getEditor
     
136. options
     
137. 获取指定的编辑器， options 参数包含两个特性：
     
138. index：行的索引。
     
139. field：字段名。
     
140. 
     
141. refreshRow
     
142. index
     
143. 刷新一行。
     
144. 
     
145. validateRow
     
146. index
     
147. 验证指定的行，有效时返回 true。
     
148. 
     
149. updateRow
     
150. param
     
151. 更新指定的行， param 参数包含下列特性：
     
152. index：更新行的索引。
     
153. row：行的新数据。
     
154. 
     
155. appendRow
     
156. row
     
157. 追加一个新行。
     
158. 
     
159. insertRow
     
160. param
     
161. 插入一个新行， param 参数包括下列特性：
     
162. index：插入进去的行的索引，如果没有定义，就追加此新行。
     
163. row：行的数据。
     
164. 
     
165. deleteRow
     
166. index
     
167. 删除一行。
     
168. 
     
169. getChanges
     
170. type

复制代码

获取最后一次提交以来更改的行，type 参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。

当 type 参数没有分配时，返回所有改变的行。

1. acceptChanges
   
2. none
   
3. 提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。
   
4. 
   
5. rejectChanges
   
6. none
   
7. 回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。
   
8. 
   
9. mergeCells
   
10. options
    
11. 把一些单元格合并为一个单元格，options 参数包括下列特性：
    
12. index：列的索引。
    
13. field：字段名。
    
14. rowspan：合并跨越的行数。
    
15. colspan：合并跨越的列数。
    
16. 
    
17. showColumn
    
18. field
    
19. 显示指定的列。
    
20. 
    
21. hideColumn
    
22. field
    
23. 隐藏指定的列。

复制代码