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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论