Jquery easyui DataGrid属性中文注解

DataGrid 属性

Name	Type	Description	Default
columns	array	Datagrid所有列的设置对象，详细请参考column属性	undefined
frozenColumns	array	跟columns 属性一样 但这些字段会被固定在表格左边.	undefined
fitColumns	boolean	设置True可自动扩展/收缩字段以适应表格的宽度，避免水平滚动	false
autoRowHeight	boolean	设置自动行高以适应内容. 关闭可提高数据装载性能	true
toolbar	array,selector	表格的顶部工具栏。可能含值： 1)一个数组 每个工具选项如同 linkbutton. 2) 一个选择器指向一个工具组，如下. 用<div>标签定义工具栏 $('#dg').datagrid({ toolbar: '#tb' }); <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a> </div> 使用数组定义工具栏 $('#dg').datagrid({ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('edit')} },'-',{ iconCls: 'icon-help', handler: function(){alert('help')} }] });	null
striped	boolean	条纹行	false
method	string	向服务器提交/请求数据的方法类型（post/get）.	post
nowrap	boolean	显示数据在一行，False数据自动换行，true可提高数据装载性能	true
idField	string	指明id字段	null
url	string	表格数据的来源，服务器请求数据的url地址	null
loadMsg	string	请求数据过程中显示给用户的提示信息.	Processing, please wait …
pagination	boolean	True显示分页工具栏在表格下方	false
rownumbers	boolean	True 在表格显示序号字段.	false
singleSelect	boolean	True允许选择一行数据	false
checkOnSelect	boolean	True则checkbox在点击当行有效.fasle则必须点击checkbox才有效 这个属性从version 1.3开始启用.	true
selectOnCheck	boolean	True则点击checkbox将同时选中该行，false则选择该行不会同时点击checkbox 这个属性从version 1.3开始启用.	true
pagePosition	string	设置分页栏的位置:，可设置 'top','bottom','both'. 这个属性从version 1.3开始启用.	bottom
pageNumber	number	设置分页栏属性时，初始化当前页码	1
pageSize	number	设置分页栏属性时，初始化每页显示的数据量	10
pageList	array	设置分页栏属性时，初始化可选的每页显示数据量列表	[10,20,30,40,50]
queryParams	object	请求远程数据时，也发送附加的参数 示例代码: $('#dg').datagrid({ queryParams: { name: 'easyui', subject: 'datagrid' } });	{}
sortName	string	定义哪个字段可以排序	null
sortOrder	string	定义字段排序的规则，可选值 'asc' or 'desc'.	asc
remoteSort	boolean	定义是否在服务器排序	true
showHeader	boolean	定义是否显示行头	true
showFooter	boolean	定义是否显示行脚	false
scrollbarSize	number	滚动条宽度或长度	18
rowStyler	function	返回行的样式类型如 'background:red'. 函数带两个参数: rowIndex: 0行序号，以0开始 rowData: 与此相应的行记录 Code example: $('#dg').datagrid({ rowStyler: function(index,row){ if (row.listprice>80){ return 'background-color:#6293BB;color:#fff;'; } } });
loader	function	定义如何从服务器装载数据，返回false可忽略此动作。函数有如下参数： param: 传送到服务器的参数对象. success(data): 回调函数，在成功取得数据时被调用 error(): 回调函数，在无法取得数据时被调用.	json loader
loadFilter	function	显示返回过滤后的数据。函数有一个参数data指向原始数据，你可以改变原始源数据为标准格式的数据。这个函数必须返回包含total和rows内容的标准数据对象 示例代码: // removing 'd' object from asp.net web service json output $('#dg').datagrid({ loadFilter: function(data){ if (data.d){ return data.d; } else { return data; } } });
editors	object	当要编辑一行数据时定义的文本编辑器	predefined editors
view	object	定义datagrid的外观.	default view

字段属性

Datagrid的Columns属性是一个数组对象，它的元素也是数组。元素数组的元素是一个配置对象，这个对象定义了各个字段的属性

示例代码:

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

