jQueryEasyUIAPI中文文档-DataGrid数据表格

1、jQuery EasyUI API中文文档-DataGrid数据表格jQuery EasyUI API中文文档-DataGrid数据表格使用说明，需要的朋友可以参考下。 扩展自$.fn.panel.defaults，用$.fn.datagrid.defaults重写了defaults。依赖pan elresizablelin kbutt onpagi nati on用法复制代码代码如下：复制代码代码如下：$(#tt).datagrid(url:datagrid_data.js on,colu mn s:field:code,title:Code,width:100,field: name,ti

2、tle:Name,width:100,field:price,title:Price,width:100,alig n: right);数据表格(DataGrid)的特性其特性扩展自panel，下列是为datagrid增加的特性。名称类型说明默认值colu mnsarraydatagrid的column的配置对象，更多详 细请参见column的特性。nullfroze nColu mnsarray和列的特性一样，但是这些列将被冻结在 左边。nullfitColu mnsboolea nTrue就会自动扩大或缩小列的尺寸以适 应表格的宽度并且防止水平滚动。falsestripedboolea n

3、True就把行条纹化。（即奇偶行使用不同 背景色）falsemethodstri ng请求远程数据的method类型。postjQuery EasyUI API中文文档-DataGrid数据表格no wrapboolea nTrue就会把数据显示在一行里。trueidFieldstri ng标识字段。nullurlstri ng从远程站点请求数据的URL。nullloadMsgstri ng当从远程站点加载数据时，显示的提示信 息。Process ing,please waitpagi nati onboolea nTrue就会在datagrid的底部显示分页 栏。falserownu mbe

4、rsboolea nTrue就会显示仃号的列。falsesi ngleSelectboolea nTrue就会只允许选中一行。falsepageNumbernu mber当设置了pagination特性时，初始化页 码。1pageSizenu mber当设置了pagination特性时，初始化页码 尺寸。10pageListarray当设置了pagination特性时，初始化页面 尺寸的选择列表。10,20,30,40,50queryParamsobject当请求远程数据时，发送的额外参数。sortNamestri ng定义可以排序的列。nullsortOrderstri ng定义列的排序顺序

5、，只能用asc或desc。ascremoteSortboolea n定义是否从服务器给数据排序。trueshowFooterboolea n定义是否显示一行页脚。falserowStylerfun cti on返回例如background:red的样式，该函 数需要两个参数：rowlndex: 行的索引，从0开始。rowData: 此行相应的记录。loadFilterfun cti on返回过滤的数据去显示。这个函数需要一 个参数data，表示原始数据。你可以把原始数据变成标准数据格式，此 函数必须返回标准数据对象，含有total和rows特性。editorsobject定义编辑行时的edit

6、or。预定义的editorviewobject定义datagrid的view。默认的view列（Column）的特性DataGrid的Column是一个数组对象，它的每个元素也是一个数组。数组元素的元素是 个配置对象，它定义了每个列的字段。代码示例：复制代码代码如下：colu mn s:field:itemid,title:ltem ID,rowspan:2,width:80,sortable:true, field:productid,title:ProductID,rowspan:2,width:80,sortable:true, title:Item Details,colspa n:4

7、,field:listprice,title:List Price,width:80,alig n:right,sortable:true, field:u nitcost,title:U nitCost,width:80,alig n:right,sortable:true, field:attr1,title:Attribute,width:100,field:status,title:Status,width:60名称类型说明默认值titlestri ng列的标题文字。un defi nedfieldstri ng列的字段名。un defi nedwidthnu mber列的宽度。un

8、defi nedrowspa nnu mber指一个单兀格占据多少行。un defi nedcolspa nnu mber指一个单兀格占据多少列。un defi nedalig nstri ng指如何对齐此列的数据，可以用left、right、center。un defi nedsortableboolea nTrue就允许此列被排序。un defi nedresizableboolea nTrue就允许此列被调整尺寸。un defi nedhidde nboolea nTrue就隐藏此列。un defi nedcheckboxboolea nTrue就显示checkbox。un defi n

9、edformatterfunction单元格的格式化函数，需要三个参数：value: 字段的值。rowData:行的记录数据。rowlndex: 行的索引。un defi nedstylerfunction单元格的样式函数，返回样式字符串来自定义此 单兀格的样式，例如backgrou nd:red。此函数需要三个参数：value: 字段的值。rowData:行的记录数据。rowlndex: 行的索引。un defi nedsorterfunction自定义字段的排序函数，需要两个参数：un defi neda:第一个字段值。b:第二个字段值。editorstri ng,object指编辑类型。

10、当是string时指编辑类型，当object时包含两个特性：type:string,编辑类型，可能的类型是：text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。options:对象，编辑类型对应的编辑器选项。un defi ned编辑器(Editor)用$.fn.datagrid.defaults.editors重写了defaults。每个编辑器有下列行为:名称参数说明initcontainer, options初始化编辑器并且返回目标对象。destroytarget如果必要就销毁编辑器。getValu

