(轉)擴展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("&nbsp;");
                                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格式自行處理。

 

 

至於后台，各們同學自己看着寫吧，本菜鳥寫的比較爛，就不再獻丑了。