layui作為一款現在非常流行的UI框架，相信很多的小伙伴們都用過吧。其中的數據表格在前端調用中，更是節省了不少重復書寫獲取設置接口數據的時間，但是有些情況單靠官方的檔案還是無法滿足我們的工作需求的，如何并單元格一類的操作，官方檔案中只有表頭合并的操作文檔，但是我們遇到更多的是表格內部的合并，今天文匯軟件小編就來為大家分享下這方面的心得。
如下圖所示：
這是一份病人的手術用藥單，大部分的病人取藥可能到要好幾種，但是如果用官方文檔他原來的數據表格就會像下圖。即使是相同的病人也會用很多不同條數的信息，病人的信息很多在瀏覽時很不方便。
小編說實話一開始也很懵，后來在網上找到了關于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 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){//設置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 execRowspan(fieldName[i],index,flag); } } 結果如下圖所示： 這里只需要在數據表格渲染的時候改成自己的東西即可，其他的內容說實話有些復雜，有能開發出更多用法的小伙伴歡迎聯系文匯軟件小編，小編在這里等你哦???
