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

admin

http://www.cnblogs.com/zhaobl/ar ... 880975.html#2730355

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

后台代码：

    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, "")));

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的初始化代码:

      //初始化数据列表        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 //前端分页            });        }

定义了loader属性，然后看看DatagridFrontPageLoader2里是怎么写的

/*** @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) {                tempRows.push(rows);            } else {                break;            }        }        temp.rows = tempRows;        return temp;    }}

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

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

/*** @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) {                tempRows.push(rows);            } else {                break;            }        }        temp.rows = tempRows;        return temp;    }}

不总结总是会忘，在这记录一下。。。。。。

jueyue

这个确实需要学习下

GIN

1. 应用在动态列表的话，除了列表展示之外，表单的增删改还是以表单配置的字段为准？还是说这个sql执行就只是做一个列表展示（主要用作报表展示）

2.查询条件可配置化？

pengshirun

这个里面怎么写分组查询。