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(" "); } } }); } }, 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"); }