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" >

<table class="table" ></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