11、etarget从编辑器的文本返回值。setValuetarget , value给编辑器设置值。resizetarget , width如果必要就调整编辑器的尺寸。例 如 ， 文 本 编 辑 器 (t e x te d i t o r) 像 下 面 这 样 定 义 :复 制 代 码 代 码 如 下：$.exte nd($.fn.datagrid.defaults.editors, text: in it: fun cti on(container, opti on s)var in put = $().appe ndTo(c ontainer); return in put;,getValue

12、: fun cti on( target)return $(target).val();,setValue: function( target, value)$(target).val(value);,resize: fun cti on( target, width)var in put = $(target);if ($.boxModel = true)in put.width(width - (in put.outerWidth() - in put.width(); else in put.width(width); );数据表格视图(DataGrid View)用$defaults.

13、view重写了defaults。v i e w是 一 个 对 象 ， 它 告 诉d a t a g r i d如 何 呈 现 行 。 这 个 对 象 必 须 定 义 下 列 方 法 。名称参数说明ren dertarget, container, froze n当数据加载时调用。target:DOM对象，datagrid对象。container：行的容器。frozen:表示是否呈现冻结容器。ren derFootertarget, container, froze n这是呈现行脚选项的函数。ren derRowtarget, fields, froze n, rowln dex,rowData

14、这是选项的函数，将会被render函数调用。refreshRowtarget, row In dex定义如何刷新指定的行。on BeforeRe ndertarget, rows视图被呈现前触发。on AfterRe ndertarget视图被呈现后触发。事件其事件扩展自panel，下列是为datagrid增加的事件。名称参数说明onLoadSuccessdata当数据加载成功时触发。on LoadErrornone加载远程数据发生某些错误时触发。on BeforeLoadparam发送加载数据的请求前触发， 如果返回false加载动作就会取消。on ClickRowrow In dex, r

15、owData当用户点击一仃时触发，参数包括：rowlndex:被点击行的索引，从0开始。rowData:被点击行对应的记录。on DblClickRowrow In dex, rowData当用户双击一行时触发，参数包括：rowIndex:被双击行的索引，从0开始。rowData:被双击行对应的记录。on ClickCellrow In dex,field,value当用户单击一个单元格时触发。on DblClickCellrow In dex,field,当用户双击一个单元格时触发。valueon SortColu mnsort, order当用户对一列进行排序时触发，参数包括：sort:排

16、序的列的字段名order:排序的列的顺序on ResizeColu mnfield, width当用户调整列的尺寸时触发。on Selectrow In dex, rowData当用户选中一行时触发，参数包括：rowlndex:选中行的索引，从0开始rowData:选中行对应的记录onUn selectrow In dex, rowData当用户取消选择一行时触发， 参数包括：rowlndex:取消选中行的索引， 从0开始rowData:取消选中行对应的记录on SelectAllrows当用户选中全部行时触发。onUn selectAllrows当用户取消选中全部行时触发。on Before

17、Editrow In dex, rowData当用户开始编辑一仃时触发，参数包括：rowlndex:编辑行的索引，从0开始rowData:编辑行对应的记录on AfterEditrow In dex, rowData,changes当用户完成编辑一行时触发，参数包括：rowlndex:编辑行的索引，从0开始rowData:编辑行对应的记录changes：更改的字段/值对onCan celEditrow In dex, rowData当用户取消编辑一行时触发，参数包括：rowlndex:编辑行的索引，从0开始rowData:编辑行对应的记录onH eaderC on textMe nue, fi

18、eld当datagrid的头部被右键单击时触发。on RowCo ntextMe nue,row In dex,rowData当右键点击行时触发。方法名称参数说明optio nsnone返回options对象。getPagernone返回pager对象。getPa nelnone返回panel对象。getColu mnF ieldsfroze n返回列的字段，如果frozen设定为true,冻结列的字段被 返回。getColu mn Opti onfield返回指定列的选项。resizeparam调整尺寸和布局。loadparam加载并显示第一页的行，如果指疋param参数，它将替换query

19、Params特性。reloadparam重新加载行，就像load方法一样，但是保持在当前页。reloadFooterfooter重新加载脚部的行。loadi ngnone显示正在加载状态。loadednone隐臧正在加载状态。fitColu mnsnone使列自动展开/折叠以适应datagrid的宽度。fixColu mn Sizenone固定列的尺寸。fixRowHeightin dex固定指定行的高度。loadDatadata加载本地数据，旧的行会被移除。getDatanone返回加载的数据。getRowsnone返回当前页的行。getFooterRowsnone返回脚部的行。getRow

20、 In dexrow返回指疋仃的索引，row参数可以是一个仃记录或者一个id字段的值。getSelectednone返回第一个选中的行或者n ull。getSelectio nsnone返回所有选中的行，当没有选中的记录时，将返回空数组。clearSelecti onsnone清除所有的选择。selectAllnone选中当前页所有的行。un selectAllnone取消选中当前页所有的行。selectRowin dex选中一行，行索引从0开始。selectRecordidValue通过id的值做参数选中一行。un selectRowin dex取消选中一行。begi nEditin dex开始对一行进行编辑。en dEditin dex结束对一行进行编辑。can celEditin dex取消对一行进行编辑。getEditorsin dex获取指定行的编辑器们。每个编辑器有下列特性：actions：编辑器能做的动作们。target:目标编辑器的jQuery对象。f