$(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, }); } });

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