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

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

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