layui table合并相同的列

在这里插入图片描述

	table.render({
		elem: '#samples'
		,url: '/index/Develorderss/samplelists?od_id='+od_id //数据接口
		,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
			layout: ['prev', 'page', 'next', 'count','skip','limit'] //自定义分页布局
			//,curr: 5 //设定初始在第 5 页
			,groups:10 //只显示 1 个连续页码
			,first: false //不显示首页
			,last: false //不显示尾页
		}
		,limit:10
		,cols: [[ //表头
		// ,给供应商做信笺时间,供应商回信的时间,寄客户信笺时间,确认的时间,是否确认(如果是色样就填颜色的结果),创建日期
			{checkbox: true, fixed: true}
			,{field:'name',title:'类型',width:'10%'}
			,{field:'sm_name',title:'材料',width:'10%'}
			,{field:'color_name',title:'颜色',width:'10%'}
			,{field:'sample_delivery',title:'交期',width:'150'}
			,{field:'sample_delivery',title:'寄出供应商信笺',width:'150'}
			,{field:'sample_delivery',title:'收到供应商信笺',width:'150'}
			,{field:'sample_delivery',title:'寄出客户信笺',width:'150'}
			,{field:'sample_delivery',title:'收到客户信笺',width:'150'}
			,{field:'sample_delivery',title:'确认时间',width:'150'}
			,{field:'is_confirm',title:'是否确认',width:'10%',templet:function(d){
				if(d.is_confirm==0){
					return "<div style='color:red'>不确认</div>";
				}else if(d.is_confirm==1){
					return "<div style='color:green'>确认</div>";
				}else{
					return "";
				}
			}}
			,{field:'create_date',title:'创建日期',width:'150'}
			,{title:'操作',width:'320',fixed:'right',templet:function(d){
				var str = '';
				str += "<div class='layui-btn' lay-event='detail'>详情</div>";	
				str += "<div class='layui-btn' lay-event='edit'>编辑</div>";	
				str += "<div class='layui-btn' lay-event='del'>删除</div>";	
				str += "<div class='layui-btn' lay-event='suggest'>意见资料</div>";
				return str;	
			}}
		]]
		,jump:function(obj, first){
			if(!first){
				$.get('/index/Develorderss/samplelists?od_id='+od_id,{page:obj.curr},function(data){
					console.log(data);
				});
			}
		}
        ,done:function(res, curr, count) {
            merge(res);//调用
        }
	});
function merge(res) {
    var data = res.data;
    var mergeIndex = 0;//定位需要添加合并属性的行数
    var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
    var columsName = ['name','sm_name'];//需要合并的列名称
    var columsIndex = [1,2];//需要合并的列索引值

    for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
        var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
            for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
                
                if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较,相同就需要合并
                    mark += 1;
                    tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                        $(this).attr("rowspan", mark);
                    });
                    tdCurArr.each(function () {//当前行隐藏
                        $(this).css("display", "none");
                    });
                }else {
                    mergeIndex = i;
                    mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
                }
            }
        mergeIndex = 0;
        mark = 1;
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

链表OJ题(1)

今天讲解两道链表OJ题目。 1.链表的中间节点 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表只有一个…

mac 安装使用svn教程

mac 安装使用svn教程 一、安装Homebrew 要在Mac OS上安装SVN&#xff0c;首先需要安装Homebrew。Homebrew是一个流行的包管理器&#xff0c;因此我们将使用它来安装SVN。 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"…

区块链多链数字钱包开发

随着区块链技术的不断发展&#xff0c;多链数字钱包的开发逐渐成为热门领域。多链数字钱包是一种可以支持多种区块链网络的数字钱包&#xff0c;用户可以使用它来存储、管理和转移不同的数字资产。本文将探讨多链数字钱包的开发背景、市场需求、技术实现和未来趋势等方面。 一、…

redisson中的分布式锁二

公平锁&#xff08;Fair Lock&#xff09; 基于Redis的Redisson分布式可重入公平锁也是实现了java.util.concurrent.locks.Lock接口的一种RLock对象。同时还提供了异步&#xff08;Async&#xff09;、反射式&#xff08;Reactive&#xff09;和RxJava2标准的接口。它保证了当…

YB1205B S0T23开关式异步升压具恒压恒流LED驱动器

YB1205B S0T23开关式异步升压具恒压恒流LED驱动器 产品简介&#xff1a; YB1205B是一种输入电压范围宽(0.85.5V),可调恒定电流和限定电流两种模式来驱动白光LED而设计的升压型DCDC变换器。采用变频模式&#xff0c;逐周期限流&#xff0c;使输入输出电流随电源电压降低均匀变…

微服务之Nacos注册管理

文章目录 一、Nacos安装步骤1.安装地址2.安装版本3.目录说明4.端口配置5.启动 二、Nacos服务注册1.Nacos依赖2.客户端修改配置文件3.启动效果图4.总结 三、Nacos服务集群属性1.服务跨集群调用问题2.服务集群属性3.总结 四、Nacos根据集群负载均衡1.修改配置文件2.设置集群服务类…

【C语法学习】20 - 文件访问顺序

文章目录 0 前言1 文件位置指示符2 rewind()函数2.1 函数原型2.2 参数2.3 返回值2.4 使用说明 3 ftell()函数3.1 函数原型3.2 参数3.3 返回值 4 fseek()函数4.1 函数原型4.2 参数4.3 返回值 5 示例5.1 示例15.2 示例2 0 前言 C语言文件访问分为顺序文件访问和随机文件访问。 …