Name	Type	Description	Default
title	string	字段标题名称.	undefined
field	string	字段名（匹配数据）.	undefined
width	number	列宽，没有定义则自动匹配内容	undefined
rowspan	number	跨行数.	undefined
colspan	number	跨列数.	undefined
align	string	列数据的排列方式. 'left','right','center' can be used.	undefined
sortable	boolean	True列支持分类排序.	undefined
resizable	boolean	True 列支持调整大小.	undefined
hidden	boolean	True to隐藏列.	undefined
checkbox	boolean	True显示一个固定宽度的checkbox，	undefined
formatter	function	单元格式化函数，有3个: value: 单元数值. rowData: 当行数据. rowIndex: 当行序号. 示例代码： $('#dg').datagrid({ columns:[[ {field:'userId',title:'User', width:80, formatter: function(value,row,index){ if (row.user){ return row.user.name; } else { return value; } } } ]] });	undefined
styler	function	单元样式函数，返回样式字符串定制单元样式，如 'background:red'. 函数带3个参数： value: 单元数值. rowData: 当行数据. rowIndex: 当行序号. 示例代码： $('#dg').datagrid({ columns:[[ {field:'listprice',title:'List Price', width:80, align:'right', styler: function(value,row,index){ if (value < 20){ return 'background-color:#ffee00;color:red;'; } } } ]] });	undefined
sorter	function	定制字段排序函数用来排序本地数据，带2个参数： a: 第一个字段值 b: 第二个字段值 Code example: $('#dg').datagrid({ remoteSort: false, columns: [[ {field:'date',title:'Date',width:80,sortable:true,align:'center', sorter:function(a,b){ a = a.split('/'); b = b.split('/'); if (a[2] == b[2]){ if (a[0] == b[0]){ return (a[1]>b[1]?1:-1); } else { return (a[0]>b[0]?1:-1); } } else { return (a[2]>b[2]?1:-1); } } } ]] });	undefined
editor	string,object	指明编辑类型，当字符串指明了编辑类型，当对象含2个参数 Indicate the edit type. When string indicates the edit type, when object contains two properties: type: 字符串，编辑类型，可选: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. options: 对象，编辑器选项对应编辑类型.	undefined

DataGrid 属性

Name	Type	Description	Default
columns	array	Datagrid所有列的设置对象，详细请参考column属性	undefined
frozenColumns	array	跟columns 属性一样 但这些字段会被固定在表格左边.	undefined
fitColumns	boolean	设置True可自动扩展/收缩字段以适应表格的宽度，避免水平滚动	false
autoRowHeight	boolean	设置自动行高以适应内容. 关闭可提高数据装载性能	true
toolbar	array,selector	表格的顶部工具栏。可能含值： 1)一个数组 每个工具选项如同 linkbutton. 2) 一个选择器指向一个工具组，如下. 用<div>标签定义工具栏 $('#dg').datagrid({ toolbar: '#tb' }); <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a> </div> 使用数组定义工具栏 $('#dg').datagrid({ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('edit')} },'-',{ iconCls: 'icon-help', handler: function(){alert('help')} }] });	null
striped	boolean	条纹行	false
method	string	向服务器提交/请求数据的方法类型（post/get）.	post
nowrap	boolean	显示数据在一行，False数据自动换行，true可提高数据装载性能	true
idField	string	指明id字段	null
url	string	表格数据的来源，服务器请求数据的url地址	null
loadMsg	string	请求数据过程中显示给用户的提示信息.	Processing, please wait …
pagination	boolean	True显示分页工具栏在表格下方	false
rownumbers	boolean	True 在表格显示序号字段.	false
singleSelect	boolean	True允许选择一行数据	false
checkOnSelect	boolean	True则checkbox在点击当行有效.fasle则必须点击checkbox才有效 这个属性从version 1.3开始启用.	true
selectOnCheck	boolean	True则点击checkbox将同时选中该行，false则选择该行不会同时点击checkbox 这个属性从version 1.3开始启用.	true
pagePosition	string	设置分页栏的位置:，可设置 'top','bottom','both'. 这个属性从version 1.3开始启用.	bottom
pageNumber	number	设置分页栏属性时，初始化当前页码	1
pageSize	number	设置分页栏属性时，初始化每页显示的数据量	10
pageList	array	设置分页栏属性时，初始化可选的每页显示数据量列表	[10,20,30,40,50]
queryParams	object	请求远程数据时，也发送附加的参数 示例代码: $('#dg').datagrid({ queryParams: { name: 'easyui', subject: 'datagrid' } });	{}
sortName	string	定义哪个字段可以排序	null
sortOrder	string	定义字段排序的规则，可选值 'asc' or 'desc'.	asc
remoteSort	boolean	定义是否在服务器排序	true
showHeader	boolean	定义是否显示行头	true
showFooter	boolean	定义是否显示行脚	false
scrollbarSize	number	滚动条宽度或长度	18
rowStyler	function	返回行的样式类型如 'background:red'. 函数带两个参数: rowIndex: 0行序号，以0开始 rowData: 与此相应的行记录 Code example: $('#dg').datagrid({ rowStyler: function(index,row){ if (row.listpric 16409 e>80){ return 'background-color:#6293BB;color:#fff;'; } } });
loader	function	定义如何从服务器装载数据，返回false可忽略此动作。函数有如下参数： param: 传送到服务器的参数对象. success(data): 回调函数，在成功取得数据时被调用 error(): 回调函数，在无法取得数据时被调用.	json loader
loadFilter	function	显示返回过滤后的数据。函数有一个参数data指向原始数据，你可以改变原始源数据为标准格式的数据。这个函数必须返回包含total和rows内容的标准数据对象 示例代码: // removing 'd' object from asp.net web service json output $('#dg').datagrid({ loadFilter: function(data){ if (data.d){ return data.d; } else { return data; } } });
editors	object	当要编辑一行数据时定义的文本编辑器	predefined editors
view	object	定义datagrid的外观.	default view

