layui表格合并单元格

思想：layui表格合并单元格，layui并没有给出相应的解决办法；那么我们可以在前端使用js将相邻并相同的单元格合并；

1.页面代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>City3</title><link rel="stylesheet" href="/layui2.45/css/layui.css" /><script type="text/javascript" src="/layui2.45/layui.js"></script><style>.layui-table-page {text-align: center;}</style>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div>
</script><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script><script>layui.use('table', function(){var table = layui.table;var $ = layui.jquery;//引入jquery的模块//第一个实例table.render({elem: '#demo',height: 512,url: '/getCity3' //数据接口,page: true //开启分页,toolbar: '#toolbarDemo',cols: [[ //表头{field: 'id', title: 'ID', sort: true, fixed: 'left'},{field: 'name', title: '名称'},{field: 'countryCode', title: '城市代码',sort: true},{field: 'district', title: 'district'},{field: 'population', title: 'population'},{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}]],done: function (res, curr, count) {merge(res);}});function merge(res) {console.log(res.data)var data = res.data;var mergeIndex = 0;//定位需要添加合并属性的行数var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数var columsName = ['id','name','countryCode'];//需要合并的列名称var columsIndex = [0,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;}}});
</script>
</body>
</html>

2.页面效果：

有啥不懂得小伙伴们加群交流啦：852665736；本群致力于一同进步的小伙伴们，大家一起交流探讨，在陌生的城市感受温暖；

无偿免费分享源码以及技术和面试文档，更多优秀精致的源码技术栈分享请关注微信公众号：gh_817962068649

layui表格合并单元格相关推荐

layui表格合并单元格多表_layui动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格done : function(res, curr, count) { ...
layui实现表格合并单元格，设置不同背景色
最近在使用layui的过程中,遇到了表格合并单元格,设置不同背景色的问题. 在此总结,大家一起学习. 同一组新闻的底色相同,效果如下: 实现代码: <script>layui.config ...
记一次用iview实现表格合并单元格的具体操作
记一次用iview实现表格"合并"单元格的具体操作最近做项目使用iview框架做后台管理系统,第一次使用iview遇到过很多问题,有些小坑也都在网上找到解决方案了,可作为一个通用 ...
html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
【markdown】表格合并单元格
[markdown]表格合并单元格 DEMO DEMO 效果参考链接 :[markdown]表格合并单元格 DEMO <table><tr><th>属性</ ...
jquery操作表格合并单元格
$('#table_2').mergeCell({cols: [7,8,9] ///参数为要合并的列,例如[0,5],表示第0和第5列});/** * 操作表格合并单元格行 * 2016年12月1 ...
elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...
使用POI创建word表格合并单元格兼容wps
poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...
Markdown(六)——表格合并单元格增加标题
前言:之前有写过Markdown的表格记录处理标记,见Markdown语法(三)--列表&表格.但是发现这种方式不能合并单元格,对想要合并单元格的数据很不友好.好在Markdown可以支持HT ...

layui表格合并单元格

1.页面代码：

2.页面效果：

layui表格合并单元格相关推荐

最新文章

热门文章