JqueryEasyUi Datagrid数据列表的书写

首先在页面中书写加载datagrid的面中书写加载datagrid的标签
<table id="roleManger"></table>


然后在javascript中书写如下示例代码

$('#roleManger').datagrid({
url : "<%=path%>/role/listRole.do",
title : "",
iconCls : "icon-save",
pagination  :true,//分页
pageSize : 10,//每页显示的数量
pageList : [10,20,30,40,50],//
fit : true,//自适应大小
loadMsg:"数据加载中.....",
fitColumns : false,//自适应列   没有横向滚动条
nowarp : false ,//自动折行
border : false,
rownumbers:true,
idFiled :"id",
sortName : "id",
sortOrder : "desc",
onBeforeLoad : function(){
$(this).datagrid('rejectChanges');
},
onDblClickRow : function(rowIndex){

},
columns:[[
    {
            field:'ck',
            checkbox:true
            },{
title : '编号',
field : 'id',
width : 100,
hidden : true
},{
title : '名称',
field : 'name',
width : 100,
editor : {
type : 'validatebox',
options : {
required : true
}
},
sortable : true
},{
title:'是否使用',
field:'deleteFlag',
width:100,
editor:{
type:"combobox",
options:{
valueField:'id',//值域
panelHeight : 'auto',//面板高度
textField:'name',//文本域
editable:false,//不可以编辑
data:[{
id:'F',
name:'否'
},{
id:'T',
name:'是'}
],//下拉框中的数据源
required:true}
},
formatter:function(value,rec){
if(value=="T"){
return '<span style="color:red">是</span>';
}else{
return '<span style="color:red">否</span>';
}
}
}]],
toolbar:[{
id:'btnadd',
text:'新增',
enable:insertOperate(),
iconCls:'icon-add',
handler:function(){
addRole();
}
},'-',{
id:'btncut',
text:'修改',
disabled:updateOperate(),
iconCls:'icon-save',
handler:function(){
updateRole();
}
},'-',{
id:'btndelete',
text:'删除',
disabled:deleteOperate(),
iconCls:'icon-remove',
handler:function(){
deleteRoles();
}
},'-',{
id:'btnsave',
text:'保存',
disabled:deleteOperate(),
iconCls:'icon-save',
handler:function(){
if (editRow!=undefined) {
datagrid.datagrid('endEdit', editRow);
}
}
},'-',{
id:'btredo',
text:'取消编辑',
disabled:deleteOperate(),
iconCls:'icon-redo',
handler:function(){
editRow=undefined;
datagrid.datagrid('rejectChanges');
datagrid.datagrid('unselectAll');
}
},'-',{
id:'btredo',
text:'分配权限',
iconCls:'icon-redo',
handler:function(){
distributionAuthority();
}
}
],
onAfterEdit : function(rowIndex, rowData, changes){
if(operateType=="add"){
//保存新增的角色
$.ajax({
type:"POST",
url:"<%=path%>/role/saveByAdd.do",
data:"name="+rowData.name+"&deleteFlag="+rowData.deleteFlag,
dataType:"json",
success:function(data){
$('#roleManger').datagrid('unselectAll');
$('#roleManger').datagrid('reload');
$.messager.show({
title : '提示',
timeout : 5000,
msg : '新增角色成功！'
});
}
});
}else if(operateType=="update"){
$.ajax({
type:"POST",
url:"<%=path%>/role/update.do",
data:"name="+rowData.name+"&deleteFlag="+rowData.deleteFlag+"&id="+rowData.id,
dataType:"json",
success:function(data){
$('#roleManger').datagrid('unselectAll');
[align=left][/align] $('#roleManger').datagrid('reload');
$.messager.show({
title : '提示',
timeout : 5000,
msg : '修改角色成功！'
});
}
});
}
[color=red] //保存完毕更改编辑行为undfined
editRow=undefined;
//保存完毕更改操作状态为undfined
operateType=undefined;
}
});