字段属性

Datagrid的Columns属性是一个数组对象，它的元素也是数组。元素数组的元素是一个配置对象，这个对象定义了各个字段的属性

示例代码:

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

Name	Type	Description	Default
title	string	字段标题名称.	undefined
field	string	字段名（匹配数据）.	undefined
width	number	列宽，没有定义则自动匹配内容	undefined
rowspan	number	跨行数.	undefined
colspan	number	跨列数.	undefined
align	string	列数据的排列方式. 'left','right','center' can be used.	undefined
sortable	boolean	True列支持分类排序.	undefined
resizable	boolean	True 列支持调整大小.	undefined
hidden	boolean	True to隐藏列.	undefined
checkbox	boolean	True显示一个固定宽度的checkbox，	undefined
formatter	function	单元格式化函数，有3个: value: 单元数值. rowData: 当行数据. rowIndex: 当行序号. 示例代码： $('#dg').datagrid({ columns:[[ {field:'userId',title:'User', width:80, formatter: function(value,row,index){ if (row.user){ return row.user.name; } else { return value; } } } ]] });	undefined
styler	function	单元样式函数，返回样式字符串定制单元样式，如 'background:red'. 函数带3个参数： value: 单元数值. rowData: 当行数据. rowIndex: 当行序号. 示例代码： $('#dg').datagrid({ columns:[[ {field:'listprice',title:'List Price', width:80, align:'right', styler: function(value,row,index){ if (value < 20){ return 'background-color:#ffee00;color:red;'; } } } ]] });	undefined
sorter	function	定制字段排序函数用来排序本地数据，带2个参数： a: 第一个字段值 b: 第二个字段值 Code example: $('#dg').datagrid({ remoteSort: false, columns: [[ {field:'date',title:'Date',width:80,sortable:true,align:'center', sorter:function(a,b){ a = a.split('/'); b = b.split('/'); if (a[2] == b[2]){ if (a[0] == b[0]){ return (a[1]>b[1]?1:-1); } else { return (a[0]>b[0]?1:-1); } } else { return (a[2]>b[2]?1:-1); } } } ]] });	undefined
editor	string,object	指明编辑类型，当字符串指明了编辑类型，当对象含2个参数 Indicate the edit type. When string indicates the edit type, when object contains two properties: type: 字符串，编辑类型，可选: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. options: 对象，编辑器选项对应编辑类型.	undefined