easyui datagrid合并单元格

news2024/11/16 9:17:53

 表头合并

columns:[
    		[
    			{field:'bigarea',title:'大区',rowspan:2,width:$$.fillsize(0.1),align:'center'},
    			{field:'ProvinceName',title:'省份',rowspan:2,width:$$.fillsize(0.1),align:'center'},
    			{field:'dbct_name',title:'分拨中心',rowspan:2,width:$$.fillsize(0.1),align:'center'},
    			{field:'dbct_id',title:'分拨中心编码',rowspan:2,hidden:true},
    			{field:'stats_dt',title:'统计时间',rowspan:2,hidden:true},
    			{title:'揽件',colspan:5,align:'center'}
    		],[
                {field:'pick_ship_cnt',title:'票数',width:$$.fillsize(0.1),align:'center'},
                {field:'pick_cnt',title:'件数',width:$$.fillsize(0.1),align:'center'},
                {field:'pick_setl_wgt',title:'结算重量/吨',width:$$.fillsize(0.1),align:'center'},
                {field:'pick_actl_wgt',title:'实际重量/吨',width:$$.fillsize(0.1),align:'center'},
                {field:'pick_vol',title:'体积/方',width:$$.fillsize(0.1),align:'center'}
    		]
    	],

内容合并 

// 后端先获取查询数据List<Map>,再追加首行add(0,合计map);追加末行add(合计map);
// select '合计' as bigarea,sum(**) as pick_ship_cnt,......
    onLoadSuccess: function (data) {
	    //首尾行合计合并单元格,如果要操作的单元格比较多可以使用each循环,我这里只添加首位行合计,所以直接写的
        $("#shipmontTable").datagrid('mergeCells',{
            index: 0,       //行索引
			field:'bigarea',  //字段名
            rowspan: null,    //跨行
            colspan: 2        //跨列
        });
        var datarows = data.rows.length;
        $("#shipmontTable").datagrid('mergeCells',{
            index: datarows-1,
            field:'bigarea',
            rowspan: null,
            colspan: 2
        });
        //垂直合并单元格
        mergeCells(listId,"bigarea,ProvinceName,dbct_name");
    }
    

垂直合并公用方法

