bootstraptable 合并行数据并居中对齐

渲染表格后进行数据行合并

onLoadSuccess: function (data) {
   $('#tableStyle').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3});
}

整体代码

$('#tableStyle').bootstrapTable({
            url: '/table/tableStyle',
            method:'post',
            pagination: true, //分页
            pageNumber:1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: false, //显示搜索框
            sidePagination: "server", //服务端处理分页
            onLoadSuccess: function (data) {
                $('#tableStyle').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3});
            },
            columns: [{
                field: '',
                checkbox:true
            }, {
                field: 'name',
                title: '名称'
            }, {
                field: 'price',
                title: '价格'
            }]
        });

合并后对td设置属性 vertical-align: middle;

展现图片
bootstraptable 合并行数据并居中对齐_第1张图片

你可能感兴趣的:(web前端)