《JqueryeasyuiDataGrid数据表格》由会员分享，可在线阅读，更多相关《JqueryeasyuiDataGrid数据表格（8页珍藏版）》请在金锄头文库上搜索。
1、Jquery easyui DataGrid 数据表格扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。依赖 panel resizable linkbutton pagination用法1. 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:
2、100,align:right 7. 8. ); 数据表格（DataGrid）的特性其特性扩展自 panel，下列是为 datagrid 增加的特性。名称 类型 说明 默认值columns array datagrid 的 column 的配置对象，更多详细请参见 column 的特性。 nullfrozenColumns array 和列的特性一样，但是这些列将被冻结在左边。 nullfitColumns boolean True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。 falsestriped boolean True 就把行条 纹 化。（即奇偶行使用不同背景色） f
3、alsemethod string 请求远程数据的 method 类型。 postnowrap boolean True 就会把数据显示在一行里。 trueidField string 标识字段。 nullurl string 从远程站点请求数据的 URL。 nullloadMsg string 当从远程站点加载数据时，显示的提示信息。 Processing, please wait pagination boolean True 就会在 datagrid 的底部显示分页栏。 falserownumbers boolean True 就会显示行号的列。 falsesingleSelect bo
4、olean True 就会只允许选中一行。 falsepageNumber number 当设置了 pagination 特性时，初始化页码。 1pageSize number 当设置了 pagination 特性时，初始化页码尺寸。 10pageList array 当设置了 pagination 特性时，初始化页面尺寸的选择列表。 10,20,30,40,50queryParams object 当请求远程数据时，发送的额外参数。 sortName string 定义可以排序的列。 nullsortOrder string 定义列的排序顺序，只能用 asc 或 desc。 ascremot
5、eSort boolean 定义是否从服务器给数据排序。 trueshowFooter boolean 定义是否显示一行页脚。 falserowStyler function返回例如 background:red 的样式，该函数需要两个参数：rowIndex： 行的索引，从 0 开始。rowData： 此行相应的记录。loadFilter function返回过滤的数据去显示。这个函数需要一个参数 data ，表示原始数据。你可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有 total 和 rows 特性。editors object 定义编辑行时的 editor 。 预定义的
6、 editorview object 定义 datagrid 的 view 。 默认的 view列（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,co
7、lspan: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. 名称 类型 说明 默认值title string 列的标题文字。 undefinedfield string 列的字段名。
8、 undefinedwidth number 列的宽度。 undefinedrowspan number 指一个单元格占据多少行。 undefinedcolspan number 指一个单元格占据多少列。 undefinedalign string 指如何对齐此列的数据，可以用 left、right、center。 undefinedsortable boolean True 就允许此列被排序。 undefinedresizable boolean True 就允许此列被调整尺寸。 undefinedhidden boolean True 就隐藏此列。 undefinedcheckbox bo
9、olean True 就显示 checkbox。 undefinedformatter function单元格的格式化函数，需要三个参数： value： 字段的值。rowData： 行的记录数据。rowIndex： 行的索引。undefinedstyler function单元格的样式函数，返回样式字符串来自定义此单元格的样式，例如 background:red 。此函数需要三个参数：value： 字段的值。rowData： 行的记录数据。rowIndex： 行的索引。undefinedsorter function自定义字段的排序函数，需要两个参数：a： 第一个字段值。b： 第二个字段值。u
10、ndefinededitor string,object指编辑类型。当是 string 时指编辑类型，当 object 时包含两个特性： type：string ，编辑类型，可能的类型是：text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。options：对象，编辑类型对应的编辑器选项。undefined编辑器（Editor）用 $.fn.datagrid.defaults.editors 重写了 defaults。每个编辑器有下列行为：名称 参数 说明init container, options 初
11、始化编辑器并且返回目标对象。destroy target 如果必要就销毁编辑器。getValue target 从编辑器的文本返回值。setValue target , value 给编辑器设置值。resize target , width 如果必要就调整编辑器的尺寸。例如，文本编辑器（text editor）像下面这样定义：1. $.extend($.fn.datagrid.defaults.editors, 2. text: 3. init: function(container, options) 4. var input = $().appendTo(container); 5. re
12、turn 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();
13、17. else 18. input.width(width); 19. 20. 21. 22. ); 数据表格视图（DataGrid View）用 $.fn.datagrid.defaults.view 重写了 defaults。view 是一个对象，它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。名称 参数 说明render target, container, frozen当数据加载时调用。target：DOM 对象，datagrid 对象。container：行的容器。frozen：表示是否呈现冻结容器。renderFooter target, container, f
14、rozen 这是呈现行脚选项的函数。renderRow target, fields, frozen, rowIndex, rowData 这是选项的函数，将会被 render 函数调用。refreshRow target, rowIndex 定义如何刷新指定的行。onBeforeRender target, rows 视图被呈现前触发。onAfterRender target 视图被呈现后触发。事件其事件扩展自 panel，下列是为 datagrid 增加的事件。名称 参数 说明onLoadSuccess data 当数据加载成功时触发。onLoadError none 加载远程数据发生某些
15、错误时触发。onBeforeLoad param 发送加载数据的请求前触发，如果返回 false 加载动作就会取消。onClickRow rowIndex, rowData当用户点击一行时触发，参数包括： rowIndex：被点击行的索引，从 0 开始。rowData：被点击行对应的记录。onDblClickRow rowIndex, rowData当用户双击一行时触发，参数包括： rowIndex：被双击行的索引，从 0 开始。rowData：被双击行对应的记录。onClickCell rowIndex, field, value 当用户单击一个单元格时触发。onDblClickCell r
16、owIndex, field, value 当用户双击一个单元格时触发。onSortColumn sort, order当用户对一列进行排序时触发，参数包括： sort：排序的列的字段名order：排序的列的顺序onResizeColumn field, width 当用户调整列的尺寸时触发。onSelect rowIndex, rowData当用户选中一行时触发，参数包括： rowIndex：选中行的索引，从 0 开始rowData：选中行对应的记录onUnselect rowIndex, rowData当用户取消选择一行时触发，参数包括： rowIndex：取消选中行的索引，从 0 开始rowData：取消选中行对应的记录onSelectAll
