bootstrap 表头组合

效果图：

第一种方案：

<table id="tb_report" >
        <thead>
            <tr class="success">
            <th data-field="district" rowspan="2" data-valign="middle" data-align="center">行政区</th>
            <th data-field="sprayPropertyName" rowspan="2" data-valign="middle" data-align="center">小区名称</th>
            <th data-field="parentBuildName" rowspan="2" data-valign="middle" data-align="center">父小区</th>
                <th colspan="2" data-valign="middle" data-align="center">业务信息锁定</th>
                <th colspan="2" data-valign="middle" data-align="center">楼盘库信息锁定</th>
            </tr>
            <tr class="success">
                <th data-field="businessBuildInfoLock" data-align="center" >小区锁定</th>
                <th data-field="businessAddrInfoLock" data-align="center" 地址库锁定</th>
                
<th data-field="buildDirectoryBuildInfoLock" data-align="center" >小区锁定</th>
                <th data-field="buildDirectoryAddrInfoLock" data-align="center">地址库锁定</th>
                
            </tr>
        </thead>
    </table>

$('#tb_report').bootstrapTable({
            url: '',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 15,                       //每页的记录行数（*）
            pageList: [15, 30, 50],        //可供选择的每页的行数（*）
        });

第二种方案：

<table id="dataTable" ></table>

$('#dataTable').bootstrapTable(
{
url : “”,
sidePagination: 'server',
dataType: 'json',
pagination: true,
striped: true,
pageSize: 15,
height:400,
pageList: [15, 30, 50],

columns : [
[{checkbox:true,
colspan: 1,
rowspan: 2
}
,
{
title : '行政区',
field : 'district',
align : 'center',
valign : 'middle',
colspan: 1,
rowspan: 2
}
,
{
title : '小区名称',
field : 'sprayPropertyName',
align : 'center',
valign : 'middle',
colspan: 1,
rowspan: 2
},
{
title : '父小区',
field : 'parentBuildName',
align : 'center',
valign : 'middle',
colspan: 1,
rowspan: 2
},
{
title : '业务锁定',
field : 'businessBuildInfoLock',
align : 'center',
valign : 'middle',
colspan: 2,
rowspan: 1
}
,
{
title : '楼盘库锁定',
field : 'businessAddrInfoLock',
align : 'center',
valign : 'middle',
colspan: 2,
rowspan: 1
}
],
[{
title : '小区信息锁定',
field : 'businessBuildInfoLock',
align : 'center',
valign : 'middle'
}
,
{
title : '地址库锁定',
field : 'businessAddrInfoLock',
align : 'center',
valign : 'middle'

}
,
{
title : '小区信息锁定',
field : 'buildDirectoryBuildInfoLock',
align : 'center',
valign : 'middle'
}
,
{
title : '地址库锁定',
field : 'buildDirectoryAddrInfoLock',
align : 'center',
valign : 'middle'
}]
]
});