bootstraptable表头固定、冻结列、横向纵向滚动条
前提：引⼊对应的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" id="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,
html横向滚动条样式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();
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。