欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-23 19:52:33
需求描述: 在数据表格中,对于按某个分类展示数据其分类下又有多个细分的嵌套细分项,如省市区昵称,省下面有多个市,市下面有多个区,区下面有昵称,需要实现跨行合并,且操作按钮...

需求描述:

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

需求分析:

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

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

原始页面:

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数据表格跨行自动合并的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。