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

 

具體思路：

 

一、首先咱們須要先把table表格數據字段設置成template

二、在頁面上設置模板

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

三、經過特殊元素標記將此數據追加到對應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); }

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

//數組豎向排列
  //[[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; }

 

最終渲染結構如圖：

 

 

 

切記：此案例不支持多項嵌套 ！寫的很差還請見諒。若有問題能夠諮詢我qq：2481494428

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

 

原文出處：https://www.cnblogs.com/nianzhilian/p/12403055.html