jqueryeasyui研究（一）Datagrid初始化设置

jqueryeasyui研究（⼀）Datagrid初始化设置
Datagrid初始化设置
$('#post').datagrid({
url :'remote.php',
fitColumns : true,
striped : true,
rownumbers : true,
border : false,
pagination : true,
pageSize : 20,
pageList : [10, 20, 30, 40, 50],
pageNumber : 1,
sortName : 'create_time',
sortOrder : 'DESC',
columns : [[
{
field : 'id',
title : 'Id',
width : 100,
checkbox : true
},
{
field : 'name',title : 'Name',
width : 100
},
{
field : 'create_time',
title : '创建时间',
width : 100,
sortable : true
}
]],
toolbar:$('#post-tool')
});
说明：
url:后台数据调⽤地址。

如果是现有json格式数据，则⽤data代替url
data:如果没有url属性，则⽤该属性表⽰需要加载的数据。

数据格式为：
data: [
{f1:'value11', f2:'value12'},
{f1:'value21', f2:'value22'}
]
fitColumns: 使表格⾃适应页⾯宽度
striped:条纹显⽰
rownumbers:显⽰⾏号
pagenation:是否分页
pageSize:每页显⽰记录数
pageList:每页记录数选择范围设置
pageNumber:当前页号
sortName:排序列名称设置后将向后台传送名为sort的post/get参数
sortOrder:排序列升降序设置后将向后台传送名为order的post/get参数
columns:datagrid的每⼀列的具体设置。

详细设置见下⽂。

checkOnSelect:如set true,如有checkbox列，则点击该⾏后该⾏和其checkbox⼀起为选中状态。

selectOnCheck: 如set true,如有checkbox列，则点击该⾏的checkbox会连同该⾏⼀起被选中。

toolbar:⼯具栏。

可放⼊增删改查等easyui格式的linkbutton.可先在页⾯设置div,然后在toolbar指定该div的id, 也可以按以下⽅法设置：$('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('edit')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('help')}
}]
});//iconCls:easyui的图标class,handler:点击按钮时触发的function
其他属性：
loadMsg:加载数据时的提⽰信息
emptyMsg:加载数据为空时的信息
singleSelect:只能单选记录
ctrlSelect:可ctrl+点击多选记录
pagePosition:分页栏位置，可选 'top', 'bottom', 'both'
queryParams:向后台传递的附加参数
rowStyler: function根据数据加⼯该⾏样式。

可以是内联样式，也可以是class. 实例如下：
$('#dg').datagrid({
rowStyler: function(index,row){
if (row.listprice>80){
return 'background-color:#6293BB;color:#fff;';
}
}
});
//参数：index:该⾏索引
row:该⾏数据集
Columns属性：
columns : [[
{
field : 'id',
title : 'Id',
width : 100,
checkbox : true
},
{
field : 'name',title : 'Name',
width : 100
},
{
field : 'create_time',
title : '创建时间',
width : 100,
sortable : true
}
]]
field:从后台取得的数据记录中的相应字段名
title:显⽰在表头的每列标题
checkbox:是否以checkbox表现此列
sortable:是否可排序
order:升降序
resizable:是否可改变⼤⼩
fixed:当表格fitColumns属性为true,即⾃适应宽度时，设置fixed为true禁⽌⾃动改变此列宽度hidden:是否隐藏此列
formatter:⽤function加⼯数据内容格式见以下实例：
$('#dg').datagrid({
columns:[[
{field:'userId',title:'User', width:80,
formatter: function(value,row,index){
if (er){
return ;
} else {
return value;
}
}
}
]]
});
//参数： value:该单元格数据
row:该⾏数据
index:该⾏索引
styler:⽤function 根据数据返回单元格相应的style,可以是内联样式，也可以是class 见如下实例：$('#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;';
} } }
]] });。