[转]jQuery EasyUI 中文文档（DataGrid and Tree：DataGrid）

UsageMarkup

<table id="tt">table>

jQuery

$('#tt').datagrid(options);

The DataGrid data format sample DataGrid的数据格式样本

{"total":28,"rows":[{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"}, {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}, {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"}, {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"}, {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"}, {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"}, {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"}, {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"}, {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"}, {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}]}

Dependencies

• resizable
• linkbutton
• pagination

OptionsDataGrid Properties

Override default with $.fn.datagrid.defaults.

Name	Type	Description	Default
title	string	The datagrid panel title text. DataGrid的面板标题文字。	null
iconCls	string	A CSS class that will provide a background image to be used as the header icon. 一个CSS类，将提供一个背景图片作为标题图标。	null
border	boolean	True to show datagrid panel border. 真到DataGrid中显示面板的边界。	true
width	number	The width of datagrid width. 宽度的DataGrid的宽度。	auto
height	number	The height of datagrid height. 该数据网格的高度的高度。	auto
columns	array	The datagrid columns config object, see column properties for more details. DataGrid的列的配置对象，看到更多的细节列属性。	null
frozenColumns	array	Same as the columns property, but the these columns will be frozen on left. Columns属性相同，但将这些列左冻结。	null
striped	boolean	True to stripe the rows. True 条纹行。	false
method	string	The method type to request remote data. 该方法要求远程数据类型。	post
nowrap	boolean	True to display data in one line. 真正显示在同一行数据。	true
idField	string	Indicate which field is an identity field. 说明哪些字段是一个标识字段。	null
url	string	A URL to request data from remote site. 一个URL请求从远程站点的数据。	null
loadMsg	string	When loading data from remote site, show a prompt message. 当从远程站点加载数据，显示一个提示信息。	Processing, please wait … 处理中，请稍候…
pagination	boolean	True to show a pagination toolbar on datagrid bottom. True展现出对DataGrid的底部分页工具栏。	false
rownumbers	boolean	True to show a row number column. True显示行号列。	false
singleSelect	boolean	True to allow selecting only one row. True只允许选择一行。	false
fit	boolean	True to set size to fit it’s parent container. True设置大小，以适应它的父容器。	false
pageNumber	number	When set pagination property, initialize the page number. 当设置分页属性，初始化的页码。	1
pageSize	number	When set pagination property, initialize the page size. 当设置分页属性，初始化的页面大小。	10
pageList	array	When set pagination property, initialize the page size selecting list. 当设置分页属性，初始化的页面大小选择清单。	[10,20,30,40,50]
queryParams	object	When request remote data, sending additional parameters also. 当请求，远程数据发送额外的参数也。	{}
sortName	string	Defines which column can be sorted. 可排序的列定义。	null
sortOrder	string	Defines the column sort order, can only be ‘asc’ or ‘desc’. 定义的列的排序顺序，只能是’递增’或’递减’。	asc

Column Properties

The DataGrid Columns is an array object, which element is an array too. DataGrid的列是一个数组对象，它是一个数组元素太多。
The element of element array is a config object, which defines every column field. 该元素的数组元素是一个配置对象，它定义了每列字段。
code example:

columns:[[ {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true}, {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true}, {title:'Item Details',colspan:4} ],[ {field:'listprice',title:'List Price',width:80,align:'right',sortable:true}, {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true}, {field:'attr1',title:'Attribute',width:100}, {field:'status',title:'Status',width:60} ]]

Name	Type	Description	Default
title	string	The column title text. 列标题文字。	undefined
field	string	The column field name. 列字段的名称。	undefined
width	number	The width of column. 该列的宽度。	undefined
rowspan	number	Indicate how many rows a cell should take up. 显示多少行的单元格应该承担。	undefined
colspan	number	Indicate how many columns a cell should take up. 说明有多少列的单元格应该承担。	undefined
align	string	Indicate how to align the column data. ‘left’,'right’,'center’ can be used. 说明如何对齐列数据。’left’,'right’,'center’都可以使用。	undefined
sortable	boolean	True to allow the column can be sorted. 真正让列可以进行排序。	undefined
checkbox	boolean	True to show a checkbox. True显示一个复选框。	undefined

Events

Name	Parameters	Description
onLoadSuccess	none	Fires when remote data is loaded successfully. 触发时，远程数据加载成功。
onLoadError	none	Fires when some error occur to load remote data. 触发发生时的一些错误加载远程数据。
onClickRow	rowIndex, rowData	Fires when user click a row, the parameters contains: 触发时，用户点击一个行，参数包括： rowIndex: the clicked row index, start with 0 rowIndex：单击的行的索引，从0开始 rowData: the record corresponding to the clicked row rowData：记录点击相应的行
onDblClickRow	rowIndex, rowData	Fires when user dblclick a row, the parameters contains: 当用户触发的DblClick一排，参数包括： rowIndex: the clicked row index, start with 0 rowIndex：单击的行的索引，从0开始 rowData: the record corresponding to the clicked row rowData：记录点击相应的行
onSortColumn	sort, order	Fires when user sort a column, the parameters contains: 当用户触发排序列，参数包括： sort: the sort column field name 排序：排序列字段名称 order: the sort column order 订购：排序列顺序
onSelect	rowIndex, rowData	Fires when user select a row, the parameters contains: 触发时，用户选择一行，参数包括： rowIndex: the selected row index, start with 0 rowIndex：选定行的索引，从0开始 rowData: the record corresponding to the selected row rowData：记录对应到选定的行
onUnselect	rowIndex, rowData	Fires when user unselect a row, the parameters contains: 触发时，用户取消选择一个行，参数包括： rowIndex: the unselected row index, start with 0 rowIndex：没有被选中的行的索引，从0开始 rowData: the record corresponding to the unselected row rowData：记录对应的未选中行

Methods

Name	Parameter	Description
options	none	Return the options object. 返回的选择对象。
resize	none	Do resize and do layout. 做调整，做布局。
reload	none	Reload the rows. 重新加载行。
fixColumnSize	none	fix columns size. 大小固定栏目。
loadData	param	Load local data, the old rows will be removed. 加载本地数据，旧的行会被删除。
getSelected	none	Return the first selected row record or null. 返回第一个选中行的记录或空。
getSelections	none	Return all selected rows, when no record selected, am empty array will return. 返回所有选定行，选择时没有记录，我将返回空数组。
clearSelections	none	Clear all selections. 清除所有选择。
selectRow	index	Select a row, the row index start with 0. 选择一个行，行索引以0开始。
selectRecord	idValue	Select a row by passing id value parameter. 选择一列由ID值传递参数。
unselectRow	index	Unselect a row. 取消选择1行。

原文页面：http://jquery-easyui.wikidot.com/document:datagrid