Kotlin库实现多线程爬取数据

由于字数限制&#xff0c;以下是一个简化版的爬虫程序示例&#xff0c;使用了Kotlin的网络库kotlinx.coroutines和kotlinx.html。这个程序会爬取一个简单的Python多线程跑数据的网页&#xff0c;并打印出结果。 import kotlinx.coroutines.* import kotlinx.html.* import java…

oracle-sql语句解析类型

语句执行过程&#xff1a;1. 解析(将sql解析成执行计划) 2.执行 3.获取数据(fetch) 1. shared pool的组成。 share pool是一块内存池。 主要分成3块空间。free&#xff0c; library(库缓存&#xff0c;缓存sql以及执行计划)&#xff0c;row cache(字典缓存) select * from v…

振南技术干货集:C语言的一些“骚操作”及其深层理解(10)

注解目录 第二章《c语言的一些“操作”及其深层理解》 一、字符串的实质就是指针 &#xff08;如何将 35 转为对应的十六进制字符串”0X23”&#xff1f;&#xff09; 二 、转义符\ &#xff08;打入字符串内部的“奸细”。&#xff09; 三、字符串常量的连接 &#xff…

WebSocket在node端和客户端的使用

摘要 如果想要实现一个聊天的功能&#xff0c;就会想到使用WebSocket来搭建。那如果没有WebSocet的时候&#xff0c;我们会以什么样的思路来实现聊天功能呢&#xff1f; 假如有一个A页面 和 B页面进行通信&#xff0c;当A发送信息后&#xff0c;我们可以将信息存储在文件或者…

Vue 最简单路由 页面路由 配置路由

路由安装 Vue3使用 vue-router4 Vue2使用 vue-router3 npm i vue-router3创建路由文件 配置路由规则 import Vue from vue import VueRouter from vue-router //导入路由器 Vue.use(VueRouter)import Login from ../components/Login import User from ../components/User //…

服务器数据恢复—云服务器mysql数据库表被truncate的数据恢复案例

云服务器数据恢复环境&#xff1a; 阿里云ECS网站服务器&#xff0c;linux操作系统mysql数据库。 云服务器故障&#xff1a; 在执行数据库版本更新测试时&#xff0c;在生产库误执行了本来应该在测试库执行的sql脚本&#xff0c;导致生产库部分表被truncate&#xff0c;还有部…

基于springboot实现福聚苑社区团购平台系统项目【项目源码】

基于springboot实现福聚苑社区团购平台系统演示 Javar技术 Java是一种网络脚本语言&#xff0c;广泛运用于web应用开发&#xff0c;可以用来添加网页的格式动态效果&#xff0c;该语言不用进行预编译就直接运行&#xff0c;可以直接嵌入HTML语言中&#xff0c;写成js语言&…

如何在时间循环里最优决策——时间旅行者的最优决策

文章目录 每日一句正能量前言时间旅行和平行宇宙强化学习策略梯度算法代码案例推荐阅读赠书活动 每日一句正能量 做一个决定&#xff0c;并不难&#xff0c;难的是付诸行动&#xff0c;并且坚持到底。 前言 时间循环是一类热门的影视题材&#xff0c;其设定常常如下&#xff1…

javaSE学习笔记(四)常见类,基本数据类型包装类,StringBufferStringBuilder

目录 三、面向对象 16.Object类 方法 和equals() 17.String类 注意 构造方法 String的最大长度 String的底层存储结构 字符串的常量池机制 String类的方法 String类的判断功能 String类的获取功能 String类的转换功能 String类拼接 String类的其他功能 18.Math…

vue3 自动导入composition-apiI和组件

1.api的自动导入 常规写法&#xff1a; <script setup>import { ref, reactive, onMounted, computed ,watch } from vue;import { useRouter } from "vue-router";const router useRouter();const person reactive ({name&#xff1a;张三&#xff0c;age…

美国Embarcadero公司正式发布2023 RAD Studio Delphi C++ Builder 12 Athens

Embarcadero 非常高兴地宣布发布 RAD Studio 12 Athens 以及 Delphi 12 和 CBuilder 12。RAD Studio 12 Athens 版本包含令人兴奋的新功能&#xff0c;为该产品的未来奠定了基础。 目录 主要新功能 C 的奇妙之处Delphi 的一些不错的补充FireMonkey 和 Skia 作为新基金会采用 MD…

观测云产品更新 | 数据转发、监控器告警策略等优化

数据转发 数据查询时间组件优化&#xff0c;支持选择多个日期&#xff0c;并可以自定义开始时间和结束时间&#xff0c;时间精确到小时。 监控器 > 告警策略优化 1、「通知配置」逻辑调整为&#xff1a;针对单个异常等级配置通知单个或多个对象告警通知。 2、「恢复通知」…

使用XnView MP快速查看图片某个像素点的RGB像素值

效果图 如上图lena.png X:28 Y:9 RGB (220, 129, 107) HTML(#dc816b) 简介 XnView MP是一款非常著名的免费看图软件XnView 的新版本 MP是 Multi Platform 的缩写&#xff0c;支持多平台并基于同样的源代码&#xff0c;不同平台也提供统一的界面和体验&#xff0c;最终取代…