layui table 根据表格相同ID合并表格内的相同字段

//前端展示

//①提前在JavaScript做加载
 layui.config({
        base: '../js/'
    }).extend({
        tableMerge: 'tableMerge'
    });
  //加载页面右边表格
    function binddata() {
        //加载条件
        var data = {
            "clientid": clientid,
            "timestamp": timestamp,
            "token": token,
            "smid": smid,
            "cmd": "findservicesanditems",
            "serviceitemname": $("#serviceitemname").val(),
            "serviceclassify": $("#serviceclassify").val(),
            "servicetypecode": $("#servicetypecode").val(),
            "upstatus": $("#upstatus").val(),
        };

        var md5 = ByParGetMd5(data);
        layui.use(['table', 'tableMerge'], function () {
            var table = layui.table, tableMerge = layui.tableMerge;
            table.render({
                elem: '#Service'
                , url: url
                , toolbar: '#toolbar'
                , defaultToolbar: []
                , where: $.extend(data, { "sign": md5 })
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
//②这里可以设置要根据的Id , merge: true
                    { checkbox: true, field: 'service_id', merge: true }
                    , { field: 'service_id', align: 'center', merge: ['service_id', 'service_id'], width: 180, title: '服务ID' }
                    , { field: 'item_name', align: 'center', width: 180, title: '服务项名称' }
//③这里设置要合并的字段  merge: ['service_id', 'classify_label']
                    , { field: 'classify_label', align: 'center', merge: ['service_id', 'classify_label'], width: 180, title: '服务类别' }
                    , { field: 'service_type_label', align: 'center', merge: ['service_id', 'service_type_label'], width: 180, title: '服务类型' }
                    , {
                        field: 'item_service_pics', align: 'center', title: '服务图片', width: "10%", templet: function (d) {
                            return "<img  class=\"pic\" onclick=\"dj()\" src='" + d.item_service_pics + "' style='width:100px;height:100px' >";
                        }
                    } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , { field: 'item_cost_price', align: 'center', width: 80, title: '平台成本单价(元)' }
                    , { field: 'item_service_price', align: 'center', width: 80, title: '门店服务单价(元)' }
                    , { field: 'item_guide_price', align: 'center', width: 80, title: '门店建议零售价(元)' }
                    , {
                        field: 'service_status_label', align: 'center', width: 80, title: '服务状态'
                    }
                    , { field: 'unitlabel', align: 'center', merge: ['service_id', 'unitlabel'], width: 80, title: '单位' }
                    , { field: 'caozuo', title: '操作', merge: ['service_id', 'caozuo'], align: 'center', toolbar: '#caozuo', minwidth: 50 }
                ]],
                height: 'full-250',
                limit: 30,
                limits: [10, 20, 30, 40, 50, 100, 150, 200],
                page: true,
                request: {
                    pageName: 'page',//页码的参数名称，默认：page
                    limitName: 'pagesize' //每页数据量的参数名，默认：pagesize
                },
                parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    console.log(res);
                    ReturnLoginPage(res.status);
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.totalnum, //解析数据长度
                        "data": res.response //解析数据列表
                    };
                },
                done: function (res, curr, count) {
                    PageSize = curr;
//④这里要完成后重载
                    tableMerge.render(this);
                }
            });
        });
        return false;
    }

//关于加载的js代码贴出了

/**
 * @name:  子表格扩展
 * @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);
});

此篇文章是根据别人的文章学习的。