扩展jquery easyui datagrid 之动态绑定列和数据

原创 2012年03月09日 14:28:57

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格式自行处理。


至于后台,各们同学自己看着写吧,本菜鸟写的比较烂,就不再献丑了。

EasyUI_datagrid实现动态加载列并为其绑定数据

最近项目中遇到了这么一个需求,在datagrid中显示的数据需要动态的加载,也就是说表格中显示的列是不固 定的,显示的列的名称和列的数量都是不固定的,这些数据都是需要我们从后台拿来数据然后在动态的绑...
  • u013045437
  • u013045437
  • 2016年03月06日 23:24
  • 4645

Jquery easyui从零单排之datagrid数据绑定

自己写的前端,感觉太丑了,所以在网上找到了jquery easyui,样式也蛮漂亮的,闲暇之余就开始慢慢学习。 官网(jquery easyui官网)上也是大致描述了一些东西,但是绝对不够全面,网上其...
  • yangmingxing980
  • yangmingxing980
  • 2015年12月08日 16:34
  • 3104

扩展 easyui 控件系列:为datagrid 增加过滤行

此功能还为真正完成,起到抛砖引玉的效果,发动大家的力量把这个功能完善起来,效果图如下:   基本上就是扩展了 datagrid.view 中的onAfterRender 这个事件,...
  • u010486495
  • u010486495
  • 2016年07月09日 17:46
  • 1453

jquery easyui datagrid 数据绑定java版本

jquery easyui datagrid数据绑定
  • jiangdefu
  • jiangdefu
  • 2015年03月03日 10:29
  • 1652

EasyUI中iframe嵌入页面,包含datagrid数据动态绑定,页面内容的高度自适应问题

在我起初定义的tabs中,我想点击链接后跳出我的datagrid页面,涉及到datagrid的定义,数据的绑定,还有页面的适应高度问题....
  • zq_lyndon
  • zq_lyndon
  • 2015年10月30日 21:39
  • 2645

《EasyUI》——给DataGrid动态绑定表头和数据,实现表头与数据的真正解耦

这两天在做项目的时候,遇到了这样一个需求,我需要给DataGrid绑定表头,但是表头有多少列并不固定,表头的有多少列名也不固定,也就是说,表头可以有一列,也可以有许多列,这个datagrid具体有多少...
  • u013067402
  • u013067402
  • 2016年03月10日 00:37
  • 4208

让jquery easyui datagrid列支持绑定嵌套对象

嵌套对象是指返回的json数据,是对象的某个属性自带有属性。而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的。比如:datagrid的field属性只能为fie...
  • xiaozaq
  • xiaozaq
  • 2016年11月28日 16:27
  • 1046

easyui中datagrid动态绑定json加载列的解决方案

在做项目中有这样一个问题:在前台输入sql语句,传入后台后获得数据,将数据绑定在datagrid上显示。 这个问题困扰我很久,因为如果是传入sql语句的话,很难确定是哪个表,也不好确定到底有多少...
  • GGdido
  • GGdido
  • 2016年08月03日 20:26
  • 369

EasyUI 1.3.1 datagrid动态绑定列名和数据

很多网友对【easyui datagrid动态绑定列名和数据 】存在很多疑惑,实验后不能成功,这是因为不同版本的EasyUI源码不同。我就最新的版本的EasyUI 1.3.1做了示例,并简化了后台代码...
  • qing2005
  • qing2005
  • 2012年12月13日 08:51
  • 9536

Silverlight 4 DataGrid动态生成列及绑定数据

原文地址:http://hi.baidu.com/wutaof509/blog/item/d5306512500ad01db8127b47.html 补充:  AutoGenerateColumns...
  • fxhflower
  • fxhflower
  • 2012年05月15日 10:36
  • 2948
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:扩展jquery easyui datagrid 之动态绑定列和数据
举报原因:
原因补充:

(最多只允许输入30个字)