【layui-table】转静态表格时固定表格列处理行高和单元格颜色

处理思路:覆盖layui部分表格样式

行高处理:获取当前行数据单元格的最高高度,将当前行所有数据单元格高度设置为该最高高度

单元格颜色处理:将原生表格转换为layui表格后,因为原生表格的表格结构和生成的layui表格结构相等,所以在生成原生表格时先赋值单元格颜色,在通过脚本获取原生单元格颜色并覆盖对应索引下的layui表格单元格颜色样式

样式覆盖

.layui-table-body.layui-table-main .layui-table-cell {height: auto ;line-height: 28px;padding: 0 15px;position: relative;box-sizing: border-box;
}.layui-table td, .layui-table-view .layui-table th {padding: 0px 0 !important;border-top: none;border-left: none;
}

HTML

<div class="mt-20" style=" width: 1920px; overflow: auto; "><table id="tableText" @*class="ui-usertable"*@ lay-filter="staticTable"><thead><tr id="trr"></tr></thead><tbody id="tb"></tbody></table>
</div>

脚本处理


table.init('staticTable', { //转化静态表格height: (pageType == 'detail' ? '150' : '710'),page: false,//禁用分页limit: 99999//当前页面数据数量
});
//处理表格高度:将固定列单元格高度按照记录信息修改
$(".layui-table-body.layui-table-main ").find("tr").each(function (index, item) {let height = "0px"//获取数据表格中每行最高数据列单元格高度$(item).find(".layui-table-cell").each(function (index, item_td) {//console.log('height', $(item_td).css("height"))if (parseInt($(item_td).css("height").replaceAll("px", "")) > parseInt(height.replaceAll("px", ""))) {height = $(item_td).css("height")//console.log('height', height, $(item_td).css("height"))}});//将当前数据行所有单元格行高设置为最高单元格高度$(item).find(".layui-table-cell").each(function (index, item_td) {$(item_td).css("height", height)});//将固定列表格中每行单元格高度按照获取的高度修改$($($(".layui-table-fixed.layui-table-fixed-l .layui-table-body").find("tr")[index]).find(".layui-table-cell")).css("height", height).css("line-height", height);
})
//处理单元格颜色
//tb为原生表格tableBody内容
$("#tb").find("td").each(function (index, item) {let backgroundColor = $(item).css("background-color")//console.log('backgroundColor', backgroundColor)$($(".layui-table-body.layui-table-main").find(".layui-table-cell")[index]).css("background-color", backgroundColor)
})

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

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

相关文章

C#中值类型与引用类型的存储

目录 值对象与引用对象的存储 引用对象的成员存储 值对象与引用对象的存储 数据项的类型定义了存储数据需要的内存大小及组成该类型的数据成员。类型还决定了对象在内存中的存储位置——栈或堆。 C#中类型分为两种&#xff1a;值类型和引用类型&#xff0c;这两种类型的对象…

中介者模式:优雅解耦的利器

在软件设计中&#xff0c;随着系统功能的不断扩展&#xff0c;对象之间的依赖关系往往会变得错综复杂&#xff0c;导致系统难以维护和扩展。为了降低对象之间的耦合度&#xff0c;提高系统的可维护性和可扩展性&#xff0c;设计模式应运而生。中介者模式&#xff08;Mediator P…

【蓝桥杯 C++高级组省赛以及2020年-蓝桥杯C++省赛合集+部分答案】

一、选择题&#xff08;单项选择&#xff0c;每空30分&#xff09; 请将选择题答案填入答题卡蓝色框内 第一题&#xff08;难度系数 1&#xff09; 结构化程序所要求的基本结构不包括( )。 A.顺序结构 B.GOTO()跳转 C.选择(分支)结构 D.重复(循环)结构 第二题&#xff…

记录一下做工厂的打印pdf程序

功能&#xff1a;在网页点击按钮调起本地的打印程序 本人想到的就是直接调起方式&#xff0c;网上大佬们说用注册表的形式来进行。 后面想到一种&#xff0c;在电脑开机时就开启&#xff0c;并在后台运行&#xff0c;等到有人去网页里面进行触发&#xff0c;这时候就有个问题&a…

银行监管报送系统介绍(十五):金融审计平台

《“十四五”国家审计工作发展规划》中重点强调&#xff0c;金融审计&#xff1a;以防范化解重大风险、促进金融服务实体经济&#xff0c;推动深化金融供给侧结构性改革、建立安全高效的现代金融体系为目标&#xff0c;加强对金融监管部门、金融机构和金融市场运行的审计。 —…

面试题:MySQL 事务 日志 MVCC

事务的特性 ACID 事务的隔离级别 并发事务问题 脏读&#xff1a;一个事务读到另一个事务还没有提交的数据不可重复读&#xff1a;一个事务先后读取同一条记录&#xff0c;但两次读取的数据不同幻读&#xff1a;一个事务按照条件查询数据时&#xff0c;没有对应的数据行&#xf…

Oracle EBS AR接口和OM销售订单单价为空数据修复

最近,用户使用客制化Web ADI 批量导入销售订单行功能,把销售订单行的单价更新成空值,直到发运确认以后,财务与客户对帐才发现大量销售订单的单价空,同时我们检查AR接口发现销售订单的单价和金额均为空。 前提条件 采用PAC成本方式具体问题症状 销售订单行的单价为空 Path:…

