在开发中,需要对表格跨行跨列处理,也就是说,需要合并单元格;这里介绍使用方式。
表头跨行跨列
其中,在表头 columns 定义处,通过 rowspan 、colspan 来定义跨行跨列。
因此每项都是一行,如果有多项,你需要在 columns 中定义多个表头。
在数据加载完成后,调用 mergeCellTable 方法,用于对列表数据跨行跨列处理。
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'id',
search: false,
pagination: false,
showColumns: false, showToggle: false, showExport: false,
columns: [
[
{
field: 'id',
title: __('编号'),
operate: false,
sortable: true,
rowspan: 2
},
{field: 'project_type', title: '项目类型', rowspan: 2},
{field: 'project_type', title: '金额', rowspan: 1, colspan:4},
{field: 'total', title: '合计', rowspan: 1, colspan:1},
],
[
{field: 'money1', title: '第一季度', rowspan: 1, colspan:1},
{field: 'money2', title: '第二季度', rowspan: 1, colspan:1},
{field: 'money3', title: '第三季度', rowspan: 1, colspan:1},
{field: 'money4', title: '第四季度', rowspan: 1, colspan:1},
]
],
onLoadSuccess: function (data) {
mergeCellTable(data);
}
});
var mergeCellTable = function (data) {
var mergeCell = data.merge;
mergeCell.forEach(function (item, index) {
table.bootstrapTable("mergeCells", item);
});
}
表数据跨行跨列
在原有数据的基础上,返回 merge 项,用于控制,如下格式:
注意,列表数据从 index 序号 0 开始,field 用于定义涉及的表头字段。
另外,不管表头定义多少行,返回的结果,始终是一行表示所有表头。
$merge = [
[
'index' => 0,
'field' => 'project_type',
'colspan' => 1,
'rowspan' => 2,
]
];