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',
js合并两个数组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
html
<table id="mytable" class="table table-bordered table-striped"></table>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。