easy ui datagrid动态生成列支撑嵌套对象

最新推荐文章于 2023-04-26 08:41:39 发布

原创最新推荐文章于 2023-04-26 08:41:39 发布 · 4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easy ui #datagrid #easy ui datagrid #datagrid动态生成列 #动态生成列

easy ui 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种通过后端返回动态列配置的方式，实现在EasyUI Datagrid中根据用户权限展示不同列的功能。具体包括动态生成普通列及嵌套对象列的方法，并详细解释了如何通过JavaScript的`eval`方法解决嵌套对象列中`formatter`属性的问题。

有时需要更具用户的权限来查看列，所以列不能再前段写死，通过后端来返回需要的列,可以把列信息配置到数据库里作为数据权限

一：动态生成普通列

很简单先用ajax请求一次把columns属性拼好，在调用一个datagrid方法请求数据即可

1：准备好datagrid的一般属性

var dtoptions = {
               pagination: true,
               fitColumns: false,
               fit: true,
               nowrap: true,
               url: 'http://localhost:1209/home/GetBooks2',
               sortName: 'bname',
               sortOrder: 'desc',
           }

2:通过一个ajax求情用户能看到的列,注意格式

需要一个回调函数，回调函数表示ajax求情成功后

function getColums(_dtoptions,_result) {
           $.ajax({
               type: "post",
               dataType: "json",
               url: "http://localhost:1209/datagrid/GetColunms",
               success: function (result) {
                   _dtoptions.columns = result;
                   _result(_dtoptions);
               }
           });
       }

3：在回调函数中去生成datagrid

 getColums(dtoptions, function (_dtoptions)
           {
               $('#dg').datagrid(_dtoptions);
           });

主要生成datagrid要在ajax成功请求后

不要用下边的方法写，因为getColums里边是异步的ajax方法他不会执行完后才出执行$('#dg').datagrid(_dtoptions);的

getColums(dtoptions);
$('#dg').datagrid(_dtoptions);

二：动态生成嵌套对象的列

效果

其他都相似,主要问题是easy ui datagrid的嵌套对象列是用formatter属性控制，但是formatter属性是需要一个方法

,如何把一个字符串变成一个方法呢？easui ui都能通过方法名调用一个方法我们为什么不行了？

其实只要使用js的eval方法就很好实现这个功能了

假如我们有个ww方法

var ww = function ()
        {
            alert("sdfsdf");
        }

我们可以使用下边的两个方法调用

eval("ww()");
eval("ww")();

好解决了这个问题，我们只需要把方法写好，在后台配置特定的方法名然后再把后台返回的方法名eval一下就可以了

，当然其他方法内容也是可以配置的就更加灵活了

代码:

$(function () {

           var dtoptions = {
               url: 'http://localhost:1209/home/GetBooks2',
               pagination: true,
               fitColumns: false,
               fit: true,
               nowrap: true,
               sortName: 'bname',
               sortOrder: 'desc'
           }

           getColums(dtoptions, function (_dtoptions)
           {
               $('#dg').datagrid(_dtoptions);
           });
       });

       function getColums(_dtoptions,_result) {
           $.ajax({
               type: "post",
               dataType: "json",
               url: "http://localhost:1209/datagrid/GetColunms",
               success: function (result) {

                   $.each(result[0], function (index, obj) {
                       $.each(result[0][index], function (key, value) {
                           if (key == "formatter") {
                               result[0][index].formatter = eval(result[0][index].formatter);
                           }
                       });
                   });

                   _dtoptions.columns = result;
                   _result(_dtoptions);
               }
           });
       }

       function changered(value, row, index)
       {
           return '<span style="color:red;">' + value + '</span>';
       }

       function rowformater(value, row, index) {
           return "<a href='#' onclick=\"alert('" + value + "')\">查看</a>";
       }

后台：

public class DataGridController : Controller
    {
        //
        // GET: /DataGrid/

        public string GetColunms()
        {
            List<List<Columns>> liresult = new  List<List<Columns>>();

            List<Columns> lincom = new List<Columns>();
            Columns com1 = new Columns();
            com1.field = "bid";
            com1.title = "bid";
            com1.width = 100;

            Columns com2 = new Columns();
            com2.field = "bname";
            com2.title = "bname";
            com2.sortable = true;
            com2.formatter = "changered";
            com2.width = 100;

            Columns com3 = new Columns();
            com3.field = "bpublisher";
            com3.title = "bpublisher";
            com3.editor = new { type = "", options="" }; //可以利用匿名对象便利的生成
            com3.width = 100;

            Columns com4 = new Columns();
            com4.field = "bpubtime";
            com4.title = "bpubtime";
            com4.formatter = "rowformater";
            com4.width = 100;

            Columns com5 = new Columns();
            com5.field = "bauthor";
            com5.title = "bauthor";
            com5.width = 100;

            lincom.Add(com1);
            lincom.Add(com2);
            lincom.Add(com3);
            lincom.Add(com4);
            lincom.Add(com5);


            liresult.Add(lincom);
            return liresult.ToJson();
        }

    }

    #region datagrid动态列生成参数
    public class Columns 
    {
        public string field { get; set; }
        public string title { get; set; }
        public int width { get; set; }
        public bool sortable { get; set; }
        public string formatter { get; set; }
        public object editor { get; set; } 
    }
     #endregion