当前位置: 首页 > news >正文

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

相关文章:

layui table合并相同的列

table.render({elem: #samples,url: /index/Develorderss/samplelists?od_idod_id //数据接口,page: { //支持传入 laypage 组件的所有参数&#xff08;某些参数除外&#xff0c;如&#xff1a;jump/elem&#xff09; - 详见文档layout: [prev, page, next, count,skip,limit]…...

【Spring】SpringBoot配置文件

SpringBoot配置文件 配置文件作用SpringBoot配置文件配置文件快速入手配置文件的格式properties配置文件说明基本语法读取配置文件properties缺点分析 yml配置文件说明yml基本语法yml使用进阶yml配置读取配置对象配置集合配置Mapyml优缺点 配置文件作用 计算机上有数以千计的配…...

python批量下载txt文件中链接的数据

python下载txt文件中链接的数据,以gimms ndvi3g下载为例 官方下载网址:https://www.ncei.noaa.gov/data/land-normalized-difference-vegetation-index/access/ 选择下载2020年数据为例: 网址:Index of /data/land-normalized-difference-vegetation-index/access/2020…...

stm32 Bootloader设计(YModem协议)

stm32 Bootloader设计&#xff08;YModem协议&#xff09; Chapter1 stm32 Bootloader设计(YModem协议)YModem协议&#xff1a;STM32 Bootloader软件设计STM32 Bootloader使用方法准备工作stm32 Bootloader修改&#xff1a;stm32目标板程序.bin偏移地址修改&#xff1a; Chapt…...

竞赛 题目: 基于深度学习的疲劳驾驶检测 深度学习

文章目录 0 前言1 课题背景2 实现目标3 当前市面上疲劳驾驶检测的方法4 相关数据集5 基于头部姿态的驾驶疲劳检测5.1 如何确定疲劳状态5.2 算法步骤5.3 打瞌睡判断 6 基于CNN与SVM的疲劳检测方法6.1 网络结构6.2 疲劳图像分类训练6.3 训练结果 7 最后 0 前言 &#x1f525; 优…...

ubuntu 16.04.5 安装 vivado 2019.1 完整编译AD9361的环境

一、前期安装 1、安装ncurses库&#xff08;已经包含了&#xff0c;其他的os需要安装&#xff09; sudo apt install libncurses5二、安装 sudo ./xsetup使用lic进行激活。 三、安装后 输入指令 sudo gedit ~/.bashrc 末尾添加 source /opt/Xilinx/Vivado/2019.1/setti…...

Zotero详细功能补充!熟练使用!【进阶版,持续更新】

Zotero安装请参见文章Zotero安装 1.改变条目文件夹 如果直接选择条目直接进行移动&#xff0c;能移动成功&#xff0c;但是原来文件夹和目标文件夹都会存在&#xff0c;实际是复制&#xff01; 如果只想保留在一个文件夹里面&#xff0c;可以选中条目&#xff0c;右击-从分…...

【Windows】Windows系统常用命令大全

现实生活中&#xff0c;对电脑越熟悉懂得的快捷命令就越多。例如我们日常遇到的比较方便办公技巧&#xff0c;用快捷命令调用工具&#xff1a;调用计算器&#xff0c;Win键R&#xff0c;输入calc&#xff0c;回车&#xff0c;计算器界面弹出来&#xff1b; 调用记事本&#xff…...

大语言模型研究进展综述

1、历史 自20世纪50年代图灵测试被提出以来&#xff0c;研究人员一直在探索和开发能够理解并掌握语言的人工智能技术。 作为重要的研究方向之一&#xff0c;语言模型得到了学术界的广泛研究&#xff0c;从早期的统计语言模型和神经语言模型开始&#xff0c;发展到基于Transform…...

linux gdb 调试 常见调试命令介绍+总结

1.调试前准备 -g gcc arcg.c -g -oO -o app //必须添加-g 2.调试 gdb gdb app 3.常见调试命令 set args 1 2 3 4 5 6 //设置参数 show args //查看参数 3.1执行程序 1.start2. run gdb app set args 1 2 3 4 5 start //执行一行 c //继续执行 q…...

基于JavaWeb+SSM+Vue微信小程序校园兼职任务平台系统的设计和实现

基于JavaWebSSMVue微信小程序校园兼职任务平台系统的设计和实现 源码传送入口前言主要技术系统设计功能截图Lun文目录订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码传送入口 前言 随着社会的发展和全球疫情的冲击&#xff0c;大学生的就业形势越来越严峻。越…...

我的MQTT操作类(M2Mqtt.Net)

类本体 4.3.0 public class MQTTMain{public MqttClient mqttClient null ; public bool MQTTMainConnect(string MenZuNo, string ServerIP, int ServerPort, string UserName, string Pwd){try{string EMQX_CLIENT_ID $"称重端-{MenZuNo}-{OPCommon.PCControl.G…...

node插件MongoDB(四)—— 库mongoose 的个性话读取(字段筛选、数据排序、数据截取)(四)

文章目录 一、字段筛选二、数据排序三、数据截取1. skip 跳过2. limit 限定![在这里插入图片描述](https://img-blog.csdnimg.cn/c7067b1984ee4c6686f8bbe07cae9176.png) 一、字段筛选 字段筛选&#xff1a;只读取指定的数据&#xff0c;比如集合&#xff08;表&#xff09;中有…...

AI:73-结合语法知识的神经机器翻译研究

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌在这个漫长的过程,中途遇到了不少问题,但是…...

[LeetCode]-225. 用队列实现栈

目录 225. 用队列实现栈 题目 ​思路 代码 225. 用队列实现栈 225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/implement-stack-using-queues/description/ 题目 请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff0…...

Kafka Rebanlace次数过高问题

Kafka Rebanlace次数过高问题 环境&#xff1a; Kafka Server 2.6.x Kafka Client Java 2.8.2 缘起&#xff1a; 最近发现Kafka Rebalance次数着实有点多&#xff0c;一天达到了六十多次&#xff0c;感觉不太正常&#xff0c;于是查了下日志发现&#xff1a; Offset commit c…...

计算机是如何进行工作的+进程和线程

一)计算机是如何工作的? 指令是如何执行的?CPU基本工作过程&#xff1f; 假设上面有一些指令表&#xff0c;假设CPU上面有两个寄存器A的编号是00&#xff0c;B的编号是01 1)第一个指令0010 1010&#xff0c;这个指令的意思就是说把1010地址上面的数据给他读取到A寄存器里面 2…...

MySQL(11):数据处理之增删改

插入数据 方式1&#xff1a; 一条一条的添加数据 为表的所有字段按默认顺序插入数据 INSERT INTO 表名 VALUES (value1,value2,....);# 没有指明添加的字段 INSERT INTO emp1 VALUES (1,TOM,2023-11-06,3400);没有指明添加的字段&#xff0c;要按照声明顺序&#xff0c;进行…...

QT QDockWidget

QDockWidget是Qt中的一个容器类&#xff0c;用于在主窗口上创建可停靠的子窗口。 设置停靠窗口的一般流程如下: (1)创建一个QDockWidget 对象的停靠窗体。 (2)设置此停靠窗体的属性&#xff0c;通常调用setFeatures()及setAllowedAreas()两种方法。 (3)新建一个要插入停靠窗…...

Android 12.0 开启蓝牙状态栏即显示蓝牙图标

Android 12.0 开启蓝牙状态栏即显示蓝牙图标 最近收到客户反馈想要在开启蓝牙时状态栏就能显示出蓝牙图标&#xff0c;我们系统默认是蓝牙连接上设备后状态栏才显示出蓝牙图标&#xff0c;具体修改参照如下&#xff1a; /vendor/mediatek/proprietary/packages/apps/SystemUI…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...