layui 列合并相同内容
table.render({
elem: '#tbdata',
method: 'post',
data: jsonData,
height: temphei,
limit: 20,
limits: [10, 20, 30, 50, 100, 300, 500],
id: "tbdata",
toolbar: "#tbdatabar",
text: {
none: '暂无相关数据'
},
cols: [
[{
field: "number",
title: "序号",
width: "6%",
align: "left",
templet: function(data) {
return data.LAY_INDEX
}
}
, {
field: 'bh',
title: '<span style=\'color:#c00\'></span>test1',
width: '15%',
templet: function(res) { return ' ' +
'<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="pmfabh">' +
res.pmfabh +
'</button>' ;
}
} , {
field: "createtime",
title: "创建时间",
width: "10%",
align: "left"
} ]
],
page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
,
groups: 10 //只显示 1 个连续页码
/* , first: false //不显示首页
, last: false //不显示尾页*/
},
done: function(res) { //当数据渲染完后,执行的回调
//设置背景颜色
layer.closeAll();
merge(res);
}
//,skin:'line'//设置表格边框 line: 行边框风格 row:列边框风格 nob:无边框风格 ,
size: 'sm' //设置表格尺寸 sm: 小尺寸 lg: 大尺寸
});
方法:
/** 相同内容合并
* @param {Object} res
*/
function merge(res) {
var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
var columsName = ['bh'];//需要合并的列名称
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 列合并相同内容的更多相关文章
- GRIDVIEW多行多列合并单元格(合并列)
GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章: GridView多行多列合并单元格(完整代码和例子) ...
- 基于WebForm+EasyUI的业务管理系统形成之旅 -- ParamQueryGrid行、列合并(Ⅸ)
上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划查询(Ⅷ)>,主要介绍通过报表工具数据钻取,获取施工计划详细信息. 这篇我们看看ParamQueryGrid[行 ...
- oracle列合并
在很多场合,我们会须要用到oracle列合并,oracle提供了一些方法用于把某列的多行数据合并成一行. 一.10G曾经使用WMSYS.WM_CONCAT wmsys.wm_concat将字段的值 ...
- ASP.NET中重复表格列合并的实现方法(转自脚本之家)
这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...
- pyspark列合并为一行
将 dataframe 利用 pyspark 列合并为一行,类似于 sql 的 GROUP_CONCAT 函数.例如如下 dataframe : +----+---+ | s| d| +----+-- ...
- pandas列合并为一行
将dataframe利用pandas列合并为一行,类似于sql的GROUP_CONCAT函数.例如如下dataframe id_part pred pred_class v_id 0 d 0 0.12 ...
- SQL不重复查找数据及把一列多行内容拼成一行
如下表: 表名:Test ID RowID Col1 Col2 1 1 A A 2 1 B A 3 1 A B 4 1 C B 1,查找表中字段重复的只查找一次 select distinct Col ...
- DataGridView合并单元格(多行多列合并)
一.点击在拖入的显示控件(TreeList)右上方的箭头,在Treelist任务中选择数据源,添加项目数据源,依次选择数据库.数据集,新建连接,浏览选择数据库(*.mdb),依次点击 下一步,选择“表 ...
- Shell 将两个文件按列合并
file1. 1 2 2 3 3 4 4 5 5 6 file2. a b b c c d d e e f 需要把file2的第二列合并到file1,使File1并成三列. 第一种方法:paste p ...
随机推荐
- 山东浪潮超越3B4000申泰RM5120-L
龙芯解决方案 首页 > 龙芯业务 > 龙芯解决方案和产品生态 > 整机产品 > 服务器 > 详情 超越申泰RM5120-L 服务器 超越申泰RM5120-L 服务器 20 ...
- "sar"工具 利用率
LTP--linux稳定性测试 linux性能测试 ltp压力测试 余二五 2017-11-14 16:20:00 浏览1172 linux 日志 配置 内存管理 测试 脚本 性能测试 压力测试 ...
- 2019年又迎来Hi1620,鲲鹏920则是Hi1620系列的正式品牌和型号
据记者了解,2013年华为就发布了Hi1610,2014年的Hi1612是ARM64位CPU,2016年的Hi1616是首颗支持多路的ARM处理器,2019年又迎来Hi1620,鲲鹏920则是Hi16 ...
- zabbix监控之概念和安装
一.为什么要要监控 (1)在需要的时刻,提前提醒我们服务器出问题了: (2)当出问题之后,可以找到问题的根源: (3)检查网站/服务器的可用性 1.监控范畴 硬件监控.系统监控.服务监控.性能监控.日 ...
- Linux 仿真终端:SecureCRT 常用配置
SecureCRT 有两类配置选项,分别是会话选项和全局选项. 会话选项:修改配置只针对当前会话有效 全局选项:修改配置对所有会话有效 一般会先选择全局选项修改全局配置,然后选择会话选项单独修改个别会 ...
- FD_SET -(转自 kakaxia6337的专栏)
FD_ZERO,FD_ISSET这些都是套节字结合操作宏 看看MSDN上的select函数, 这是在select io 模型中的核心,用来管理套节字IO的,避免出现无辜锁定. int se ...
- SUSE12 操作系统安装
今天开发同事需要一个客户的SUSE环境,原来没有安装过这个操作系统,网络配置方面有些问题见下一篇 镜像:SLE-12-SP3-Server-DVD-x86_64-GM-DVD1.iso 安装过程: 选 ...
- LESS语法学习笔记
LESS 通过编写less文件来快速生成css文件,对css的语法进行了扩展 Less语法 注释 单行注释不会被编译,多行才会被编译 变量 less:定义变量用@ scss:定义变量用$ @num: ...
- Python中PyQuery库的使用
pyquery库是jQuery的Python实现,可以用于解析HTML网页内容,我个人写过的一些抓取网页数据的脚本就是用它来解析html获取数据的. 它的官方文档地址是:http://packages ...
- Guava Cache,Java本地内存缓存使用实践
Guava Cache,网上介绍很多,我就不赘述了. 分享一篇好的文章: Guava Cache内存缓存使用实践-定时异步刷新及简单抽象封装 Google Guava 3-缓存 在原作者基础上,我做了 ...