easyui datagrid动态绑定列名和数据

最新推荐文章于 2021-03-20 12:31:56 发布

最新推荐文章于 2021-03-20 12:31:56 发布 · 132 阅读

文章标签：

本文介绍了一种在easyUI的datagrid中实现动态显示不同权限下表格字段的方法。通过对easyUI类库进行修改，并结合自定义的JDataGrid类，实现了根据权限加载不同的列配置和数据。此方案适用于需要按权限定制展示内容的应用场景。

公司有这么一个需求，根据不同的权限显示一张表不同的字段。这个要命的需求给UI层带来不少麻烦，首先，我们采用easyUI的datagrid显示表格数据，而表格的列是静态写死的，如果要根据不同权限显示不同的字段导致必须通过结果集来show字段，但是easyUI的源代码中是ajax拿到数据后直接根据列去显示，使得我不得不修改easyUI类库。

先说一下思路：首先UI的datagrid中没有指定任何列，ajax提交成功后同时返回列的信息，先进行列的动态绑定，然后显示数据内容。

1.UI

Code:

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="DynamicDatagird.aspx.cs"
Inherits="WebUtils.DynamicDatagird"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>动态datagrid</title>
<scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>
<scriptsrc="Scripts/jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="Style/themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript">
$(function(){
$('#tbUsers').datagrid({
title:'MyTitle',
width:600,
height:350,
dataType:'json',
url:'GetAjaxData.ashx?action=GetUserList2',
columns:[[]],
pagination:true,
pageSize:5,//每页记录数
pageList:[5,10,15,20,30,50],//分页记录数数组
onLoadSuccess:function(data,param){
}
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<tableid="tbUsers">
</table>
</div>
</form>
</body>
</html>

2.easyUI类库的修改（位置在datagrid ajax提交位置L6220处）

Code:

function_43f(){
$.ajax({type:opts.method,url:opts.url,data:_43d,dataType:"json",success:function(data){
//动态添加列
if(!!data&&!!data.columns){
varopts=$.data(_43a,"datagrid").options;
var_369=$.data(_43a,"datagrid").panel;
varcols=$.data(_43a,"datagrid").options.columns[0];
varcolCount=cols.length;
if(colCount==0){
//cols.slice(0,cols.length);//清除数组内容
for(vari=0;i<data.columns.length;i++){
varcol={
field:data.columns[i].field,
title:data.columns[i].title,
width:data.columns[i].width,
align:data.columns[i].align
};
cols.push(col);
}
//UI添加列
if(colCount==0&&opts.columns){
vart=_370(opts.columns);
$("div.datagrid-view2div.datagrid-header-inner",_369).html(t);
}
}
}
setTimeout(function(){
_440();
},0);
if(!!data&&!!data.rows){
_3a2(_43a,data);
}
setTimeout(function(){
_42d(_43a);
},0);
},error:function(){
setTimeout(function(){
_440();
},0);
if(opts.onLoadError){
opts.onLoadError.apply(_43a,arguments);
}
}
});
};