1.Data为嵌套数据,bootstrap内通过formatter设置显示多层嵌套内数据
2.在columns内两个数组,对应一级表头和二级表头,需要更多级表头可添加数组,通过rowspan和colspan配置行列
`var Data={
title1:'1',
title2:'2',
title3content:{
title3content1:"content1",
title3content2:"content2"
}
}
$('#tableBasicDataList').bootstrapTable({
data: Data,
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
pagination: true, //是否显示分页（）
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（）
pageList: [5, 20, 60, 100], //可供选择的每页的行数（*）
showColumns: false, //是否显示 内容列下拉框
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
singleSelect: true, //单选checkbox
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，
strictSearch: false, //设置为 true启用 全匹配搜索，否则为模糊搜索
searchOnEnterKey: false, //回车搜索
searchTimeOut: 500, //设置搜索超时时间
trimOnSearch: true, //设置为 true 将允许空字符搜索
searchAlign: "right", //查询框对齐方式
toolbar: "#tableToolbar", //指定工具栏
toolbarAlign: "left", //工具栏对齐方式
buttonsAlign: "left", //按钮对齐方式
showExport: true, //是否显示导出按钮
exportDataType: 'all', //'basic', 'all', 'selected' exportDataType表示导出的模式是当前页、所有数据还是选中数据
exportTypes: ['excel', 'csv'], //导出文件类型
Icons: 'glyphicon-export',
exportOptions: {
ignoreColumn: [0], //忽略某一列的索引
fileName: 'List', //文件名称设置
worksheetName: 'sheet1', //表格工作区名称
},
locale: tableLocale,
columns: [
[
{
field: 'title1',
title: '标题1',
align: 'center',
valign: 'middle',
rowspan: 2 //占两行
},
{
field: 'title2',
title: '标题2',
align:'center',
valign: 'middle',
//sortable: true,
visible: true,
rowspan: 2,
},
{
title: '标题3',
align:'center',
valign: 'middle',
visible: true,
colspan:2,//占两列
},
],
[
//标题3二级表头
{
field: 'title3content1',
title: '二级表头1',
align:'center',
valign: 'middle',
visible: true,
formatter: function (value, row, index) {
return row.title3content.title3content1;
}
},
{
field: 'title3content2',
title: '二级表头2',
align:'center',
valign: 'middle',
visible: true,
formatter: function (value, row, index) {
return row.title3content.title3content2;
}
},
]
]
});
