layui合并单元格
在别人的基础上解决了多列合并和同一个页面多个表格的问题
1 //合并单元格
2 function merge(id,res, columsName, columsIndex) {
3
4 var data = res.data;
5 var mergeIndex = 0;//定位需要添加合并属性的行数
6 var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
7
8 for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
9 var trArr = $(`#${id}`).next().find(".layui-table-body").children(".layui-table").find("tr");//所有行
10 for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
11 var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
12 var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
13 //要该列前面所有合并列相同才能合并
14 for (var j = 0; j <= k; j++) {
15 if (data[i][columsName[j]] != data[i - 1][columsName[j]]) {
16 mergeIndex = i;
17 mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
18 break;
19 }
20 if (j==k) {
21 if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较,相同就需要合并
22 mark += 1;
23 tdPreArr.each(function () {//相同列的第一列增加rowspan属性
24 $(this).attr("rowspan", mark);
25 });
26 tdCurArr.each(function () {//当前行隐藏
27 $(this).css("display", "none");
28 });
29 }
30 else {
31 mergeIndex = i;
32 mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
33 }
34 }
35 }
36 }
37 mergeIndex = 0;
38 mark = 1;
39 }
40 }
效果
用例:
done: function (res) {
merge("xmztable", res,["updateUser"],[0])
}
layui合并单元格的更多相关文章
- layui:数据表格如何合并单元格
layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...
- layui table+复杂表头+合并单元格
效果图: 问题:行hover效果感觉错乱 所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...
- C# 获取Excel中的合并单元格
C# 获取Excel中的合并单元格 我们在制作表格时,有时经常需要合并及取消合并一些单元格.在取消合并单元格时需要逐个查找及取消,比较麻烦.这里分享一个简单的方法来识别Excel中的合并单元格,识别这 ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
- NPOI操作EXCEL(五)——含合并单元格复杂表头的EXCEL解析
我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...
- poi获取合并单元格内的第一行第一列的值
当读取如图所示的excel时,显示为第1行 第1列 的内容是:合并单元格 其它在合并单元格区域内的单元格不显示 示例代码如下: import java.io.FileInputStream; impo ...
- Repeater多列分别合并单元格
GridView.Repeater合并单元格可以参考http://www.cnblogs.com/zhmore/archive/2009/04/22/1440979.html,但是原文例子是合并一列的 ...
- Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行
Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行 模版格式,图格式是最简单的格式,但实际效果不是这种,实际效果图如图2 图2 ,注意看红色部分,一对一是正常的,但是有一对多的订单 ...
- easyui datagrid 合并单元格
整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...
- GRIDVIEW多行多列合并单元格(合并列)
GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章: GridView多行多列合并单元格(完整代码和例子) ...
随机推荐
- OpenHarmony组件复用示例
本文转载自<#2023盲盒+码# OpenHarmony组件复用示例>,作者zhushangyuan_ ● 摘要:在开发应用时,有些场景下的自定义组件具有相同的组件布局结构,仅有状态变 ...
- Git 安全远程访问:SSH 密钥对生成、添加和连接步骤解析
使用 SSH 密钥对的 Git 安全远程访问:生成.添加和连接 SSH(Secure Shell)是一种用于安全远程访问的协议,它提供了加密通信和身份验证机制.在使用 SSH 连接到远程 Git 存储 ...
- Docker 学习路线 3:安装设置 Docker Desktop 与 Docker 引擎指南
Docker提供了一个名为Docker Desktop的桌面应用程序,简化了安装和设置过程.还有另一个选项可以使用Docker引擎进行安装. Docker Desktop网站 Docker引擎 Doc ...
- Grafana系列-统一展示-10-Explore Jaeger
系列文章 Grafana 系列文章 Explore Jaeger 你可以通过Explore查询和显示 Jaeger 的 trace.有 3 种方法: Query by search Query by ...
- WPF 像CSS一样使用 Font Awesome 图标字体
WPF 像CSS一样使用 Font Awesome 图标字体 编写目的 WPF中使用这种图标字体不免会出现可读性差的问题,现阶段网络上有的大部分实现方式都是建立枚举,我感觉这样后续维护起来有些麻烦,需 ...
- Web 在线制表工具稳定吗?和桌面报表工具对比哪个好用?
报表工具中最成熟常用的基本都是桌面设计器,但是 web 在线制表工具也占有部分市场,这是因为它也有一些优点: 1.报表设计和发布都在 web 端,无需额外安装桌面设计器 2.web 在线制表工具可直接 ...
- ES6中Module以及使用场景
一.介绍 模块,(Module),是能够单独命名并独立地完成一定功能的程序语句的集合(即程序代码和数据结构的集合体). 两个基本的特征:外部特征和内部特征 外部特征是指模块跟外部环境联系的接口(即其他 ...
- JS中通过url动态获取图片大小的方法小结(两种方法)
很多时候再项目中,我们往往需要先获取图片的大小再加载图片,但是某些特定场景,如用过cocos2d-js的人都知道,在它那里只能按比例缩放大小,是无法设置指定大小的图片的,这就是cocos2d-js 的 ...
- 【2021.6.26 NOI模拟】Problem B. 简单题 another solution
Problem Description Input 从文件 b.in 中读入数据. 一个正整数 n. Output 输出到文件 b.out 中. 一个整数表示答案. Sample Data Input ...
- 阿里云日志服务SLS携手观测云发布可观测性解决方案,共建可观测应用创新
简介: 2022年云栖大会期间,阿里云同观测云共同发布可观测性联合解决方案.观测云通过集成日志服务SLS的产品能力,发布了观测云SAAS专属版. 2022年云栖大会期间,阿里云同观测云共同发布可观测性 ...