首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

layui数据表格跨行自动合并的例子

Posted in Javascript onSeptember 02, 2019

需求描述：

在数据表格中，对于按某个分类展示数据其分类下又有多个细分的嵌套细分项，如省市区昵称，省下面有多个市，市下面有多个区，区下面有昵称，需要实现跨行合并，且操作按钮以分类为单位（即操作按钮需按照分类合并）。

需求分析：

除操作列外，以左边列为基础单位进行跨行合并，当前单元格合并数<=左边列；

操作列可以选择任意列作为基础单位（这个待完善）。

原始页面：

layui数据表格跨行自动合并的例子

处理页面：

layui数据表格跨行自动合并的例子

方法：

var execRowspan = function(fieldName,index,flag){
 // 1为不冻结的情况，左侧列为冻结的情况
 let fixedNode = index=="1"?$(".layui-table-body")[index - 1]:(index=="3"?$(".layui-table-fixed-r"):$(".layui-table-fixed-l"));
 // 左侧导航栏不冻结的情况
 let child = $(fixedNode).find("td");
 let childFilterArr = [];
 // 获取data-field属性为fieldName的td
 for(let i = 0; i < child.length; i++){
 if(child[i].getAttribute("data-field") == fieldName){
  childFilterArr.push(child[i]);
 }
 }
 // 获取td的个数和种类
 let childFilterTextObj = {};
 for(let i = 0; i < childFilterArr.length; i++){
 let childText = flag?childFilterArr[i].innerHTML:childFilterArr[i].textContent;
 if(childFilterTextObj[childText] == undefined){
  childFilterTextObj[childText] = 1;
 }else{
  let num = childFilterTextObj[childText];
  childFilterTextObj[childText] = num*1 + 1;
 }
 }
 let canRowspan = true;
 let maxNum;//以前列单元格为基础获取的最大合并数
 let finalNextIndex;//获取其下第一个不合并单元格的index
 let finalNextKey;//获取其下第一个不合并单元格的值
 for(let i = 0; i < childFilterArr.length; i++){
 (maxNum>9000||!maxNum)&&(maxNum = $(childFilterArr[i]).prev().attr("rowspan")&&fieldName!="8"?$(childFilterArr[i]).prev().attr("rowspan"):9999);
 let key = flag?childFilterArr[i].innerHTML:childFilterArr[i].textContent;//获取下一个单元格的值
 let nextIndex = i+1;
 let tdNum = childFilterTextObj[key];
 let curNum = maxNum<tdNum?maxNum:tdNum;
 if(canRowspan){
  for(let j =1;j<=curNum&&(i+j<childFilterArr.length);){//循环获取最终合并数及finalNext的index和key
  finalNextKey = flag?childFilterArr[i+j].innerHTML:childFilterArr[i+j].textContent;
  finalNextIndex = i+j;
  if((key!=finalNextKey&&curNum>1)||maxNum == j){
   canRowspan = true;
   curNum = j;
   break;
  }
  j++;
  if((i+j)==childFilterArr.length){
   finalNextKey=undefined;
   finalNextIndex=i+j;
   break;
  }
  }
  childFilterArr[i].setAttribute("rowspan",curNum);
  if($(childFilterArr[i]).find("div.rowspan").length>0){//设置td内的div.rowspan高度适应合并后的高度
  $(childFilterArr[i]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent");
  $(childFilterArr[i]).find("div.layui-table-cell")[0].style.height= curNum*38-10 +"px";
  }
  canRowspan = false;
 }else{
  childFilterArr[i].style.display = "none";
 }
 if(--childFilterTextObj[key]==0|--maxNum==0|--curNum==0|(finalNextKey!=undefined&&nextIndex==finalNextIndex)){//||(finalNextKey!=undefined&&key!=finalNextKey)
  canRowspan = true;
 }
 }
}
//合并数据表格行
var layuiRowspan = function(fieldNameTmp,index,flag){
 let fieldName = [];
 if(typeof fieldNameTmp == "string"){
 fieldName.push(fieldNameTmp);
 }else{
 fieldName = fieldName.concat(fieldNameTmp);
 }
 for(let i = 0;i<fieldName.length;i++){
 execRowspan(fieldName[i],index,flag);
 }
}

使用：

HTML：

<div class="box">
<table class="layui-table" id="test" lay-data="{page:true,limit:50}" lay-filter="test">
 <thead>
 <tr>
 <th lay-data="{field:'province', width:200}">省</th>
 <th lay-data="{field:'city', width:200}">市</th>
 <th lay-data="{field:'zone', width:200}">区</th>
 <th lay-data="{field:'username', width:200}">昵称</th>
 <th lay-data="{field:'joinTime', width:150}">加入时间</th>
 <th lay-data="{field:'sign', minWidth: 180}">签名</th>
 <th lay-data="{field:'8',align:'right'}">基本操作</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>浙江</td>
 <td>杭州</td>
 <td>西湖区</td>
 <td>贤心1</td>
 <td>2016-11-28</td>
 <td>人生就像是一场修行 A</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 <tr>
 <td>浙江</td>
 <td>这个</td>
 <td>西湖区</td>
 <td>贤心2</td>
 <td>2016-11-29</td>
 <td>人生就像是一场修行 B</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 <tr>
 <td>浙江</td>
 <td>丽水</td>
 <td>莲都区</td>
 <td>贤心3</td>
 <td>2016-11-30</td>
 <td>人生就像是一场修行 C</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 <tr>
 <td>浙江</td>
 <td>丽水</td>
 <td>莲都区</td>
 <td>贤心3</td>
 <td>2016-19-30</td>
 <td>人生就像是一场修行 C</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 <tr>
 <td>浙江</td>
 <td>位置</td>
 <td>莲都区</td>
 <td>贤心3</td>
 <td>2016-11-30</td>
 <td>人生就像是一场修行 C</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 <tr>
 <td>湖北</td>
 <td>位置</td>
 <td>莲都区</td>
 <td>贤心3</td>
 <td>2016-11-30</td>
 <td>人生就像是一场修行 C</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 <tr>
 <td>湖北</td>
 <td>这个</td>
 <td>1区</td>
 <td>贤心3</td>
 <td>2016-11-30</td>
 <td>人生就像是一场修行 C</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 <tr>
 <td>湖北</td>
 <td>这个</td>
 <td>1区</td>
 <td>贤心3</td>
 <td>2016-11-30</td>
 <td>人生就像是一场修行 C</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 <tr>
 <td>湖北</td>
 <td>这个</td>
 <td>1区</td>
 <td>贤心3</td>
 <td>2016-11-30</td>
 <td>人生就像是一场修行 B</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 <tr>
 <td>湖北</td>
 <td>这个</td>
 <td>1区</td>
 <td>贤心</td>
 <td>2016-11-30</td>
 <td>人生就像是一场修行 B</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 <tr>
 <td>湖北</td>
 <td>这个</td>
 <td>1区</td>
 <td>贤心</td>
 <td>2016-11-30</td>
 <td>人生就像是一场修行 C</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 <tr>
 <td>湖北</td>
 <td>这个</td>
 <td>1区</td>
 <td>贤心</td>
 <td>2016-11-30</td>
 <td>人生就像是一场修行 D</td>
 <td>
  <div class="layui-btn-group" style="overflow:visible;">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
 </td>
 </tr>
 </tbody>
</table>
 </div>
layui.use('table', function(){
  var table = layui.table;
  table.init('test',{done:function(res,curr,count){
   layuiRowspan('province',1);
   layuiRowspan(['city','zone','username','joinTime','sign'],1);//支持数组
   layuiRowspan("8",1,true);
  }
  });})

以上这篇layui数据表格跨行自动合并的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

layui数据表格跨行自动合并的例子

- Author -

故事佛小妞

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
JavaScript驾驭网页－获取网页元素
Mar 24 Javascript
node.js从数据库获取数据
May 08 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
fastadmin中调用js的方法
May 14 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
Vue form表单动态添加组件实战案例
Sep 02 #Javascript
小程序和web画三角形实现解析
Sep 02 #Javascript
vue-cli随机生成port源码的方法
Sep 02 #Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 #Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 #Javascript
js中比较两个对象是否相同的方法示例
Sep 02 #Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 #Javascript
鲲鹏(1) PIL(1) GCN(1) 验证码(1) Pytesseract(1) 柱状图(1) 裁剪图片(1) SFTP(3) Python(3) Flask(2)
You might like
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
js jquery数组介绍
2012/07/15 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
python解析多层json操作示例
2019/12/30 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
python 写一个水果忍者游戏
2021/01/13 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
1688平价精选商城：阿里集团旗下，工厂出厂价格直销
2017/04/24 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
商场主管竞聘书
2014/03/31 职场文书
法学自荐信
2014/06/20 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
求职信如何撰写？
2019/05/22 职场文书