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

上篇《基于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 = ; i < colModel.length; i++) {
if (i == startNumber) {
var iCol = i;
var nclos = { dataIndx: iCol, title: titleText, width: , align: 'center' };
var cVisibleColumns = ;
for (var j = ; 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 > ) {
i += cVisibleColumns;
}
}
if (i < colModel.length) {
col.push(colModel[i]);
}
}
return col;
}

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

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

二、【行合并】效果


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

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

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

 /**设置表格行合并
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 > ; i--) {
for (var j = trs.length; j > ; j--) {
var before = $(trs[j - ]).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") || );
before.attr("rowspan", parseInt(rowSpan) + );
end.remove();
}
}
}
}
}

三、【行、列合并】效果


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

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

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

上一篇:GRIDVIEW多行多列合并单元格(合并列)


下一篇:Paint、Canvas、Matrix使用解说(一、Paint)