bootstrap-table存在合并单元格怎么处理数据

效果如图：

 

 

 js文件如下：

$(function () {
    initTable()

    $('#load_vip').change(function () {
        $
            .ajax({
                type: 'POST',
                url: '/nginx/config/diff',
                data: {'load_vip': $(this).val()},
                dataType: 'json',
            })
            .done(res => {
                $('#mytable').bootstrapTable('load', res.table_list);
                mergeCells(res.table_list, "diff_result");
            })
            .fail(res => {
            })
    })

   
    function mergeCells(data, fieldName) {
        // 声明一个map计算相同属性值在data对象出现的次数和
        var sortMap = {};
        for (var i = 0; i < data.length; i++) {
            for (var prop in data[i]) {
                if (prop === fieldName) {
                    var key = data[i][prop];
                    if (sortMap.hasOwnProperty(key)) {
                        sortMap[key] = sortMap[key] * 1 + 1;
                    } else {
                        sortMap[key] = 1;
                    }
                    break;
                }
            }
        }
        var index = 0;
        for (var prop in sortMap) {
            var count = sortMap[prop] * 1;
            $('#mytable').bootstrapTable('mergeCells', {
                index: index,
                field: fieldName,
                colspan: 1,
                rowspan: count
            });
            index += count;
        }
    }

    function initTable() {
        var columnsdata = [[
            {field: 'instance_ip', title: "实例ip", sortable: true, align: 'center'},
            {field: 'load_vip', title: "负载vip", sortable: true, align: 'center'},
            {field: 'role', title: "角色", sortable: true, align: 'center'},
            {field: 'start_time', title: "进程开始时间", sortable: true, align: 'center'},
            {field: 'init_num', title: "进程数量", sortable: true, align: 'center'},
            {
                field: 'verify',
                title: "校验结果",
                sortable: true,
                align: 'center',
                formatter: function (value, row, index) {
                    if (value === '待修改') {
                        return `<span class="label label-default">待修改</span>`
                    } else if (value === '校验通过') {
                        return `<span class="label label-success">校验成功</span>`
                    } else {
                        return `<span class="label label-danger">校验失败</span>`
                    }
                }
            },
            {field: 'diff_result', title: "主备配置对比", align: 'center', valign: "middle"}],
            []  // 这里columnsdata必须为数组嵌套数组，且第二个为空数组才会出现图上效果

]; //初始化表格,动态从服务器加载数据 $('#mytable').bootstrapTable({ cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） sortable: false, //是否启用排序 showColumns: false, //是否显示列筛选按钮 showRefresh: false, //是否显示刷新按钮 clickToSelect: false, //是否启用点击选中行 // uniqueId: "ID", //每一行的唯一标识，一般为主键列  columns: columnsdata, pagination: false, }); } });

 

html

<table id="mytable" style="font-size:10px;" class="table table-bordered table-striped"></table>

 

参考：https://blog.csdn.net/u012796085/article/details/85701022