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
Options
DataGrid 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
