基于WebForm+EasyUI的业务管理系统形成之旅 -- ParamQueryGrid行、列合并(Ⅸ)

上篇《基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划查询(Ⅷ)》，主要介绍通过报表工具数据钻取，获取施工计划详细信息。

这篇我们看看ParamQueryGrid【行合并】与【列合并】

一、【列合并】效果

---

以编号配置界面为例，如下图所示。

设置表格列合并，代码如下。

/**设置表格列合并
colModel：列
，startNumber：开始列
，numberOfColumns：从开始列开始，合并列数量
，titleText：合并列标题
**/
function SetPqGridGroupHeaders(colModel, startNumber, numberOfColumns, titleText) {
    var col = [], spanCols = [];
    if (startNumber + numberOfColumns > colModel.length) {
        return null;
    }
    for (var i = 0; i < colModel.length; i++) {
        if (i == startNumber) {
            var iCol = i;
            var nclos = { dataIndx: iCol, title: titleText,  100, align: 'center' };
            var cVisibleColumns = 0;
            for (var j = 0; j < numberOfColumns && (i + j < colModel.length); j++) {
                if (!colModel[iCol + j].hidden) {
                    spanCols.push(colModel[iCol + j]);
                    cVisibleColumns++;
                }
            }
            nclos.colModel = spanCols;
            col.push(nclos);
            if (cVisibleColumns > 0) {
                i += cVisibleColumns;
            }
        }
        if (i < colModel.length) {
            col.push(colModel[i]);
        }
    }
    return col;
}

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

通过该方法，我们可以合并列序号从1开始，并且合并2列，列标题：'基础信息'

二、【行合并】效果

---

以编号配置界面为例，如下图所示。

设置表格行合并，代码如下。

/**设置表格行合并
obj_ID： 表格ID
**/
function Merge(obj_ID) {
    if ($(obj_ID)) {
        var data = $(obj_ID).pqGrid("option", "dataModel.data");
        var trs = $(obj_ID).find("tr.pq-grid-row");
        for (var i = data.length; i > 0; i--) {
            for (var j = trs.length; j > 0; j--) {
                var before = $(trs[j - 1]).find("td.pq-grid-cell:nth-child(" + i + ")");
                var end = $(trs[j]).find("td.pq-grid-cell:nth-child(" + i + ")");
                if (end.text() == before.text()) {
                    var rowSpan = (end.attr("rowspan") || 1);
                    before.attr("rowspan", parseInt(rowSpan) + 1);
                    end.remove();
                }
            }
        }
    }
}

三、【行、列合并】效果

---

以编号配置界面为例，如下图所示。

通过NPOI导出Excel时,未能实现行、列合并Excel格式,有知道如何实现的小伙伴，留言告知一下,THX。