DataGrid 数据表格
扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。
依赖
- panel
- resizable
- linkbutton
- pagination
用法
1. <table id="tt"></table>
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:100,align:'right'}
7. ]]
8. });
数据表格（DataGrid）的特性
其特性扩展自 panel，下列是为 datagrid 增加的特性。
|
名称 |
类型 |
说明 |
默认值 |
|
columns |
array |
datagrid 的 column 的配置对象，更多详细请参见 column 的特性。 |
null |
|
frozenColumns |
array |
和列的特性一样，但是这些列将被冻结在左边。 |
null |
|
fitColumns |
boolean |
True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。 |
false |
|
striped |
boolean |
True 就把行条纹化。（即奇偶行使用不同背景色） |
false |
|
method |
string |
请求远程数据的 method 类型。 |
post |
|
nowrap |
boolean |
True 就会把数据显示在一行里。 |
true |
|
idField |
string |
标识字段。 |
null |
|
url |
string |
从远程站点请求数据的 URL。 |
null |
|
loadMsg |
string |
当从远程站点加载数据时，显示的提示信息。 |
Processing, please wait … |
|
pagination |
boolean |
True 就会在 datagrid 的底部显示分页栏。 |
false |
|
rownumbers |
boolean |
True 就会显示行号的列。 |
false |
|
singleSelect |
boolean |
True 就会只允许选中一行。 |
false |
|
pageNumber |
number |
当设置了 pagination 特性时，初始化页码。 |
1 |
|
pageSize |
number |
当设置了 pagination 特性时，初始化页码尺寸。 |
10 |
|
pageList |
array |
当设置了 pagination 特性时，初始化页面尺寸的选择列表。 |
[10,20,30,40,50] |
|
queryParams |
object |
当请求远程数据时，发送的额外参数。 |
{} |
|
sortName |
string |
定义可以排序的列。 |
null |
|
sortOrder |
string |
定义列的排序顺序，只能用 'asc' 或 'desc'。 |
asc |
|
remoteSort |
boolean |
定义是否从服务器给数据排序。 |
true |
|
showFooter |
boolean |
定义是否显示一行页脚。 |
false |
|
rowStyler |
function |
返回例如 'background:red' 的样式，该函数需要两个参数： |
|
|
loadFilter |
function |
返回过滤的数据去显示。这个函数需要一个参数 'data' ，表示原始数据。 你可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有 'total' 和 'rows' 特性。 |
|
|
editors |
object |
定义编辑行时的 editor 。 |
预定义的 editor |
|
view |
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',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. ]]
|
名称 |
类型 |
说明 |
默认值 |
||
|
title |
string |
列的标题文字。 |
undefined |
||
|
field |
string |
列的字段名。 |
undefined |
||
|
width |
number |
列的宽度。 |
undefined |
||
|
rowspan |
number |
指一个单元格占据多少行。 |
undefined |
||
|
colspan |
number |
指一个单元格占据多少列。 |
undefined |
||
|
align |
string |
指如何对齐此列的数据，可以用 'left'、'right'、'center'。 |
undefined |
||
|
sortable |
boolean |
True 就允许此列被排序。 |
undefined |
||
|
resizable |
boolean |
True 就允许此列被调整尺寸。 |
undefined |
||
|
hidden |
boolean |
True 就隐藏此列。 |
|