Redhat 7.9 安装dm8配置文档

Redhat 7.9 安装dm8配置文档 一 创建用户 groupadd -g 12349 dinstall useradd -u 12345 -g dinstall -m -d /home/dmdba -s /bin/bash dmdba passwd dmdba二 创建目录 mkdir /dm8 chown -R dmdba:dinstall /dm8三 配置/etc/security/limits.conf dmdba soft nproc 163…

文心一言 vs GPT-4 —— 全面横向比较

对于文心一言和 GPT-4 这两者之间的全面横向比较&#xff0c;我们可以从多个方面来看待它们的区别和优劣势。 文心一言 文心一言是一款基于深度学习的中文文本生成模型&#xff0c;专注于生成优美的古风诗句和语录。以下是它的一些特点&#xff1a; 专注于古风诗句和语录: 文…

在CentOS 7上安装Python 3.7.7

文章目录 一、实战步骤1. 安装编译工具2. 下载Python 3.7.7安装包3. 上传Python 3.7.7安装包4. 解压缩安装包5. 切换目录并编译安装6. 配置Python环境变量7. 使配置生效8. 验证安装是否成功 二、实战总结 一、实战步骤 1. 安装编译工具 在终端中执行以下命令 yum -y groupin…

发挥ChatGPT潜能:让学术论文写作更具创新性

ChatGPT无限次数:点击直达 发挥ChatGPT潜能&#xff1a;让学术论文写作更具创新性 在当今信息爆炸的时代&#xff0c;学术论文写作已经成为许多研究人员、学生和学者必不可少的工作。然而&#xff0c;很多人在写作过程中常常会遇到一些难题&#xff0c;比如创意枯竭、论点表达…

XRDP登录ubuntu桌面闪退问题

修改 /etc/xrdp/startwm.sh unset DBUS_SESSION_BUS_ADDRESS unset XDG_RUNTIME_DIR . $HOME/.profile

javascript常见的事件属性

焦点事件 focus/blur <input type"text" /><script>const input document.querySelector("input")// 绑定焦点事件input.addEventListener("focus" ,function(){console.log("有焦点触发")})// 失去焦点事件input.addEve…

Vulkan Material 设计学习

在学习 http://xiaopengyou.fun/public/2019/09/20/20_Material/ 的时候遇到的一些问题 初始化 初始化的时候 VkWriteDescriptorSet 把 ring buffer 绑定到 descriptor set 在每帧的最后&#xff0c;提交完 uniform buffer 的数据之后&#xff0c;vkCmdBindDescriptorSets 把…

Git分支提交时自动大写 fatal: the remote end hung up unexpectedly

先说结论&#xff1a; 进入 .git/refs/heads目录&#xff0c;会看到Feature文件夹&#xff0c;重命名为feature即可。 表现&#xff1a; 通过终端命令创建的分支 git checkout -b feature/name 使用git push后自动变成了Feature/name 并且有时候在本地创建feature/1234567…

合宙4G模块Air724UG调试过程(短信发送、上传数据到华为云IOT)

合宙Air724UG-4G模块AT指令调试接线演示 一、前言 上海合宙Air724UG模块是一款高性能的4G Cat.1通信模组(全网通模块,支持移动、联通、电信,支持短信和网络通信),为开发者提供了丰富的接口和开发方式。 在本文中,将详述调试与集成该模块的关键步骤: (1)从基础硬件配…

vim脚本的语言语法

本文结构&#xff1a; a、简介 b、Vim 脚本语言的一些基本语法和概念 a、Vim 脚本语言&#xff08;Vimscript&#xff09;是 Vim 编辑器用于自动化任务和扩展功能的脚本语言。Vimscript 提供了一套丰富的命令、函数和变量&#xff0c;允许用户自定义快捷键、映射、插件和更多…

CSS面试题常用知识day03

大家好我是没钱的君子下流坯&#xff0c;用自己的话解释自己的知识 前端行业下坡路&#xff0c;甚至可说前端已死&#xff0c;我还想在前段行业在干下去&#xff0c;所以从新开始储备自己的知识。 从CSS——>Javascript——>VUE2——>Vuex、VueRouter、webpack——>…

SVM简介 详细推导 核函数 线性可分 非线性可分

注意&#xff1a;由于该文章由jupyter nbconvert导出&#xff0c;若单独执行代码可能出现变量找不到或者没有导入库的情况&#xff0c;正确的做法是将所有的代码片段按顺序放到一个.py文件里面或者按顺序放入一个.ipynb文件的多个代码块中。 SVM(Support Vector Machine) Vap…

49岁前港姐退圈出嫁「南丫岛王子」,打排卵针高龄连生两女。

现年49岁的吴忻熹&#xff08;原名吴文忻&#xff09;1998年参选香港小姐夺得季军入行&#xff0c;在TVB签约发展平平&#xff0c;继而转战影坛&#xff0c;凭性感演出而为人熟悉。其后她在2011年嫁给有「南丫岛王子」之称的金融才俊&#xff0c;并在近40岁开始诞下两名女儿。吴…