layui table合并相同的列

news2024/11/25 16:26:37

在这里插入图片描述

	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;
    }
}

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

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

相关文章

TCP发送窗口、接收窗口以及其工作原理

1*KvfIrP_Iwq40uVdRZYGnQg.png 上面的图表是从发送方的角度拍摄的快照。我们可以将数据分为4组&#xff1a; 1.已发送并已确认的字节&#xff08;蓝色&#xff09;2.已发送但尚未确认的字节&#xff08;黄色&#xff09;3.未发送但接收方准备好接收的字节&#xff08;绿色&…

【C++】C++静态成员函数,类名直接调用

静态成员函数可以通过类名直接调用&#xff0c;不用创建对象。例如&#xff1a;ClassName::Func();通过类名直接调用因为不用创建对象所以不会运行类的构造方法。适合用于初始化。 参考&#xff1a; C【6】对静态成员函数的用法说明C调用成员函数的几种方法总结C static静态…

大数据毕业设计选题推荐-农作物观测站综合监控平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

Linux 多线程编程详解

目录 为什么要使用多线程 线程概念 线程的标识 pthread_t 线程的创建 向线程传入参数 线程的退出与回收 线程主动退出 线程被动退出 线程资源回收(阻塞方式) 线程资源回收(非阻塞方式) 为什么要使用多线程 在编写代码时&#xff0c;是否会遇到以下的场景会感觉到难以…

LINUX入门篇【4】开发篇--开发工具vim的使用

前言&#xff1a; 从这一篇开始&#xff0c;我们将正式进入使用LINUX进行写程序和开发的阶段&#xff0c;可以说&#xff0c;由此开始&#xff0c;我们才开始真正去使用LINUX。 介绍工具&#xff1a; 1.LINUX软件包管理器yum&#xff1a; 1.yum的介绍&#xff1a; 在LINUX…

Swift--量值与基本数据类型

系列文章目录 第一章: Swift–量值与基本数据类型 文章目录 系列文章目录前言对学习过程做一个记录 变量和常量命名规范注释 元祖类型可选类型拆包 typealias 前言 对学习过程做一个记录 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 变量和常量 …

十分钟理解回归测试(Regression Testing)

回归测试是一个系统的质量控制过程&#xff0c;用于验证最近对软件的更改或更新是否无意中引入了新错误或对以前的功能方面产生了负面影响&#xff08;比如你在家中安装了新的空调系统&#xff0c;发现虽然新的空调系统可以按预期工作&#xff0c;但是本来亮的等却不亮了&#…

Leetcode刷题【hot100】盛最多水的容器

给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你不能倾斜容器。 示例…

单例模式 rust和java的实现

文章目录 单例模式介绍应用实例&#xff1a;优点使用场景 架构图JAVA 实现单例模式的几种实现方式 rust实现 rust代码仓库 单例模式 单例模式&#xff08;Singleton Pattern&#xff09;是最简单的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建…

uboot 和 内存地址

前言 在使用 uboot 升级的时候&#xff0c;有个疑问&#xff1a; 通过 tftp 下载的 bin 文件&#xff0c;我该暂存在哪段内存空间&#xff1f;换句话说&#xff0c;哪段内存空间可供我存放临时数据&#xff1f; 带着这个疑问&#xff0c;开启今天的 uboot 和 内存地址 研究之旅…

CSS特效004:hover图片,显示文字或附加层

css实战中&#xff0c;时常会碰见鼠标放在某个区块上&#xff0c;显示出一段文字或者其他附加信息。思路是利用position的层叠关系&#xff0c;将文字层放在图片的上面&#xff0c;display:none; hover的时候层 display&#xff1a;block。 效果图 源代码 /* * Author: 大剑师…

NR UE capability FeatureSetCombination的查看方法

下面是UEcapability中根据协议中的描述总结的NR CA和EN-DC组合的查看方法&#xff0c;主要内容在38.331/36.331中。比较关键的IE就是FeatureSetCombination。 FeatureSetCombination对应的是FeatureSet entries的二维矩阵。 每个FeatureSetsPerBand 包含适用于相关band combin…

伦敦金股票代码是什么?

伦敦金是跟踪实时的现货黄金价格走势的差价合约交易&#xff0c;它的代码一般是LLG、GOLD&#xff0c;但也有一些货币交易平台会显示为XAU。伦敦金不是股票交易&#xff0c;因此没有四位数或六位数的股票代码&#xff0c;但伦敦金交易品种单一&#xff0c;投资者不用在数千支股…

亚马逊云科技海外服务器初体验

目录 前言亚马逊云科技海外服务器概述注册使用流程实例创建性能表现用户体验服务支持初体验总结 前言 随着云原生技术的飞速发展&#xff0c;越来越多的企业和开发者选择云服务器来作为自己的使用工具&#xff0c;云原生技术的发展也促进了云服务厂商的产品发展&#xff0c;所…

CSS3 2D、3D转换

一、CSS3 2D转换&#xff1a; CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。 2D变换的方法&#xff1a;translate()、rolate()、scale()、skew()、matrix()。 <style> div { width:200px; height:100px; background-color:red; /* Rotate div */ tran…

创新功能点展望:探索未来一对一交友App开发的趋势和可能性

随着社交媒体和科技不断进步&#xff0c;一对一交友App开发正处于迅猛发展的阶段。未来&#xff0c;这一领域将出现许多激动人心的创新&#xff0c;为用户带来更加个性化、安全、以及富有情感连接的体验。以下将探讨一些可能性和趋势&#xff0c;以及从中受益的用户和开发者。 …

自动计算零售数据分析指标?BI软件表示可行

随着BI技术的飞速发展&#xff0c;借助系统来计算分析指标也不是什么难事&#xff0c;即便是面对组合多变的零售数据分析指标&#xff0c;奥威BI软件也依旧可以又快又精准地完成指标计算。 BI软件可以自动计算零售数据分析指标&#xff0c;如销售额、库存量、订单量等。在计算…

MyBatis中文网

MyBatis中文网https://mybatis.net.cn/ MyBatis 是一款优秀的持久层框架&#xff0c;它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Ja…

软件测试|MySQL WHERE条件查询详解:筛选出需要的数据

简介 在数据库中&#xff0c;我们常常需要从表中筛选出符合特定条件的数据&#xff0c;以便满足业务需求或获取有用的信息。MySQL提供了WHERE条件查询&#xff0c;使我们能够轻松地筛选数据。本文将详细介绍MySQL WHERE条件查询的用法和示例&#xff0c;帮助大家更好地理解和应…

[工业自动化-7]:西门子S7-15xxx编程 - PLC主站 - 电源模块

目录 前言&#xff1a; 一、主站电源PM VS PS 1.1 主站PM电源模块(PM) 1.2 主站PS电源模块 1.3 PM/PS电源模块区别 1.4 如何选择PM/PS电源 1.5 什么时候必须使用PM模块 1.6 什么时候必须使用PS模块 二、背板总线 三、电源模块的安装 前言&#xff1a; 一、主站电源PM…