easyui datagrid 动态列和前端分页，以及加载Datatable

淩亂°似流年 2022-04-14 06:29 549阅读 0赞

项目中用到一个执行SQL，展示结果的功能。所以需要动态改变datagrid的列，最好是使用后台分页，但没找到方法，所以使用了前端分页。

![29100925-5b256d6904754ab1af7c12a9dec87e9d.png][]

后台代码：

![复制代码][copycode.gif]

StringBuilder columns = new StringBuilder("[[");
    
                    foreach (DataColumn col in ds.Tables[0].Columns)
                        columns.AppendFormat("{
        {field:'{0}',title:'{1}',align:'center',width:{2}}},", col.ColumnName, col.ColumnName, 100);
    
                    if (ds.Tables[0].Columns.Count > 0)
                        columns.Remove(columns.Length - 1, 1);//去除多余的','号  
    
                    columns.Append("]]");
    
                    Dictionary<string, object> objDic = new Dictionary<string, object>();
                    objDic.Add("columns", columns.ToString());
                    objDic.Add("rows", ds.Tables[0]);
    
                    this.Context.Response.Write(JsonConvert.SerializeObject(new JSON(true, objDic, "")));

![复制代码][copycode.gif]

JSON是我自定义的一个类，objDic对应其obj属性。拼接好datagrid需要的列字符串，在前端使用 eval方式转成对象

var opt = $(dg).datagrid('options');
                                opt.columns = eval(result.obj.columns); //把返回的数组字符串转为对象，并赋于datagrid的column属性   
                                opt.title = "SQL:" + sql;
                                $(dg).datagrid(opt);

只用ado.net查询出来的DataTable直接序列化是没有datagrid需要的total和rows两个属性的，所以在前端要定义一个对象付给datagrid

var data = new Object();
                                data.total = result.obj.rows.length;
                                data.rows = result.obj.rows;
                                $(dg).data().datagrid.cache = data;
                                $(dg).datagrid('reload');
                              //  $(dg).datagrid('loadData', result.obj.rows); //这样是不行的

cache不是datagrid默认的属性，这里是为了前端分页自定义的一个数据存储属性。调用reload方法时会触发Datagrid的loader（据说这个属性在datagrid1.3.1后才有的，我用的就是1.3.1版本）。  
下面看看datagrid的初始化代码:

![复制代码][copycode.gif]

//初始化数据列表
            function initDatagrid() {
                /// <summary>初始化数据列表</summary>
                $(dg).datagrid({
                    fit: true, border: false, striped: true, pagination: true, checkOnSelect: true, selectOnCheck: true, singleSelect: true, nowrap: true, rownumbers: true,
                    title: "数据表:(请选择)",
                    width: 500, height: 350, pageSize: 20, pageList: [10, 20, 30, 40, 50],
                    loader: DatagridFrontPageLoader2 //前端分页
                });
            }

![复制代码][copycode.gif]

定义了loader属性，然后看看DatagridFrontPageLoader2里是怎么写的  
![29102304-1a7bb853934f45ea91830b918e313ff1.png][]

![复制代码][copycode.gif]

/**
    * @author 赵保龙
    * 
    * @requires jQuery
    * 
    * Datagrid前端分页加载器,使用 loadData加载数据时使用
    */
    function DatagridFrontPageLoader2(param, success, error) {
        var that = $(this);
        var cache = that.data().datagrid.cache;
        if (cache) {
            success(bulidData(cache));
        }
        else {
            return false;
        }
    
        function bulidData(data) {
            var temp = $.extend({}, data);
            var tempRows = [];
            var start = (param.page - 1) * parseInt(param.rows);
            var end = start + parseInt(param.rows);
            var rows = data.rows;
            for (var i = start; i < end; i++) {
                if (rows[i]) {
                    tempRows.push(rows[i]);
                } else {
                    break;
                }
            }
            temp.rows = tempRows;
            return temp;
        }
    }

![复制代码][copycode.gif]

首先通过cache属性获取所有数据，然后再bulidData函数中选取当前页需要的数据，传给success加载。  
点击前端的上一页、下一页、刷新等按钮都会触发这个处理函数，而不去远程加载数据。

这个函数式通过修改孙宇的方法而来的，他那个可以到远程加载数据，不适用与我这的情况所以改了一下。

![复制代码][copycode.gif]

/**
    * @author 孙宇
    * 
    * @requires jQuery
    * 
    * Datagrid前端分页加载器,使用 url加载数据时使用
    */
    function DatagridFrontPageLoader(param, success, error) {
        var that = $(this);
        var opts = that.datagrid("options");
        if (!opts.url) {
            return false;
        }
    
        var cache = that.data().datagrid.cache;
        if (!cache) {
            $.ajax({
                type: opts.method,
                url: opts.url,
                data: param,
                dataType: "json",
                success: function (data) {
                    that.data().datagrid['cache'] = data;
                    success(bulidData(data));
                },
    
                error: function () {
                    error.apply(this, arguments);
                }
            });
    
        } else {
            success(bulidData(cache));
        }
    
        function bulidData(data) {
            var temp = $.extend({}, data);
            var tempRows = [];
            var start = (param.page - 1) * parseInt(param.rows);
            var end = start + parseInt(param.rows);
            var rows = data.rows;
            for (var i = start; i < end; i++) {
                if (rows[i]) {
                    tempRows.push(rows[i]);
                } else {
                    break;
                }
            }
            temp.rows = tempRows;
            return temp;
        }
    }

[29100925-5b256d6904754ab1af7c12a9dec87e9d.png]: /images/20220414/d6a5215e5da64744b67d0593dc268539.png
[copycode.gif]: /images/20220414/7dc519d3466c4d52aa6e2e1731be4a15.png
[29102304-1a7bb853934f45ea91830b918e313ff1.png]: /images/20220414/a95da467a03e461fb49d2a5bd4be4f25.png