layui table表格單元格動態合並，並設置隔行變色

layui table表格單元格動態合並，並設置隔行變色，此代碼只針對嵌套數組只有一層的時候有效，多個數組嵌套還在冥想當中！！

需求描述

我們知道在layui插件官方平台有個可以無限極單元格合並的模塊，但是其核心理念是針對多個相同數據進行合並，並且也非常好用，數據結構不存在嵌套結構。

但是偶爾數據也有嵌套的時候，哪怕只有一層數據結構嵌套的話，上面的方法就不好使了，並且我們在不拋棄layui.table的時候照樣可以使單元格進行合並，那就請看下圖：

 

 

 整個代碼如下：

 

layui.define (function (exports) {
  var $ = layui.jquery,
    mod = {
      render: function (myTable) {
        var tableBox = $ (myTable.elem).next ().children ('.layui-table-box'),
          $main = tableBox
            .children ('.layui-table-body')
            .children ('table')
            .children ('tbody')
            .children ('*[data-index]');
        $main.each (function (pindex) {
          var td = $ (this).children ();
          td.each (function (index) {
            var pp = $ (this).find ('p');
            pp.parents ('td').addClass ('abc');
            if (!pp.parents ('td').siblings ().hasClass ('abc')) {
              pp.parents ('td').siblings ().attr ('rowspan', pp.length);
            } else {
              pp.parents ('td').removeAttr ('rowspan');
            }
          });

          if ($ (this).find ('td').hasClass ('abc')) {
            var hasAbc = $ (this).find ('.abc'), arr = [], len = 0;
            hasAbc.each (function (im) {
              var iem = $ (this).find ('p');
              len = iem.length;
              iem.each (function (ia, item) {
                arr.push (item);
              });
              $ (this).find ('P:gt(0)').remove ();
            });
            var dataArr = spFn (arr, len);

            //生成tr
            dataArr.reverse ().forEach (function (item, index) {
              if (index != dataArr.length - 1) {
                var str = '<tr flag=' + pindex + '>';
                for (var i = 0; i < item.length; i++) {
                  str += "<td align='center'>";
                  str += "<div class='layui-table-cell'>";
                  str += $ (item[i]).html ();
                  str += '</div>';
                  str += '</td>';
                }
                str += '</tr>';

                if (td.find ('p').parents ('tr').length > 0) {
                  td.find ('p').parents ('tr').next ().before (str);
                }
              }
            });
          }
        });
        var $allmain = tableBox
          .children ('.layui-table-body')
          .children ('table')
          .children ('tbody')
          .children ('tr');
        var findTrBs = function (flag) {
          var className;
          $allmain.each (function () {
            if ($ (this).attr ('data-index') == flag) {
              className = $ (this).attr ('class');
            }
          });
          return className;
        };
        //單元格合並以后 設置隔行變色
        $allmain.each (function (i) {
          if ($ (this).attr ('data-index')) {
            if ($ (this).attr ('data-index') % 2 == 0) {
              $ (this).addClass ('even');
            } else {
              $ (this).addClass ('odd');
            }
          } else {
            $ (this).addClass (findTrBs ($ (this).attr ('flag')));
          }
        });
      },
    };
  
  exports ('tableMerge', mod);
});

 

具體思路：

 

1、首先我們需要先把table表格數據字段設置成template

2、在頁面上設置模板

<script type="text/html" id="nownr">
    {{# layui.each(d.corrNowConArr,function(index,item){ }}
      <p>{{item.con}}</p>
    {{# });}}
  </script>

3、通過特殊元素標記將此數據追加到對應tr的下面，此過程我們需要做一些轉換

//將數組分割成 幾個幾個組合的多維數組
  //[1,2,3,4] 組合成[[1,2],[3,4]]
  function spFn (arr, len) {
    const arr1 = arr.reduce ((init, item, index) => {
      index % len === 0
        ? init.push ([item])
        : init[init.length - 1].push (item);
      return init;
    }, []);
    return senFun (arr1);
  }

4、將遍歷好的元素標記按照 縱向排列

//數組豎向排列
  //[[1,2],[3,4]] 組合成[[1,3],[2,4]]
  function senFun (data) {
    let final = [];
    let length = Math.min (...data.map (arr => arr.length));
    for (let i = 0; i < length; i++) {
      let tmp = [];
      for (let j = 0; j < data.length; j++) {
        tmp.push (data[j][i]);
      }
      final.push (tmp);
    }
    return final;
  }

 

最終渲染結構如圖：

 

 

 

切記：此案例不支持多項嵌套 ！寫的不好還請見諒。如有問題可以留言

下面奉上支持多層單元格合並的鏈接：https://fly.layui.com/extend/tableMerge/