jQuery Easyui datagrid动态列绑定

浏览数：42 / 时间：2015年06月09日

前几天有人在使用jQuery EasyUI的datagrid时，遇到不会动态绑定列的情况，而网上给出的例子可能也是比较早的处理办法，竟然需要修改easyui源码，其实解决这问题的思路是很简单，我们只需修改要显示的列即可。那位朋友最后改为这种处理时，发现还是有问题，最终我发现她返回不是合法json，里边多个方括号，这里推荐大家使用本站的JSON在线校验格式化工具来验证返回json是否正确。

这里我们以上篇文章中类似的简单json来说明这个问题，比如后台要根据当前用户的权限返回不同的json：

分享一个最好用的UI前端框架！

.代码  

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请求结果。

默认显示列调用：

.代码  

$(function () {  

    $(‘#tt‘).datagrid({  

        url: ‘/home/getstudents‘,  

        columns: [[  

            { field: ‘id‘, title: ‘学生ID‘, width: 80 },  

            { field: ‘name‘, title: ‘姓名‘, width: 120 }  

        ]]  

    });  

});

显示结果如下：

那么当老师级别查看的时候，只需要修改下columns即可，后台json返回要加上address列。当然这里的权限我们作为演示是传过去的，真正项目中肯定是要在后台判断的。分享一个最好用的UI前端框架！

.代码  

$(‘#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 }  

    ]]  

});