bootstrap table 表頭固定 、凍結列、橫向縱向滾動條

前提：引入對應的js,css

<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap-table/bootstrap-table-fixed-columns.css">
<script src="/kaoqin/js/bootstrap/js/bootstrap.min.js"></script>
<script src="/kaoqin/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/kaoqin/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/kaoqin/js/bootstrap-table/bootstrap-table-fixed-columns.js"></script>
1 添加樣式，設置列寬由表格寬度和列寬度設定：

.table{
table-layout: fixed;
}
2 bootstrapTable初始化的時候 field設置寬度

{ field : '', title : '' ,align: 'center', valign: 'middle',width:120}
3 bootstrapTable初始化的時候 height設置高度(表頭設置有兩種方法，這里使用的是在bootstrapTble設置height ，這種方法有缺陷，表格高度固定，這就需要寫額外的js去動態設置table的高度)

var h = $(window).height() - 100;
$('#table').bootstrapTable("destroy")
.bootstrapTable(
{
method : 'get', // 服務器數據的請求方式 get or post
url : "/attendance/record/recordList", // 服務器數據的加載地址
height:h,
    tips：動態設置高度可以使用 $(window).resize();

4 bootstrapTable初始化的時候 設置fixedColumns 和fixedNumber

fixedColumns: true,
fixedNumber: 5
5 table 標簽外的div 添加class=table-responsive

<div class="table-responsive" style="z-index: 1;">
<table class="table" id="table" style="min-width:100px;"></table>
</div>
6 動態設置凍結列的高度（通過看fix-columns.js源碼可以知道，凍結列是通過在table前加div，並是div置於table對應的div之上來實現的）

$(window).resize(function () {
var h = $(window).height();
var w = $(window).width();
var $fixedTableBody = $("#table").closest("div"),
$fixedTableBodyColumns = $fixedTableBody.prev(),
$FixedtableContainer = $fixedTableBody.closest("div");
$FixedtableContainer.height(h - 200);
$fixedTableBodyColumns.height(h - 253);
});
最后貼出部分代碼（bootstarpTalbe初始）

var columns = [];
var t1 = { field : 'name', title : '姓名' ,align: 'center', valign: 'middle',width:120};
var t2 = { field : 'username', title : '賬號' ,align: 'center', valign: 'middle',width:120};
var t3 = { field : 'deptName', title : '部門' ,align: 'center', valign: 'middle',width:120};
var t4 = { field : 'groupName', title : '考勤組' ,align: 'center', valign: 'middle',width:120};
columns.push(t1);columns.push(t2);columns.push(t3);columns.push(t4);
var h = $(window).height() - 100;
$('#table').bootstrapTable("destroy")
.bootstrapTable(
{
method : 'get', // 服務器數據的請求方式 get or post
url : "/attendance/record/recordList", // 服務器數據的加載地址
height:h,
iconSize : 'outline',
striped : true, // 設置為true會有隔行變色效果
dataType : "json", // 服務器返回的數據類型
pagination : true, // 設置為true會在底部顯示分頁條
// queryParamsType : "limit",
// //設置為limit則會發送符合RESTFull格式的參數
singleSelect : false, // 設置為true將禁止多選
// contentType : "application/x-www-form-urlencoded",
// //發送到服務器的數據編碼類型
pageList: [ 5, 10, 20],
pageSize : 5, // 如果設置了分頁，每頁數據條數
pageNumber : 1, // 如果設置了分布，首頁頁碼
//search : true, // 是否顯示搜索框
showColumns : false, // 是否顯示內容下拉框（選擇顯示的列）
sidePagination : "server", // 設置在哪里進行分頁，可選值為"client" 或者 "server"
queryParams : function(params) {
return {
//說明：傳入后台的參數包括offset開始索引，limit步長，sort排序列，order：desc或者,以及所有列的鍵值對
limit: params.limit,
offset:params.offset
};
},
columns:columns,
fixedColumns: true,
fixedNumber: 5
});
$("#table").colResizable();
};

————————————————
版權聲明：本文為CSDN博主「bestdoufu」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/bestdoufu/article/details/80325038