layui数据表格跨行自动合并,并自动调整固定列的高度

原创  微微一笑抽了筋   2020-01-07   670人阅读  1 条评论

之前做过的一个功能,需要将layui的表格数据行合并,于是在百度找了很多layui数据表格跨行自动合并的方法,经过多次的尝试,最后选择了下面这个方法。写完后发现最后一列的固定列的高度跟表格列相差太大,所以又对固定列的高度进行了处理。

/**layui合并单元格**/
function merge(data,columsName,columsIndex) {
    var mergeIndex = 0;//定位需要添加合并属性的行数
    var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
    //循环所有要合并的列
    for (var k = 0; k < columsName.length; k++) {
        var trArr = $(".layui-table-body>.layui-table").find("tr"); //所有行
        //循环表格当前的数据
        for (var i = 1; i < res.data.length; i++) { 
           var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
           var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
           //后一行的值与前一行的值做比较,相同就需要合并
           if (data[i][columsName[k]] === data[i-1][columsName[k]]) { 
               mark += 1;
               //相同列的第一列增加rowspan属性
               tdPreArr.each(function () {
                   $(this).attr("rowspan", mark);
               });
               //当前行隐藏
               tdCurArr.each(function () {
                   $(this).css("display", "none");
               });
           }else {
               mergeIndex = i;
               mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
           }
       }
       mergeIndex = 0;
       mark = 1;
    }
    //合并表格数据后,改变固定列的高度
    $(".layui-table-main tr").each(function (index ,val) {
        $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
    });
}

调用:只需在done回调函数执行以下方法

done: function(res, curr, count){
    //为了避免出现相同床位或者相同性别的患者被合并,所以第一个与第四个合并的列名称改成了容易区分的字段
    var columsName = ['sickno','sickno','sickname','sickname'];//需要合并的列名称
    var columsIndex = [0,1,2,3];//需要合并的列索引值
    merge(res.data,columsName,columsIndex);
});
下面是合并单元格之后的样式:

截图.png


注:以上方法都是在百度上找的,实际开发的时候整理了一下。


    本文地址:https://www.lee2333.com/?id=6
    版权声明:本文为原创文章,版权归 微微一笑抽了筋 所有,欢迎分享本文,转载请保留出处!

    发表评论


    表情

    评论列表

    1. 华仔部落
      华仔部落  @回复

      不错,很有用