<返回上一级
jQuery Easyui datagrid动态列绑定
EasyUI

前几天有人在使用jQuery EasyUI的datagrid时,遇到不会动态绑定列的情况,而网上给出的例子可能也是比较早的处理办法,竟然需要修改easyui源码,其实解决这问题的思路是很简单,我们只需修改要显示的列即可。那位朋友最后改为这种处理时,发现还是有问题,最终我发现她返回不是合法json,里边多个方括号,这里我们以简单的json来说明这个问题,比如后台要根据当前用户的权限返回不同的json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public ActionResult getstudents(int level=0)
{
    List<Student> list = new List<Student>();
    list.Add(new Student() { id = 1, name = "小李" });
    list.Add(new Student() { id = 2, name = "小王" });
 
    //级别是老师,则可查看学生地址
    if (level == 1)
    {
        list = new List<Student>();
        list.Add(new Student() { id = 1, name = "小李", address = "北京" });
        list.Add(new Student() { id = 2, name = "小王", address = "上海" });
    }
 
    return Json(list, JsonRequestBehavior.AllowGet);
}
那么使用easyui datagrid时,页面上有:

<table id="tt" style="width:700px;height:250px"></table>
如果你在table上使用了class="easyui-datagrid"那么你会发现ajax请求了两次,具体查看办法可看看chrome下ajax请求结果。

默认显示列调用:

1
2
3
4
5
6
7
8
9
$(function () {
    $('#tt').datagrid({
        url: '/home/getstudents',
        columns: [[
   { field: 'id', title: '学生ID', width: 80 },
   { field: 'name', title: '姓名', width: 120 }
  ]]
    });
});
显示结果如下:

那么当老师级别查看的时候,只需要修改下columns即可,后台json返回要加上address列。当然这里的权限我们作为演示是传过去的,真正项目中肯定是要在后台判断的。

1
2
3
4
5
6
7
8
$('#tt').datagrid('options').url = '/home/getstudents?level=1';
$('#tt').datagrid({
    columns: [[
  { field: 'id', title: '学生ID', width: 80 },
  { field: 'name', title: '姓名', width: 120 },
                { field: 'address', title: '地址', width: 120 }
 ]]
});
结果如下:

到这我们本篇所提到的问题已得到解决,其实解决思路还是来自easyui的官网,但很多人都没有这个习惯,出了问题不会主动去看官网的说明。当然也有不少朋友都访问不了官网,我这几天发现google的jQuery cdn也不稳定,迫使本人开始使用新浪的jQuery cdn。