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