tableMerge 表格列自動合併

一、轉載地址

• tableMerge 表格列自動合併 去看看
• 在線demo： http://yelog.org/layui-table-merge/
• github地址： https://github.com/yelog/layui-table-merge

二、轉載內容

1、效果

• 合併後表格
  
• 原始表格
  

2、相關代碼

1）、引入自定義模塊 tableMerge.js

// 自定義模塊
layui.config({
    base: 'module/'
}).extend({
    tableMerge: 'tableMerge'
});

2）、表格渲染

table.render({
    elem: '#mergeTable'
    ,height: 550
    ,url: 'data.json'
    ,limit: 30
    ,page: true
    ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field:'poetry', title:'詩詞', width:188, fixed: 'left'}
        ,{field:'name', merge: true, title:'詩人', width:100, fixed: 'left'}              // 根據 當前列 相同值 的自動合併
        ,{field:'type', merge: ['name','type'], title:'類型', width:100, fixed: 'left'}   // 根據 name值 分組後，再以 type值 相同的合併對應行
        ,{field:'type', merge: true, title:'類型', width:100}                             // 根據 當前列 相同值 的自動合併
        ,{field:'dynasty', title:'朝代', merge: ['name', 'type'], width:150}              // 根據 name值 分組後，再以 type值 相同的自動合併
        ,{field:'dynasty', title:'朝代', merge: 'name', width:150}                        // 根據 name值 相同的自動合併
        ,{field:'dynasty', title:'朝代', merge: true, width:150}                          // 根據 當前列 相同值 的自動合併
        ,{field:'sentences', title:'名句', width:400}
        ,{field:'sentences', title:'名句', width:400}
        ,{field:'sentences', title:'名句', width:400}
        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
    ,done: function(){
        tableMerge.render(this)
    }
});

3）、tableMerge.js

/**
 * Created by YujieYang.
 * @name:  子表格擴展
 * @author: 楊玉傑
 * @version 1.0
 */
layui.define(['table'], function (exports) {

    var $ = layui.jquery;

    // 封裝方法
    var mod = {
        /**
         * 渲染入口
         * @param myTable
         */
        render: function (myTable) {
            var tableBox = $(myTable.elem).next().children('.layui-table-box'),
                $main = $(tableBox.children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                $fixLeft = $(tableBox.children('.layui-table-fixed-l').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                $fixRight = $(tableBox.children('.layui-table-fixed-r').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                cols = myTable.cols[0], mergeRecord = {};

            for (let i = 0; i < cols.length; i++) {
                var item3 = cols[i], field=item3.field;
                if (item3.merge) {
                    var mergeField = [field];
                    if (item3.merge !== true) {
                        if (typeof item3.merge == 'string') {
                            mergeField = [item3.merge]
                        } else {
                            mergeField = item3.merge
                        }
                    }
                    mergeRecord[i] = {mergeField: mergeField, rowspan:1}
                }
            }

            $main.each(function (i) {

                for (var item in mergeRecord) {
                    if (i==$main.length-1 || isMaster(i, item)) {
                        $(this).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan).css('position','static');
                        $fixLeft.eq(i).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan).css('position','static');
                        $fixRight.eq(i).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan).css('position','static');
                        mergeRecord[item].rowspan = 1;
                    } else {
                        $(this).children('[data-key$="-'+item+'"]').remove();
                        $fixLeft.eq(i).children('[data-key$="-'+item+'"]').remove();
                        $fixRight.eq(i).children('[data-key$="-'+item+'"]').remove();
                        mergeRecord[item].rowspan +=1;
                    }
                }
            })

            function isMaster (index, item) {
                var mergeField = mergeRecord[item].mergeField;
                var dataLength = layui.table.cache[myTable.id].length;
                for (var i=0; i<mergeField.length; i++) {

                    if (layui.table.cache[myTable.id][dataLength-2-index][mergeField[i]]
                        !== layui.table.cache[myTable.id][dataLength-1-index][mergeField[i]]) {
                        return true;
                    }
                }
                return false;
            }

        }
    };

    // 輸出
    exports('tableMerge', mod);
});

4）、待渲染的 json數據

{
  "code": 0,
  "msg": "",
  "count": 300,
  "data": [
    {
      "poetry": "《江畔獨步尋花·其六》",
      "name": "杜甫",
      "dynasty": "唐代",
      "type": "絕句",
      "sentences": "留連戲蝶時時舞，自在嬌鶯恰恰啼。"
    },
    {
      "poetry": "《絕句》",
      "name": "杜甫",
      "dynasty": "唐代",
      "type": "絕句",
      "sentences": "窗含西嶺千秋雪，門泊東吳萬里船。"
    },
    {
      "poetry": "《秋興八首（其一）》",
      "name": "杜甫",
      "dynasty": "唐代",
      "type": "七律",
      "sentences": "叢菊兩開他日淚，孤舟一系故園心。"
    },
    {
      "poetry": "《蜀相》",
      "name": "杜甫",
      "dynasty": "唐代",
      "type": "七律",
      "sentences": "出師未捷身先死，長使英雄淚滿襟。"
    },
    {
      "poetry": "《客至》",
      "name": "杜甫",
      "dynasty": "唐代",
      "type": "七律",
      "sentences": "花徑不曾緣客掃，蓬門今始爲君開"
    },
    {
      "poetry": "《登金陵鳳凰臺》",
      "name": "李白",
      "dynasty": "唐代",
      "type": "七律",
      "sentences": "鳳凰臺上鳳凰遊，鳳去臺空江自流。"
    },
    {
      "poetry": "《行路難·其一》",
      "name": "李白",
      "dynasty": "唐代",
      "type": "七律",
      "sentences": "長風破浪會有時，直掛雲帆濟滄海。"
    },
    {
      "poetry": "《《望廬山瀑布》",
      "name": "李白",
      "dynasty": "唐代",
      "type": "七絕",
      "sentences": "飛流直下三千尺，疑是銀河落九天。"
    },
    {
      "poetry": "《望天門山》",
      "name": "李白",
      "dynasty": "唐代",
      "type": "七絕",
      "sentences": "兩岸青山相對出，孤帆一片日邊來。"
    },
    {
      "poetry": "《清明》",
      "name": "杜牧",
      "dynasty": "唐代",
      "type": "七絕",
      "sentences": "借問酒家何處有，牧童遙指杏花村。"
    },
    {
      "poetry": "《江南春》",
      "name": "杜牧",
      "dynasty": "唐代",
      "type": "七絕",
      "sentences": "千里鶯啼綠映紅，水村山郭酒旗風。"
    },
    {
      "poetry": "《阿房宮賦》",
      "name": "杜牧",
      "dynasty": "唐代",
      "type": "賦",
      "sentences": "滅六國者六國也，非秦也；族秦者秦也，非天下也。"
    }
  ]
}