jqGrid动态列

HTML代码：

<div id="divList">
    <div class="toolbar">
    </div>
    <table id="list">
    </table>
    <div id="pager">
    </div>
</div>

<table id="tableCols" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <input id="checkAll" type="checkbox" />
        </td>
        <td class="tdText">
            可选显示列：
        </td>
        <td>
            <input type="checkbox" text="发布周期" value="Period" />
        </td>
        <td class="tdText">
            发布周期
        </td>
        <td>
            <input type="checkbox" text="客户执行金额" value="SellAmount" />
        </td>
        <td class="tdText">
            客户执行金额
        </td>
        <td>
            <input type="checkbox" text="开户银行" value="OpenBank" />
        </td>
        <td class="tdText">
            开户银行
        </td>
        <td>
            <input type="checkbox" text="银行账号" value="Account" />
        </td>
        <td class="tdText">
            银行账号
        </td>
        <td>
            <input type="checkbox" text="联系人" value="Linkman" />
        </td>
        <td class="tdText">
            联系人
        </td>
        <td>
            <input type="checkbox" text="电话" value="Phone" />
        </td>
        <td class="tdText">
            电话
        </td>
    </tr>
</table>

JS代码：

// 查询方法
function search() {
    //固定列
    var cols = ['Id', 'SupplierId', '年份', '合同编号', '项目名称', '供应商名称', '媒体点位', '合同时间', '上画时间', '合同总金额', '票据情况', '票据说明', '到票时间'];
    var rows = [{ name: 'Id', hidden: true },
                { name: 'SupplierId', hidden: true },
                { name: 'Year', sortable: false, width: 35, fixed: true },
                   { name: 'ContractNo', sortable: false, width: 80, fixed: true, formatter: function (v, o, r) {
                       return "<a href='javascript:void(0)' onclick='view(\"" + r["Id"] + "\")' > " + v + "</a>";
                   }
                   },
                { name: 'ProjectName', sortable: false, width: 80, fixed: true },
                { name: 'SupplierName', sortable: false, width: 80, fixed: true, formatter: function (v, o, r) {
                    return "<a href='javascript:void(0)' onclick='viewSupplier(\"" + r["SupplierId"] + "\")' > " + v + "</a>";
                }
                },
                { name: 'Location', sortable: false, width: 80, fixed: true, formatter: function (v, o, r) {
                    return "<a href='javascript:void(0)' onclick='viewPurchase(\"" + r["Id"] + "\")' > " + v + "</a>";
                }
                },
                { name: 'DispContractStartTime', sortable: false, width: 80, fixed: true },
                { name: 'DispDrawingTime', sortable: false, width: 80, fixed: true },
                { name: 'SumAmount', sortable: false, width: 80, fixed: true, align: "right" },
                { name: 'InvoiceCondition', sortable: false, width: 60, fixed: true },
                { name: 'InvoiceDesc', sortable: false, width: 80, fixed: true },
                { name: 'ReceiveInvoiceTime', sortable: false, width: 80, fixed: true}];
 
    //可选列
    $("#tableCols").find("input[text]:checked").each(function () {
        var checkbox = $(this);
        var colName = checkbox.val();
        var text = checkbox.attr("text");
        cols.push(text);
        rows.push({ name: colName, sortable: false, width: 80, fixed: true });
    });
 
    //月份列
    cols.push("1月份");
    cols.push("2月份");
    cols.push("3月份");
    cols.push("4月份");
    cols.push("5月份");
    cols.push("6月份");
    cols.push("7月份");
    cols.push("8月份");
    cols.push("9月份");
    cols.push("10月份");
    cols.push("11月份");
    cols.push("12月份");
    rows.push({ name: "NotPay1", sortable: false, width: 80, fixed: true });
    rows.push({ name: "NotPay2", sortable: false, width: 80, fixed: true });
    rows.push({ name: "NotPay3", sortable: false, width: 80, fixed: true });
    rows.push({ name: "NotPay4", sortable: false, width: 80, fixed: true });
    rows.push({ name: "NotPay5", sortable: false, width: 80, fixed: true });
    rows.push({ name: "NotPay6", sortable: false, width: 80, fixed: true });
    rows.push({ name: "NotPay7", sortable: false, width: 80, fixed: true });
    rows.push({ name: "NotPay8", sortable: false, width: 80, fixed: true });
    rows.push({ name: "NotPay9", sortable: false, width: 80, fixed: true });
    rows.push({ name: "NotPay10", sortable: false, width: 80, fixed: true });
    rows.push({ name: "NotPay11", sortable: false, width: 80, fixed: true });
    rows.push({ name: "NotPay12", sortable: false, width: 80, fixed: true });
 
    //列表
    $("#divList").html('<div class="toolbar"></div><table id="list"></table><div id="pager"></div>');
    $("#list").jqGrid({
        url: '#{GetSummaryIndexData}',
        serializeGridData: function (postData) {
            return Simpo.ui.jqGrid.serializeGridData(postData);
        },
        datatype: "json",
        colNames: cols,
        colModel: rows,
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#pager',
        sortable: false,
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,
        rownumbers: true,
        multiselect: true,
        height: 'auto',
        width: $(".adminMainContent").width(),
        loadComplete: function (xhr) {
            Simpo.ui.jqGrid.loadComplete("list", xhr);
 
            //遍历数据行,将支付完毕的行颜色锁定
            $("#list").find("tr[id]").each(function () {
                var tr = $(this);
 
                var noDataCount = 0;
                tr.find("td").each(function () {
                    var td = $(this);
                    if ($.trim(td.html()) == "NoData") {
                        noDataCount++;
                    }
                });
                if (noDataCount == 12) {
                    tr.find("td").css("background-color", "#e6e6e6");
                }
            });
 
            //还原显示所有月份列
            var titleTable = $("#list").parent().parent().parent().find("table:first");
            for (var i = 40; i >= 10; i--) {
                var th = titleTable.find("tr").find("th:eq(" + i + ")");
                if (th) th.css("display", "");
            }
            for (var i = 40; i >= 10; i--) {
                $("#list").find("tr").each(function () {
                    var tr = $(this);
 
                    var td = tr.find("td:eq(" + i + ")");
                    if (td) td.css("display", "");
                });
            }
 
            //隐藏没有数据的月份列
            for (var i = 40; i >= 10; i--) {
                var del = true;
 
                //遍历数据行的i列
                $("#list").find("tr[id]").each(function () {
                    var tr = $(this);
 
                    var td = tr.find("td:eq(" + i + ")");
                    if (td) {
                        if ($.trim(td.html()) != "NoData") {
                            del = false;
                        }
                    }
                    else {
                        del = false;
                    }
                });
 
                if (del) {
                    //隐藏标题行的i列
                    titleTable.find("tr").each(function () {
                        var tr = $(this);
 
                        var th = tr.find("th:eq(" + i + ")");
                        th.css("display", "none");
                    });
 
                    //隐藏数据行的i列
                    $("#list").find("tr").each(function () {
                        var tr = $(this);
 
                        var td = tr.find("td:eq(" + i + ")");
                        td.css("display", "none");
                    });
                }
 
                //遍历数据行的i列,删除NoData标记
                $("#list").find("tr[id]").each(function () {
                    var tr = $(this);
 
                    var td = tr.find("td:eq(" + i + ")");
                    if (td) {
                        if ($.trim(td.html()) == "NoData") {
                            td.html("&nbsp;");
                        }
                    }
                });
            }
        },
        onHeaderClick: function () {
            Simpo.ui.jqGrid.autoWidth("list"); // 自动宽度
        },
        loadError: function (xhr, status, error) {
            Simpo.ui.jqGrid.loadError("list", xhr, status, error);
        }
    });
    jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false }).jqGrid('sortableRows');
 
    var postData = Simpo.ui.jqGrid.serializeGridData("list");
    jQuery("#list").jqGrid('setGridParam', { postData: postData, page: 1 }).trigger("reloadGrid");
}