项目中用到一个执行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[i]) {
tempRows.push(rows[i]);
} 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[i]) {
tempRows.push(rows[i]);
} else {
break;
}
}
temp.rows = tempRows;
return temp;
}
}
分享到:
相关推荐
JS EasyUI DataGrid动态加载数据
easyUI页面datagrid动态列和form字段动态添加;项目开发时用到的,废了不少事,大概总了一下,现在发出来共享给想我一样的要用到的菜鸟们,谢谢
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
解决EasyUIdataGrid列比较多,无数据,列展现不全
EasyUI DataGrid过滤用法实例
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
NULL 博文链接:https://skyfar666.iteye.com/blog/1840145
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
easyui datagrid 多条件筛选 可复选 过滤 例如过滤200-300 500-600 类似淘宝筛选 但允许复选
DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题
easyUI datagrid 自动调整行号大小
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
NULL 博文链接:https://wusuobuai.iteye.com/blog/1860496
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...
采用easyui datagrid实现后台Springmvc分页查询的maven工程,下载吧, 你不得后悔,jquery-easyui-1.5.2
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
NULL 博文链接:https://168zsj.iteye.com/blog/1659609
在easy ui datagrid 列表基础上实现行过滤[行模糊查询],注:数据库远程查询
使用SSM框架+EasyUI DataGrid数据表格实现了基本的增删改查,以及对数据分页,排序功能的实现。是一个对于后台管理的很好的例子,因为一般企业后台管理都是使用EasyUI等框架快速搭建,而且DataGrid是EasyUI最重要的...