(转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550
easyui datagrid 不支持动态加载列,上次使用的方法是自己用$.post()请求,在回调函数中提取出columns配置,添加到原options中去,然后调用$("#datagrid").datagrid(options)来重新生成表格,然后使用$("#datagrid").datagrid("loaddata",data)来载入返回的json格式数据。
但是这样做一来麻烦,二来有问题,比如我这儿自带的分页就用不了了。
网上搜得一篇文章,easyui datagrid动态绑定列名和数据原作者直接修改源码。
我的做法是使用扩展方法,只要datagrid的表dom结构不变,理论上此方法通用。
附上代码:
(function(){
$.extend($.fn.datagrid.methods,{
createHeader: function (jq, opts) {
function buildHeader(headerContainer, columnsDefine, frozenHeader) {
//如果列配置为空,直接返回
if (!columnsDefine) {
return;
}
$(headerContainer).show(); //标题显示
$(headerContainer).empty(); //清空原有内容
//生成table的dom对象,添加到header所在的层
var t = $("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tbody></tbody></table>").appendTo(headerContainer);
//columns设置格式[[...],[...],[...]],第一个子数组生成表格的一行
for (var i = 0; i < columnsDefine.length; i++) {
var tr = $("<tr></tr>").appendTo($("tbody", t));
var cols = columnsDefine[i];
for (var j = 0; j < cols.length; j++) {
var col = cols[j]; //列设置col
var attr = "";
if (col.rowspan) {//跨行设置
attr += "rowspan=\"" + col.rowspan + "\" ";
}
if (col.colspan) {//跨列设置
attr += "colspan=\"" + col.colspan + "\" ";
}
var td = $("<td " + attr + "></td>").appendTo(tr); //生成td,设置属性
//是否在第一列添加checkbox
if (col.checkbox) {
td.attr("field", col.field);
$("<div class=\"datagrid-header-check\"></div>").html("<input type=\"checkbox\"/>").appendTo(td);
} else {
//如果设置了field字段
if (col.field) {
td.attr("field", col.field);
td.append("<div class=\"datagrid-cell\"><span></span><span class=\"datagrid-sort-icon\"></span></div>");
$("span", td).html(col.title);
$("span.datagrid-sort-icon", td).html(" ");
var cell = td.find("div.datagrid-cell");
if (col.resizable == false) {
cell.attr("resizable", "false");
}
col.boxWidth = $.boxModel ? (col.width - (cell.outerWidth() - cell.width())) : col.width;
cell.width(col.boxWidth);
cell.css("text-align", (col.align || "left"));
} else {
$("<div class=\"datagrid-cell-group\"></div>").html(col.title).appendTo(td);
}
}
//隐藏表格
if (col.hidden) {
td.hide();
}
}
}
//是否显示行号
if (frozenHeader && opts.rownumbers) {
var td = $("<td rowspan=\"" + opts.frozenColumns.length + "\"><div class=\"datagrid-header-rownumber\"></div></td>");
if ($("tr", t).length == 0) {
td.wrap("<tr></tr>").parent().appendTo($("tbody", t));
} else {
td.prependTo($("tr:first", t));
}
}
};
return jq.each(function () {
var dc = $.data(this, "datagrid").dc;
var headerContainer1 = dc.view1.children("div.datagrid-header");
var headerContainer2 = dc.view2.children("div.datagrid-header");
var header1 = headerContainer1.children("div.datagrid-header-inner"); //view1的header,行号标题,一般为空
var header2 = headerContainer2.children("div.datagrid-header-inner"); //表格的header,显示title
buildHeader(header1, opts.frozenColumns, true); //生成冻结表头
buildHeader(header2, opts.columns, false); //生成表头
header1.css("display", opts.showHeader ? "block" : "none");
header2.css("display", opts.showHeader ? "block" : "none");
});
}
});
})(Jquery);
其中function buildHeader(headerContainer, columnsDefine, frozenHeader)函数是从1.2.5版源码中提取出来的(坑爹下划线,符号,用firebug跟着跑了4,5个小时,才大体明白后台生成表格的方法)
使用方法:
一,设置loadFilter属性,指定的方法会在ajax请求成功返回后,datagrid绑定数据之前调用,要求返回符合datagrid要求的json格式数据
function showGrid() {
var options = {
width: gridWidth,
height: gridHeight,
url: "RainStat.aspx",
queryParams:getParams(),
rownumbers : true,
loadMsg:"正在加载数据,请稍候...",
pagination: true,
page:1,
pageSize: 20,
pageList: [10, 20, 30, 40, 50, 100, 500, 1000, 5000],
loadFilter:dataFilter
};
rainGrid = $("#rainGrid");
rainGrid.datagrid(options);
}
二,在loadFilter指定的函数内进行处理,取出服务器端返回的columns设置,加入到当前的options设置中,调用上面扩展的createHeader方法。
function dataFilter(data) {
if (data.data[0].rows.length == 0) {
$.messager.alert("结果", "没有数据!", "info", null);
}
var options = rainGrid.datagrid("options");//取出当前datagrid的配置
options.columns = eval(data.columns);//添加服务器端返回的columns配置信息
rainGrid.datagrid("createHeader", options);//调用扩展方法,创建表格列
rainGrid.datagrid("resize");//重新布局datagrid,因为上面扩展方法调用后,会有一些布局上的小问题
return data.data[0];
}
注意:这是我自己定义的json格式,提取配置信息的方法,请按照自己的json格式自行处理。
至于后台,各们同学自己看着写吧,本菜鸟写的比较烂,就不再献丑了。
(转)扩展jquery easyui datagrid 之动态绑定列和数据的更多相关文章
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- 扩展jQuery easyui datagrid增加动态改变列编辑的类型
$.extend($.fn.datagrid.methods, { addEditor : function(jq, param) { if (param instanceof Array) { $. ...
- jQuery Easyui Datagrid相同连续列合并扩展
/** * author ____′↘夏悸 * create date 2012-11-5 **/$.extend($.fn.datagrid.methods, { autoMergeCells : ...
- 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列
转自 http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...
- 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
随机推荐
- [转]CentOS6.3安装JDK和环境配置
转自:http://www.linuxidc.com/Linux/2012-09/70780.htm 1.CentOS默认情况下,会安装OpenOffice之类的软件,这些软件需要Java的支持,默认 ...
- 为什么静态成员、静态方法中不能用this和super关键字
1. 在静态方法中是不能使用this预定义对象引用的,即使其后边所操作的也是静态成员也不行. 因为this代表的是调用这个函数的对象的引用,而静态方法是属于类的,不属于对象,静态方法成功加载 ...
- Codeforces Round #365 (Div. 2) B 前缀和
B. Mishka and trip time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- bootstrap-3
段落: 1.全局文本字号为14px(font-size); 2.行高为1.42857143(line-height),大约是20px(一串数字是由less编译器计算出来的,当然sass也有这样的功能) ...
- Roman to Integer
Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...
- 转:db2 iptables相关用法(1)
如果你的IPTABLES基础知识还不了解,建议先去看看. 开始配置 我们来配置一个filter表的防火墙. (1)查看本机关于IPTABLES的设置情况 [root@tp ~]# iptables - ...
- 5-1 源码包与RPM包的区别
1.区别 <1>安装之前的区别:概念上的不同(是否开源等,更多请点我) <2>安装之后的区别:安装位置不同 2.RPM包安装位置 <1>是安装在默认位置中,但不是确 ...
- JS的prototype的共享机制分析
function Super(){ } Super.prototype.aaa=[1,2,3]; Super.prototype.bbb=1; function Sub(){ Super.call(t ...
- 【转】详解使用tcpdump、wireshark对Android应用程序进行抓包并分析
原文网址:http://blog.csdn.net/gebitan505/article/details/19044857 本文主要介绍如何使用tcpdump和wireshark对Android应用程 ...
- 利用redis写webshell
redis和mongodb我之所见 最近自己在做一些个人的小创作.小项目,其中用到了mongodb和redis,最初可能对这二者没有深入的认识.都是所谓的“非关系型数据库”,有什么区别么? 实际上,在 ...