function mergeCells(tableID, colList) {
    var colArray = colList.split(",");
    var tTable = $("#" + tableID);
    var tableRows = tTable.datagrid("getRows");
    var tableRowCnts = tableRows.length;
    var rowspan;
    var preTxt = "";
    var curTxt = "";
    for (j = colArray.length - 1; j >= 0; j--) {
    	preTxt = "";
    	rowspan = 1;
        for (i = 0; i <= tableRowCnts; i++) {
            if (i == tableRowCnts) {
                curTxt = "";
            } else {
                curTxt = tableRows[i][colArray[j]];
            }
            if (preTxt == curTxt) {
            	rowspan += 1;
            } else {
                tTable.datagrid("mergeCells", {
                    index: i - rowspan,
                    field: colArray[j],//合并字段
                    rowspan: rowspan,
                    colspan: null
                });
                rowspan = 1;
            }
            preTxt = curTxt;
        }
    }
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/713057.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IDEA新建Spring Boot项目

新建项目之前已经将JDK环境变量啥的都安装好了&#xff0c;本文只有新建。 1.打开idea&#xff0c;选择Create New Project。如果已经打开其他项目&#xff0c;点击File->New->Project&#xff0c;也可以打开新建的界面。 2.点左侧的Spring Initializr然后如图&#xff…

三款新品齐发:大势智慧刷新实景三维技术新高度

近日&#xff0c;大势智慧“海量数据轻量化技术与新品夏季发布会”在大势智慧武汉总部盛大举行&#xff0c;并同步在其官方微信视频号进行线上直播&#xff0c;线上线下双会场气氛热烈、互动频繁、精彩纷呈。在此次发布会上&#xff0c;大势智慧集中推出轻量化技术、大势速影、…

第1章 Java概述

目录 1 Java相关1.1 跨平台性的体现1.2 Java的运行机制1.3 JDK、JRE、JVM及其关系1.4 Java注释 2 其他2.1 转义字符2.2 常用Dos命令2.3 相对路径与绝对路径 3 思维导图 上图为思维导图 1 Java相关 1.1 跨平台性的体现 Java的跨平台性&#xff1a;程序员编写的Java程序可以在不…

MyBatis介绍与下载

目录 MyBatis 介绍 MyBatis 主要特点 MyBatis 下载 IDEA创建maven项目&#xff08;默认&#xff09; MyBatis 介绍 MyBatis是一种开源的Java持久化框架&#xff0c;用于将SQL数据库访问和映射任务与Java对象之间的映射分离。它提供了一种简单的方式来对数据库进行操作&…

4Gwifi外夹式无线超声波流量计热量表无需破管物联网云平台对接

1.产品概述 DAQ-GP-UF4G无线外夹式超声波流量计是上海数采物联网科技有限公司推出的一款基于4G无线传输&#xff0c;交流/直流宽电压供电的通用型超声波流量计热量表&#xff0c;可采集管道中的瞬时流量、瞬时热流量等。外夹式超声波流量计与传统流量计相比&#xff0c;具有安装…

STM32实战项目—楼宇人员计数系统

本文项目比较简单&#xff0c;目的是介绍一下红外对管的使用&#xff0c;程序设计也比较简单。因此&#xff0c;博主并没有将程序工程上传资源&#xff0c;如果有需要的话可以私信。 文章目录 一、任务要求二、实现方法2.1 红外对管简介2.2 进出人员检测 三、程序设计3.1 红外对…

微服务架构介绍及SpringCloudAlibaba组件介绍

单体架构vs微服务架构 单机架构 什么是单体架构 一个归档包&#xff08;例如war格式&#xff09;包含了应用所有功能的应用程序&#xff0c;我们通常称之为单体应用。架构单体应用的方法论&#xff0c;我们称之为单体应用架构。&#xff08;就是一个war包打天下&#xff09;…

C++图形开发(3):静止的小球(fillcircle函数)

文章目录 1.如何实现&#xff1f;2.一个小球3.多个小球4.更多花样呢&#xff1f; 1.如何实现&#xff1f; 要实现在图形界面得到一个小球&#xff0c;我们的graphics库提供了一个函数: fillcircle();其格式为&#xff1a; fillcircle(x轴坐标,y轴坐标,半径);2.一个小球 现写…

MATLAB App Designer基础教程 Matlab GUI入门(四)

坐标轴控件 axis 函数绘图方法技巧 作用&#xff1a; 绘制函数图像显示图像&#xff08;jpg png tiff&#xff09; 学习内容 App designer中 plot 和命令行中的 plot函数的不同&#xff1b;如何在坐标轴空间中显示两个函数图像&#xff1b;智能缩进 &#xff08;Ctrl I&am…

【洛谷】P3386 【模板】二分图最大匹配(匈牙利算法)

ACcode: #include<bits/stdc.h> using namespace std; #define int long long const int N5e210, M1e510; int n,m,k,ans; struct E{//链式向前星存储图 int v,next; }e[M]; int head[N],cnt;int match[N];//村女生i的男朋友 bool vis[N];//存女生i是否被访问过 void …

three.js应用cannon物理引擎设置物体的相互作用

一、cannon物理引擎介绍 cannon官网地址&#xff1a;https://pmndrs.github.io/cannon-es/ Cannon.js 是一个基于 JavaScript 的开源 3D 物理引擎&#xff0c;可以用于开发和模拟真实世界中的物理效果。它提供了一系列的物理模拟功能&#xff0c;包括刚体碰撞、重力、碰撞检测…

OpenAI Gym入门与实操(2)

本文内容参考&#xff1a; Getting Started With OpenAI Gym | Paperspace Blog&#xff0c; 【强化学习】 OpenAI Gym入门&#xff1a;基础组件&#xff08;Getting Started With OpenAI Gym: The Basic Building Blocks&#xff09;_iioSnail的博客-CSDN博客 3. 环境&#…

现代异步存储访问API探索:libaio、io_uring和SPDK

【摘要】 最近的高性能存储设备暴露了现有软件栈的低效&#xff0c;因而催生了对I/O栈的改进。Linux内核的最新API是io_uring。作者提供了第一个针对io_uring的深度研究&#xff0c;并且和libaio、SPDK比较&#xff0c;探讨它的下性能和优缺点。根据作者的发现&#xff0c;&am…

ChatGPT:对教育来说,究竟是机遇,还是风险?

ChatGPT&#xff08;Chat Generative Pre-trained Transformer&#xff09;是由美国人工智能研究实验室OpenAI推出的一款人工智能聊天机器人。作为一个大型语言模型&#xff0c;ChatGPT有效结合了大数据、大算力、强算法&#xff0c;拥有较强的语言理解和文本生成能力&#xff…

javaMail之巨坑

使用java实现邮件发送功能&#xff0c;环境&#xff1a;Foxmail 6.5&#xff0c;阿里EasyExcel生成的excel文件&#xff0c;maven依赖如下&#xff1a; <dependency><groupId>com.sun.mail</groupId><artifactId>javax.mail</artifactId><ver…

MySQL - 第12节 - MySQL视图特性

目录 1.MySQL视图特性 2.基本使用 2.1.准备测试表 2.2.创建视图 2.3.修改视图影响基表 2.4.修改基表影响视图 2.5.删除视图 3.视图规则和限制 1.MySQL视图特性 视图的概念&#xff1a; • 视图是一个虚拟表&#xff0c;其内容由查询定义&#xff0c;同真实的表一样&…

一些零散的查询知识

一、all any some 表&#xff1a; all大于所有的值&#xff1a; any some:大于任意一个即可 例题&#xff1a; 大于50部门所有员工工资的人&#xff1a; 等价于&#xff1a; 二、exists关键字 1、exists查询 exists(子查询) 如果有满足条件的记录&#xff0c;那么exi…

nginx配置https加密

以下操作版本为Ubuntu2004&#xff0c;文件位置可能略有不同 https 功能 Web网站的登录页面通常都会使用https加密传输的&#xff0c;加密数据以保障数据的安全&#xff0c;HTTPS能够加密信息&#xff0c;以免敏感信息被第三方获取&#xff0c;所以很多银行网站或电子邮箱等等…

计算机网络 第二章(上)

2.1_1 物理层基本概念_哔哩哔哩_bilibili2.1_1 物理层基本概念是王道计算机考研 计算机网络的第12集视频&#xff0c;该合集共计76集&#xff0c;视频收藏或关注UP主&#xff0c;及时了解更多相关视频内容。https://www.bilibili.com/video/BV19E411D78Q/?p12&spm_id_from…

【近场社交项目】数据库系统期末设计——需求分析部分

【近场社交项目】数据库系统设计——需求分析&#x1f60e; 前言&#x1f64c;1.需求求分析(用户部分为例&#xff09;1.2用户数据字典1.2.1用户信息表&#xff08;数据结构&#xff09;&#xff1a;数据项间的关系和结构定义&#xff1a; 1.2.2.个人资料表&#xff08;数据结构…