layui如何合并数据表格

layui作为一款现在非常流行的UI框架,相信很多的小伙伴们都用过吧。其中的数据表格在前端调用中,更是节省了不少重复书写获取设置接口数据的时间,但是有些情况单靠官方的档案还是无法满足我们的工作需求的,如何并单元格一类的操作,官方档案中只有表头合并的操作文档,但是我们遇到更多的是表格内部的合并,今天小编就来为大家分享下这方面的心得。

如下图所示:

永利棋牌这是一份病人的手术用药单,大部分的病人取药可能到要好几种,但是如果用官方文档他原来的数据表格就会像下图。即使是相同的病人也会用很多不同条数的信息,病人的信息很多在浏览时很不方便。

1.jpg

小编说实话一开始也很懵,后来在网上找到了关于layui的高手。他的大体思路应该是:这个应该先是获取td中所有的数量,然后获取每个td的值,然后再获取下个tr中相同位置的td值如果值相同,时期合并并获取父级tr的高度,同时除了他之外的其他td都隐藏,代码如下:

 layui.use('table', function(){

永利棋牌        var table = layui.table;

        table.reload('test2', {

永利棋牌           url: '',//你的接口

永利棋牌           done: function(res, curr, count){

            console.log(res);

永利棋牌            layuiRowspan(['fname','PATIENT_NAME','PATIENT_MRN','PATIENT_SEX','age'],1);

            layuiRowspan(res.data,1);//支持数组

            layuiRowspan(count,1,true);

永利棋牌          }

永利棋牌        });

    });

}


永利棋牌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 = [];

  console.log(fieldNameTmp,index,flag);

  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);

  }

}

结果如下图所示:

1.jpg

这里只需要在数据表格渲染的时候改成自己的东西即可,其他的内容说实话有些复杂,有能开发出更多用法的小伙伴欢迎联系/a>小编,小编在这里等你哦♥♥♥

关键词:
返回列表

相关文章

相关案例