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设备截屏的5种方式
本文转载自<OpenHarmony设备截屏的5种方式 >,作者westinyang 目录 ● 方式1:系统控制中心 ● 方式2:OHScrcpy投屏工具 `推荐` ● 方式3:DevE ...
- 开启新时代,承接新使命,开放原子开源大赛OpenHarmony创新赛正式启航!
开放原子开源大赛OpenHarmony创新赛,正式启动啦! "OpenHarmony创新赛"是开放原子全球开源大赛下开设的创新赛道,面向企业.个人.高校师生等广大开发者,聚焦O ...
- 深入了解 Golang 条件语句:if、else、else if 和嵌套 if 的实用示例
条件语句 用于根据不同的条件执行不同的操作.Go中的条件可以是真或假.Go支持数学中常见的比较运算符: 小于 < 小于等于 <= 大于 > 大于等于 >= 等于 == 不等于 ...
- 学习Source Generators之打包成Nuget使用
前面我们简单的实现了一个从swagger生成实体类的Generator,在实际使用中,通过nuget包引用使用会更方便,那么本篇文章将介绍如何将Generator打包成Nuget来使用. 打包Nuge ...
- HarmonyOS数据管理与应用数据持久化(一)
一. 数据管理概述 功能介绍 数据管理为开发者提供数据存储.数据管理能力,比如联系人应用数据可以保存到数据库中,提供数据库的安全.可靠等管理机制. ● 数据存储:提供通用数据持久化能力,根据数据特 ...
- DevEco Studio新特性分享-跨语言调试,让调试更便捷高效
原文:https://mp.weixin.qq.com/s/JKVLQXu1z1zAoF5q49YEGg,点击链接查看更多技术内容. HUAWEI DevEco Studio是开发Harmony ...
- nginx重新整理——————http请求的11个阶段[十二]
前言 已经到了关键的http请求的11个阶段了. 正文 概念图: 11 个阶段的处理顺序: 那么就来介绍一下: 先来了解一下postread阶段的realip这个处理,realip 是 real ip ...
- webpack中常见的Plugin?解决了什么问题?
一.是什么 Plugin(Plug-in)是一种计算机应用程序,它和主应用程序互相交互,以提供特定的功能 是一种遵循一定规范的应用程序接口编写出来的程序,只能运行在程序规定的系统下,因为其需要调用原纯 ...
- 使用ollama分别在我的window、mac、小米手机上部署体验llama3-8b
1.ollama到底是个什么玩意 一句话来说, Ollama 是一个基于 Go 语言开发的简单易用的本地大模型运行框架.可以将其类比为 docker(有类似docker中的一些常规命令list,pul ...
- three.js实现数字孪生3D仓库一期(开源)
大家好,本文使用three.js实现了3D仓库一期项目,给出了代码,分析了关键点,感谢大家~ 关键词:数字孪生.three.js.Web3D.WebGL.智慧仓库.开源 代码:Github 我正在承接 ...