easyui datagrid 动态列和前端分页,以及加载Datatable 傷城~ 2022-09-18 01:47 247阅读 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/20220828/e906e924c0b3440b995bf36f830ea91a.png [copycode.gif]: /images/20220828/803f98feda2a4480b5b839fdf580dfb1.png [29102304-1a7bb853934f45ea91830b918e313ff1.png]: /images/20220828/3f1128ead7f8400eaba051c05a7a2350.png
还没有评论,来说两句吧...