基于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。

时间: 2024-08-27 21:56:01

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

基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划查询

上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划安排>,主要介绍整个施工计划列表与编辑界面. 下面看看施工计划查询(ⅠⅡⅢ ⅣⅤⅥ Ⅶ Ⅷ) Ⅰ.施工计划查询 施工计划查询界面,如下图所示. 点击[查询],按年月得出该年月施工计划,具体代码如下 1 protected void lbtSearch_Click(object sender, EventArgs e) 2 { 3 if (CheckInput()) 4 { 5 string connValue = Da

基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划安排

上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页Portal界面拖拽>,主要介绍首页随客户喜好安排区块位置,更好的实现用户体验. 这两天将项目中施工计划管理归纳总结一下(ⅠⅡⅢ ⅣⅤⅥ Ⅶ Ⅷ) Ⅰ.施工计划安排 施工计划安排界面,如下图所示. 编辑界面,如图所示 根据设定的提醒时间,通知施工人员及相关人员 有关于消息提醒的实现,在<Windows服务调用Quartz.net 实现消息调度>有详细介绍.

基于WebForm+EasyUI的工程管理系统形成之旅 -- 首页快捷方式

上篇<基于WebForm+EasyUI的工程管理系统形成之旅 -- 登录窗口>,主要是介绍系统登录界面页面设计与代码. 最近刚做完施工计划安排设计,之后将分享出来,这个系列更新不是很快,望大家多多体谅. 1.首页快捷方式 首页快捷方式,如下图所示. 点击[添加新的快捷方式],将所有页面以快捷方式呈现,如下图所示 双击添加快捷方式到首页.

基于WebForm+EasyUI的工程管理系统形成之旅 -- 登录窗口

上篇<基于WebForm+EasyUI的工程管理系统形成之旅 -- 登录设置>,主要是介绍系统浏览器及压缩图片工具在线下载安装,这些前期准备是非常重要的. 最近忙于将工程管理系统中各个模块,用业务流程方式串接起来,可能更新博客不是那么快,希望大家多多体谅. 1.登录界面 系统登录界面,如下界面所示. 基于WebForm+EasyUI的工程管理系统形成之旅 -- 登录窗口

基于WebForm+EasyUI的工程管理系统形成之旅 -- 构建Web界面

上篇<基于WebForm+EasyUI的工程管理系统形成之旅 -- 数据统计>,主要介绍系统数据统计所采用图形.报表工具. 本篇将如何构建Web界面以及新增.编辑.导出数据等功能. 1.在Web界面使用ParamQueryGrid控件 web界面,如图所示

基于WebForm+EasyUI的工程管理系统形成之旅 -- 总体介绍

最近比较关注Swift,来博客园看看. 突然发觉自己博客里面竟然没有介绍Web开发系统框架的文章,其实目前在单位工作,大部分时间是做Web开发的.很早就形成了自己的一套Web开发框架,但是由于一些个人原因,一直没有来得及好好整理和推广. 本文是介绍基于WebForm+EasyUI的最新版Web开发框架的一系列形成过程,期间包括一些EasyUI技术,JQuery技术等基础性东西,目的是打造更加稳定.通用.高效.简洁系统框架. 基于WebForm+EasyUI的工程管理系统形成之旅 -- 总体介绍

基于MVC4+EasyUI的Web开发框架形成之旅--MVC控制器的设计

自从上篇<基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍>总体性的概括,得到很多同行的关注和支持,不过上一篇主要是介绍一个总体的界面效果和思路,本系列的文章将逐步介绍其中的细节,本文主要介绍整个Web开发框架中的MVC控制器的设计.在设计之初,我就希望尽可能的减少代码,提高编程模型的统一性.因此希望能够以基类继承的方式,和我Winform开发框架一样,尽可能通过基类,而不是子类的重复代码来实现各种通用的操作. 1.登录控制的控制器基类设计 我们知道,一般我们创建一个MVC的控制

(转)基于MVC4+EasyUI的Web开发框架形成之旅--MVC控制器的设计

http://www.cnblogs.com/wuhuacong/p/3284628.html 自从上篇<基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍>总体性的概括,得到很多同行的关注和支持,不过上一篇主要是介绍一个总体的界面效果和思路,本系列的文章将逐步介绍其中的细节,本文主要介绍整个Web开发框架中的MVC控制器的设计.在设计之初,我就希望尽可能的减少代码,提高编程模型的统一性.因此希望能够以基类继承的方式,和我Winform开发框架一样,尽可能通过基类,而不是子类的重复

基于MVC4+EasyUI的Web开发框架形成之旅--权限控制

我在上一篇随笔<基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍>中大概介绍了基于MVC的Web开发框架的权限控制总体思路.其中的权限控制就是分为"用户登录身份验证"."控制器方法权限控制"."界面元素权限控制"三种控制方式,可以为Web开发框架本身提供了很好用户访问控制和权限控制,使得用户界面呈现菜单.Web界面的按钮和内容.Action的提交控制,均能在总体权限功能分配和控制之下. 本篇文章主要细化这三个方面