首页 / LAYUI / layui数据表格跨行自动合并的例子

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了layui数据表格跨行自动合并的例子，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7894字，纯文字阅读大概需要12分钟。

内容图文

需求描述：

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

需求分析：

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

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

原始页面：

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数据表格跨行自动合并的例子全部内容，希望文章能够帮你解决layui数据表格跨行自动合并的例子所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/329907.html

来源：【匿名】

【上一篇】layui弹出框Tab选项卡的示例代码【下一篇】PHP+MySQL+LayUI分页查询显示

更多 ►

【layui数据表格跨行自动合并的例子】教程文章相关的互联网学习教程文章

Layui 改变数据表格样式覆盖【代码】

改变表格行高.layui-table-cell{height:40px;line-height: 36px; }改变复选框高宽和定位等等.layui-table-view .layui-form-checkbox[lay-skin="primary"] i { width: 18px; height: 18px; margin-top:10px;} 原文：https://www.cnblogs.com/xiaozhang666/p/11237317.html

layui数据表格分页加载动画,自己定义加载动画,"加载中..."【代码】【图】

记录思路,仅供参考在表格渲染完成后,在done回调函数中给分页动态加点击事件,关闭"加载中..."动画也是在 done回调函数中关闭这是我实现的思路,记录给大家参考., done: function (res, curr, count) {// 添加分页加载动画的函数 $(‘.layui-laypage > a‘).each(function(){$(this).attr(‘onclick‘,"pageLoading(this)");})top.layer.close(loadingIndex); // 渲染完成后关闭动画}/*** 分页请求的loading动画* @param {当前点击...

layui table表格表头与内容列错位问题（只有纵向滚动条的情况）【图】

版本2.4.5问题展示：存在问题：正好错位一个纵向滚动条的宽度思路：仔细观察th元素及th包裹的子元素div 如下图发现th宽度莫名的就多了5px 我就纳闷了解决方案：到table.js源码中→搜索 →纵向滚动条宽度，找到了，并按下图修改解决了解决后效果如下原文：https://www.cnblogs.com/zhinian-/p/11081282.html

layui更新表格单元格数据口,更新单元格的内容【代码】

//监听工具条table.on(‘tool(edit)‘, function(obj){var data = obj.data;if(obj.event === ‘getinvitation‘){//有个ajax更新,成功后回调函数写下面的更新//同步更新表格和缓存对应的值 obj.update({is_signin_today: ‘1‘,}); }}); 原文：https://www.cnblogs.com/fps2tao/p/9467092.html

layui数据表格跨行自动合并【代码】

1 <!DOCTYPE html>2 <html>3 <head> 4 <meta charset="utf-8">5 <title>合并行</title>6 <link href="layui/css/layui.css" rel="stylesheet" />7 </head>8 <body>9 <div class="box">10 <table class="layui-table" id="test" lay-data="{page:true,limit:50}" lay-filter="test">11 <thead>12 <tr>13 <th lay-data="{field:‘province‘,width:200}"...

Layui数据表格用法【代码】【图】

在这里介绍一下layui数据表格的简单使用，并介绍所踩的坑首先封装一个类，将数据表格所需要的属性封装在这里 1publicclass MsgJson<T> where T:class,new()2 {3//错误提示代号 4publicint code { get; set; }5//错误提示消息 6publicstring msg { get; set; }7//表格中的记录总数 8publicint count { get; set; }9//表格中的所有记录10public IEnumerable<T> data { get; set; } 11 }在Controller中创建一个ActionResult类方...

使用webapi绑定layui数据表格完整增删查改记录

因为每次给layui数据表格绑定数据或者类似操作的时候总要重新做一遍而且忘记很多东西所以干脆写博客把相关东西记录下来便于查阅和修正以下是一个完整的数据表格i项目的增删改查案例先来看后台LayuiContext db = new LayuiContext(); Result res = null; #region 分页查询/查询参数为姓名/性别/班级利用if添加判断条件 [HttpGet] public IHttpActionResult StudentList2(int page, int limit, s...

后台返回数据渲染Layui表格【代码】

1、layui表格数据返回的格式是有限制的，这时候可以自己定义一个类来接收数据库查出来的结果然后再来渲染layui表格，下面自己定义一个类,这个类定义了两个方法publicclass JsonToken {publicint code;public String msg;public Object data;publicint count;publicint pages; //返回数据符合layui需要的数据格式；第一个是状态码，0表示成功，第二个是提示信息，第三个是要返回的数据，第四个是数据的总数量public JsonToken(int c...

00010 - layui 表格table 高度自适应充满页面

var tableIns = table.render({elem:‘#taskOptLogListTable‘,url: ctx+‘/task/taskOptLog/query‘,error:admin.error,cellMinWidth: 80,toolbar: ‘#taskOptLogListTable-toolbar‘,defaultToolbar: [{title: ‘条件过滤‘ //标题,layEvent: ‘searchDiv‘ //事件名，用于 toolbar 事件中使用,icon: ‘layui-icon-search‘ //图标类名},‘filter‘, ‘print‘, ‘exports‘],cols: [[{field:‘userName‘, title: ‘操作人‘, a...

Layui我提交表单时，table.reload(),表格会请求2次，是为什么？

重载两次是因为搜索按钮用的是button改成<a class="layui-btn" data-type="reload">搜索</a>就可以了虽然我也不知道是什么原因原文：https://www.cnblogs.com/uzxin/p/11907012.html

datatable转layui表格【偏原理】

如题这个类负责把datatable转换为layui表格可以显示的内容。适合配合表格url字段的webapi服务端，为其返回响应字符串。代码如下：using System;using System.Web;using System.Text;using System.Data;using System.Net.Http;namespace MyClass{ public class Layui_helper { static string datatable2json(DataTable table) { StringBuilder jsonBuilder = new StringBuilder(); jsonB...

00028-layui 表单有子列表，如何动态新增和保存（表格table行编辑）？【代码】

html: <div ><div ><div >资料清单</div><div ><table lay-filter="serviceMaterialListTable"></table><script type="text/html" ><div ><button data-type="addMaterial">添加</button></div></script><script type="text/html" ><%--<a lay-event="editMaterial">编辑</a>--%><a lay-event="delMaterial">删除</a></script><script type="text/html" ><select name="type" lay-filter="service_material_type" autocompl...

layui中数据表格table 获取后台对象中包含的对象数据

table.render({ elem: #test ,url:userManager/doList?userName=+name ,cols: [[ {field:userId, title:ID, width:80, fixed: left, unresize: true, sort: true} ,{field:userName, title:用户名称, width:150} ,{field:userCode, title:用户编号, width:150} ,{field:phone, title:联系电话, width:150} ,{field:dm...

layui 数据表格点击分页按钮监听事件的实例【图】

找了很多关于表格分页点击事件请求， table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起（我也不想写分页的，但是后台讲数据多，要加分页，被逼无奈，想了一个方法）先上图代码 .html <div><table class="layui-hide" id="test" lay-filter="demo"></table><div id="page"></div> </div>.js //页面第一次请求默认 1页 10条 function dataLists(pageNum, numPerPage) {$.post(Url +...

解决layui表格内文本超出隐藏的问题【图】

只需要更改样式即可图片：代码如下 .layui-table-cell{height:auto;overflow:visible;text-overflow:inherit; 以上这篇解决layui表格内文本超出隐藏的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

首页 / LAYUI / layui数据表格跨行自动合并的例子

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【layui数据表格跨行自动合并的例子】教程文章相关的互联网学习教程文章

Layui 改变数据表格样式覆盖【代码】

layui数据表格分页加载动画,自己定义加载动画,"加载中..."【代码】【图】

layui table表格表头与内容列错位问题（只有纵向滚动条的情况）【图】

layui更新表格单元格数据口,更新单元格的内容【代码】

layui数据表格跨行自动合并【代码】

Layui数据表格用法【代码】【图】

使用webapi绑定layui数据表格完整增删查改记录

后台返回数据渲染Layui表格【代码】

00010 - layui 表格table 高度自适应充满页面

Layui我提交表单时，table.reload(),表格会请求2次，是为什么？

datatable转layui表格【偏原理】

00028-layui 表单有子列表，如何动态新增和保存（表格table行编辑）？【代码】

layui中数据表格table 获取后台对象中包含的对象数据

layui 数据表格点击分页按钮监听事件的实例【图】

解决layui表格内文本超出隐藏的问题【图】

LAYUI - 相关标签

数据表 - 相关标签

自动 - 相关标签

LAYUI - 最新教程

LAYUI - 最热教程