layui合并單元格各種辦法

利用jQuery表格單元格合并插件tablesMergeCell.js也可直接實現(xiàn)layui單元格合并

下載地址

layui 動態(tài)表格之合并單元格

參考資料:
https://fly.layui.com/jie/32444/
https://fly.layui.com/jie/27432/
https://fly.layui.com/jie/24259/
https://blog.csdn.net/testspring1/article/details/82377711

 layui.use('table', function(){
          var table = layui.table;
           table.render({
            elem: '#demos'
            ,url:WEB_CONTEXT+'#'
            ,cols: [str] ,
             done: function (res, curr, count) {
                merge(res, curr, count);
                } 
          })
        })
  function merge(res, curr, count) {
             var data = res.data;
            var mergeIndex = 0;//定位需要添加合并屬性的行數(shù)
            var mark = 1; //這里涉及到簡單的運算镶蹋,mark是計算每次需要合并的格子數(shù)
            var columsName = ['','proNo','content','moldtype'];//需要合并的列名稱
            var columsIndex = [0,1,2,3];//需要合并的列索引值
            
            for (var k = 0; k < columsName.length; k++)//這里循環(huán)所有要合并的列
                {
                var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                for (var i = 1; i < res.data.length; i++) { //這里循環(huán)表格當前的數(shù)據(jù)
                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]]) { //后一行的值與前一行的值做比較,相同就需要合并
                    console.log(data[i][columsName[k]]);
                    console.log(data[i - 1][columsName[k]]);
                    mark += 1;
                    tdPreArr.each(function () {//相同列的第一列增加rowspan屬性
                    $(this).attr("rowspan", mark);
                    });
                    tdCurArr.each(function () {//當前行隱藏
                    $(this).css("display", "none");
                    });
                    }else {
                    mergeIndex = i;
                    mark = 1;//一旦前后兩行的值不一樣了趋翻,那么需要合并的格子數(shù)mark就需要重新計算
                    }
                }
            } 
        }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末醉蚁,一起剝皮案震驚了整個濱河市燃辖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌网棍,老刑警劉巖郭赐,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異确沸,居然都是意外死亡捌锭,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進店門罗捎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來观谦,“玉大人,你說我怎么就攤上這事桨菜』碜矗” “怎么了?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵倒得,是天一觀的道長泻红。 經(jīng)常有香客問我,道長霞掺,這世上最難降的妖魔是什么谊路? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮菩彬,結(jié)果婚禮上缠劝,老公的妹妹穿的比我還像新娘。我一直安慰自己骗灶,他們只是感情好惨恭,可當我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著耙旦,像睡著了一般脱羡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上免都,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天锉罐,我揣著相機與錄音,去河邊找鬼琴昆。 笑死氓鄙,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的业舍。 我是一名探鬼主播抖拦,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼升酣,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了态罪?” 一聲冷哼從身側(cè)響起噩茄,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎复颈,沒想到半個月后绩聘,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡耗啦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年凿菩,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片帜讲。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡衅谷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出似将,到底是詐尸還是另有隱情获黔,我是刑警寧澤,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布在验,位于F島的核電站玷氏,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏腋舌。R本人自食惡果不足惜盏触,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望侦厚。 院中可真熱鬧耻陕,春花似錦、人聲如沸刨沦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽想诅。三九已至,卻和暖如春岛心,著一層夾襖步出監(jiān)牢的瞬間来破,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工忘古, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留徘禁,地道東北人。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓髓堪,卻偏偏與公主長得像送朱,于是被迫代替她去往敵國和親娘荡。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內(nèi)容