久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

19
2019/12

layui如何合并數(shù)據(jù)表格

發(fā)布時(shí)間:2019-12-19 17:22:05
發(fā)布者:會(huì)飛的魚(yú)
瀏覽量:
0

layui作為一款現(xiàn)在非常流行的UI框架,相信很多的小伙伴們都用過(guò)吧。其中的數(shù)據(jù)表格在前端調(diào)用中,更是節(jié)省了不少重復(fù)書(shū)寫獲取設(shè)置接口數(shù)據(jù)的時(shí)間,但是有些情況單靠官方的檔案還是無(wú)法滿足我們的工作需求的,如何并單元格一類的操作,官方檔案中只有表頭合并的操作文檔,但是我們遇到更多的是表格內(nèi)部的合并,今天文匯軟件小編就來(lái)為大家分享下這方面的心得。

如下圖所示:

這是一份病人的手術(shù)用藥單,大部分的病人取藥可能到要好幾種,但是如果用官方文檔他原來(lái)的數(shù)據(jù)表格就會(huì)像下圖。即使是相同的病人也會(huì)用很多不同條數(shù)的信息,病人的信息很多在瀏覽時(shí)很不方便。

1.jpg

小編說(shuō)實(shí)話一開(kāi)始也很懵,后來(lái)在網(wǎng)上找到了關(guān)于layui的高手。他的大體思路應(yīng)該是:這個(gè)應(yīng)該先是獲取td中所有的數(shù)量,然后獲取每個(gè)td的值,然后再獲取下個(gè)tr中相同位置的td值如果值相同,時(shí)期合并并獲取父級(jí)tr的高度,同時(shí)除了他之外的其他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);//支持?jǐn)?shù)組

            layuiRowspan(count,1,true);

          }

        });

    });

}


var execRowspan = function(fieldName,index,flag){

  // 1為不凍結(jié)的情況,左側(cè)列為凍結(jié)的情況

  let fixedNode = index=="1"?$(".layui-table-body")[index - 1]:(index=="3"?$(".layui-table-fixed-r"):$(".layui-table-fixed-l"));

  // 左側(cè)導(dǎo)航欄不凍結(jié)的情況

  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的個(gè)數(shù)和種類

  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;//以前列單元格為基礎(chǔ)獲取的最大合并數(shù)

  let finalNextIndex;//獲取其下第一個(gè)不合并單元格的index

  let finalNextKey;//獲取其下第一個(gè)不合并單元格的值

  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;//獲取下一個(gè)單元格的值

    let nextIndex = i+1;

    let tdNum = childFilterTextObj[key];

    let curNum = maxNum

    if(canRowspan){

      for(let j =1;j<=curNum&&(i+j

        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){//設(shè)置td內(nèi)的div.rowspan高度適應(yīng)合并后的高度

        $(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;

    }

  }

}

//合并數(shù)據(jù)表格行

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

    execRowspan(fieldName[i],index,flag);

  }

}

結(jié)果如下圖所示:

1.jpg

這里只需要在數(shù)據(jù)表格渲染的時(shí)候改成自己的東西即可,其他的內(nèi)容說(shuō)實(shí)話有些復(fù)雜,有能開(kāi)發(fā)出更多用法的小伙伴歡迎聯(lián)系文匯軟件小編,小編在這里等你哦???

返回列表