<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../bootstrap-table.css">
<!--固定列需要引用此css文件-->
<link rel="stylesheet" type="text/css" href="../bootstrap-table-fixed-columns.css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="..//bootstrap.js"></script>
<script type="text/javascript" src="../bootstrapTable/bootstrap-table.js"></script>
<script type="text/javascript" src="../bootstrap-table-zh-CN.js"></script>
<!--固定列需要引用此js文件-->
<script type="text/javascript" src="../bootstrap-table-fixed-columns.js"></script>
<style>
body{
width: 100%;
}
//固定表頭樣式
#goodsList {
padding: 0;
height: 400px;
overflow-y: scroll;
}
.fixTable thead {
background-color: #fff;
}
//對於複雜的表頭，固定列的時候需要調整樣式，具體數值根據實際定
/*固定第一列樣式控制start*/
#detailTableContainer .fixed-table-header-columns{
height: 121px !important;
top: 42px !important;
display: block !important;
background: #eeeeee !important;
}
#detailTableContainer .fixed-table-body-columns{
top: 163px !important;
height: 770px !important;
width: 73px !important;
}
/*固定第一列樣式控制end*/
</style>
</head>
<body>
<!--固定的表頭相對於此div絕對定位，故此div要position: relative相對定位-->
<div id="goodsList" style="position: relative;width: 100%">
<!--固定的表頭跟內容對不齊的解決方法-重要代碼1-->
<!--style="table-layout: fixed;word-break:break-all;"
table-layout:fixed 的作用是指定每列標題頭的寬度
word-break:break-all，如果單元格內的數據在被列寬限制的情況下會換行顯示
確定了每列的寬度後方便調整固定表頭跟內容對齊-->
<table id="textTable" class="table table-bordered scrollTable" style="table-layout: fixed;word-break:break-all;">
</table>
</div>
<script>
$(function(){
var Columns = [
//注意：不要有下面註釋掉的這一個大表頭，這樣的話每列的寬度就控制不了了，
//不知道原因，實踐得來的
// [
// {
// title: 公園綠地明細表',
// align: 'center',
// colspan: 7,
// }
// ],
[
{
field: 'F3',
title: '合計',
halign:'center',
align:'center',
rowspan: 2,
//固定的表頭跟內容對不齊的解決方法-重要代碼2：width:100，注意後面的每列都要有width
width:100
},{
title: '公園面積',
halign:'center',
align:'center',
colspan:4,
width:400
},{
field: 'F9',
title: '山體公園',
halign:'center',
align:'center',
rowspan: 2,
width:100
},{
field: 'F10',
title: '廣場用地',
halign:'center',
align:'center',
rowspan: 2,
width:100
}
],[
{
field: 'F11',
title: '合計',
halign:'center',
align:'center',
width:100
},{
field: 'F12',
title: '綠地面積',
halign:'center',
align:'center',
width:100
},{
field: 'F13',
title: '建築佔地面積',
halign:'center',
align:'center',
width:100
},{
field: 'F14',
title: '其他佔地面積',
halign:'center',
align:'center',
width:100
}
]
];
var TableData = [
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
{'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
];
$('#textTable').bootstrapTable('destroy').bootstrapTable({
columns:Columns,
data: TableData,
striped:true,
search:true, //搜索框
pagination:false, //設置爲 true 會在表格底部顯示分頁條。
//固定第一列代碼
// fixedColumns: true,
// fixedNumber: 1 //固定列數
});
var $fixTable = $('#goodsList .fixTable');
$('#goodsList').scroll(function() {
var id = '#' + this.id;
var scrollTop = $(id).scrollTop() || $(id).get(0).scrollTop,
style = {
// 固定的表頭跟內容對不齊的解決方法-重要代碼3：通過width,left等參數調整固定表頭的位置，使其與內容對齊
'position': 'absolute',
'left': '0',
'right': '0',
'top': scrollTop + 'px',
'width':'100%'
};
if ($fixTable.length) {
(scrollTop === 0) ? $fixTable.addClass('hidden') : $fixTable.removeClass('hidden');
$fixTable.css(style);
} else {
var html = $(id + ' .scrollTable thead').get(0).innerHTML;
var table = $('<table class="table table-bordered fixTable"><thead>' + html + '</thead></table>');
table.css(style);
$(id).append(table);
$fixTable = $(this).find('.fixTable');
}
});
})
</script>
</body>
</html>
參考：https://segmentfault.com/a/1190000004713875?_ea=701754
bootstrap-table-fixed-columns.js、bootstrap-table-fixed-columns.css下載地址：https://github.com/wenzhixin/bootstrap-table-fixed-columns
