layui 合并单元格
之前做项目的时候有一个需求,就是需要第一列数据部分合并单元格展示,如下:
使用layui完成,表头是通过后台获得的。
layui表格初始化后,在done中执行merge方法。
table.render({elem: position, method: 'get', url: '', where: {id: id,tableName: status,paId: paId,}, height: 'full-260', cellMinWidth: 101 //全局定义常规单元格的最小宽度,layui 2.2.1 新增, cols: [mycars], parseData: function (res) { //将原始数据解析成 table 组件所规定的数据return {"code": res.code, //解析接口状态"msg": res.msg, //解析提示文本"count": res.count, //解析数据长度"data": res.data //解析数据列表};},done: function (res, curr, count) {merge(res);//合并列},});
//layui数据表格合并行function merge(res) {debugger;var data = res.data;var mergeIndex = 0;//定位需要添加合并属性的行数var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数var columsName = ['SubName'];//需要合并的列名称var columsIndex = [0];//需要合并的列索引值for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列var trArr = $(".layui-show>.layui-table-view>.layui-table-box>.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 合并单元格相关推荐
- layui合并单元格的一种实现
描述:layui的table合并单元格,根据某一列的分组情况给其他列进行合并,特定列分组的单元为其他列最大的合并单元,不可超出. 前序要求:需要后台返回的数据根据要求分组排序后送到前端,js合并的核心 ...
- layui合并单元格方法
layui合并单元格方法 文章目录 layui合并单元格方法 前言 1.关键代码 2.全部代码 总结 前言 layui没有对应模块,参照网上例子改写之后实现效果 提示:以下是本篇文章正文内容 1.关键 ...
- layui实现表格合并单元格,设置不同背景色
最近在使用layui的过程中,遇到了表格合并单元格,设置不同背景色的问题. 在此总结,大家一起学习. 同一组新闻的底色相同,效果如下: 实现代码: <script>layui.config ...
- layui导出excel动态拆分单元格一个单元格显示多行数据合并单元格
需求如图 首先说明是不能拆分单元格的,因为单元格是最小单位.只能通过合并单元格来实现. 实现思路:点击导出按钮,去请求后端数据.data数据如下: [{OrderNo: 'No637829645038 ...
- layui table 表头合并_layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...
- layui表格合并单元格
思想:layui表格合并单元格,layui并没有给出相应的解决办法:那么我们可以在前端使用js将相邻并相同的单元格合并: 1.页面代码: <!DOCTYPE html> <html ...
- layui table 单元格合并
在表格加载完成方法执行 done:function(res, curr, count){ merge(res); } //合并单元格 funct ...
- Layui table合并单元格
table.render({... ... ... done: function (res, curr, count) {var columsName = ["De_Name", ...
- python 2x xlrd使用merged_cells 读取的合并单元格为空
一个简单的excel 如下 代码如下 #!/usr/bin/python# # -*- coding: utf-8 -*- import xlrd import sys reload(sys) sys ...
最新文章
- win 10升级后不能访问服务器文件夹,Win10打开某些文件夹出现“无法访问”的解决方法...
- 使用 Visual Studio Online 进行协同开发
- Telerik RadGridView动态增删行及行列操作
- 用python可以解决什么问题_学 Python 能帮你解决什么问题 ?
- 剑指offer 面试题17. 打印从1到最大的n位数
- [Python] 当猎头遇上 Guido van Rossum
- hdu 1072 Nightmare BFS搜索(可重走)
- 【BIEE】17_仪表盘提示中值按顺序显示
- ssm校园在线点餐系统源码(含数据库)
- android4.4内存,Android 4.4只需512MB内存?别高兴太早
- 互联网晚报 | 12月17日 星期五 | 抖音电商独立App“抖音盒子”正式上线;腾讯电子签上线商家版功能;年内首只游戏股上市...
- 操作系统原理与Linux实践教程申丰山版习题2的2-3答案
- 设计一个正方形类,其中包括边长一个属性,包括构造函数,析构函数,求面积的成员函数和求周长的成员函数,通过正方形类定义2个正方形对象,并求建设一个下图所示的活动场地的费用。(用户输入中间草坪场地的边长)
- c 语言函数公有私有区分,C++私有成员函数
- 关于浏览器账密自动填充
- 导入Excel时数据类型处理工具类
- 【插件】前端表格在线表格类Excel插件推荐
- STM32查看工程内存/Flash/ROM使用情况
- 为何面试时都会问你的职业规划呢?该如何回答呢?
- 【19调剂】华中师范大学伍伦贡联合研究院单学位项目2019年报名和面试的通知...