基于WebForm+EasyUI的業務管理系統形成之旅 -- ParamQueryGrid行、列合并(Ⅸ)

上篇《基于WebForm+EasyUI的業務管理系統形成之旅 -- 施工計劃查詢(Ⅷ)》，主要介紹通過報表工具數據鉆取，獲取施工計劃詳細信息。

這篇我們看看ParamQueryGrid【行合并】與【列合并】

一、【列合并】效果

以編號配置界面為例，如下圖所示。

設置表格列合并，代碼如下。

 1 /**設置表格列合并 2 colModel：列 3 ，startNumber：開始列 4 ，numberOfColumns：從開始列開始，合并列數量 5 ，titleText：合并列標題 6 **/ 7 function SetPqGridGroupHeaders(colModel, startNumber, numberOfColumns, titleText) { 8     var col = [], spanCols = []; 9     if (startNumber + numberOfColumns > colModel.length) {10         return null;11     }12     for (var i = 0; i < colModel.length; i++) {13         if (i == startNumber) {14             var iCol = i;15             var nclos = { dataIndx: iCol, title: titleText, width: 100, align: 'center' };16             var cVisibleColumns = 0;17             for (var j = 0; j < numberOfColumns && (i + j < colModel.length); j++) {18                 if (!colModel[iCol + j].hidden) {19                     spanCols.push(colModel[iCol + j]);20                     cVisibleColumns++;21                 }22             }23             nclos.colModel = spanCols;24             col.push(nclos);25             if (cVisibleColumns > 0) {26                 i += cVisibleColumns;27             }28         }29         if (i < colModel.length) {30             col.push(colModel[i]);31         }32     }33     return col;34 }

SetPqGridGroupHeaders(colM, 1, 2, '基礎信息');

通過該方法，我們可以合并列序號從1開始，并且合并2列，列標題：'基礎信息'

二、【行合并】效果

以編號配置界面為例，如下圖所示。

設置表格行合并，代碼如下。

 1 /**設置表格行合并 2 obj_ID： 表格ID 3 **/ 4 function Merge(obj_ID) { 5     if ($(obj_ID)) { 6         var data = $(obj_ID).pqGrid("option", "dataModel.data"); 7         var trs = $(obj_ID).find("tr.pq-grid-row"); 8         for (var i = data.length; i > 0; i--) { 9             for (var j = trs.length; j > 0; j--) {10                 var before = $(trs[j - 1]).find("td.pq-grid-cell:nth-child(" + i + ")");11                 var end = $(trs[j]).find("td.pq-grid-cell:nth-child(" + i + ")");12                 if (end.text() == before.text()) {13                     var rowSpan = (end.attr("rowspan") || 1);14                     before.attr("rowspan", parseInt(rowSpan) + 1);15                     end.remove();16                 }17             }18         }19     }20 }

三、【行、列合并】效果

以編號配置界面為例，如下圖所示。

通過NPOI導出Excel時,未能實現行、列合并Excel格式,有知道如何實現的小伙伴，留言告知一下,THX。