bootstrap-table学习系列--锁定表头

引言

很多情况下,我们都要写一些报表,在数据量比较大的情况下,会造成表内容太多,表比较长,需要用侧栏的下拉条进行查看数据--这个本身没有什么问题;但是领导们一般很喜欢,表头固定住,无论怎么下拉,界面就这么大,内容便就好了,表头和表里面数据还是要对应好的.所以需求就提出来了:锁定表头,纵向拉伸,改变表内容,表头不变.

实现方法

1. ?实现原理

主要思想还是讲将表头做悬浮状,浮于表格内容的上方.可以使用js和css样式进行实现.

2. 注意事项

要固定好表格的宽度,这样子才不会有表数据和表头对应不一致问题的出现.

3. 代码

下面直接粘贴web的主要代码,后端接口,就略掉了,因为此文主要是介绍表头锁定的,等下篇会写前后台交互.~_~

3.1. 页面head引入文件列表

1. 引入jquery文件

2. 引入bootstrap的基本文件

3. 引入bootstrap-table基础文件

4. 自定义样式表

<!-- .table样式为定义表,列宽由表格宽度和列宽度设定。

? ??.fixed-table-container自定义表的高度,这个可以根据自己需要设定,也可以不设定,不设定的话,默认是屏幕高度

-->

? ??.table{

????????table-layout: fixed;

????}

? ??.fixed-table-container{

????????height: 400px !important;

????}

</style>

3.2. 页面body

<body>

? ? <div>

? ? ? ? <table class="table" id="demo_table"></table>

????</div>

? ? <script th:inline="javascript" type="text/javascript">

? ??????$(function() {

????????????//1.初始化Table

????????????var oTable = new TableInit();

????????????oTable.Init();

? ? ? ? ? ? //2.固定表头

????????????initDate();

????????});

? ??????function initDate(){

????????????$('.date-picker').datepicker({autoclose:true}).next().on(ace.click_event, function(){

????????????????$(this).prev().focus();

????????????});

????????????$('input[name=date-range-picker]').daterangepicker().prev().on(ace.click_event, function(){

????????????????$(this).next().focus();

????????????});

? ? ? ?}

? ??????var TableInit = function() {

????????????var oTableInit = new Object();

????????????//初始化

????????????TableoTableInit.Init = function() {

????????????????$('#demo_table').bootstrapTable({

????????????????????height: getTableHeight(),

????????????????????url: urlProjInfo,//请求url

????????????????????method: 'post', //请求方式（*）

????????????????????striped: true, //是否显示行间隔色

????????????????????cache: false, //是否使用缓存

????????????????????contentType: "application/x-www-form-urlencoded; charset=UTF-8",

????????????????????sortable: false, //是否启用排序

????????????????????queryParamsType: "undefined",?

????????????????????queryParams: oTableInit.queryParams, //传递参数（*）

????????????????????responseHandler: function(res) {return res.result;},

????????????????????pagination: true, //是否显示分页（*）

????????????????????paginationVAlign: "top", //设置分页条的位置

????????????????????paginationDetailHAlign: "right",

????????????????????paginationHAlign: "right",

????????????????????pageNumber: 1, //初始化加载第一页，默认第一页

????????????????????pageSize: 20,

????????????????????pageList: [10, 20, 50],

? ? ? ? ? ? ? ? ? ? sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）????????????

? ? ? ? ? ? ? ? ? ? minimumCountColumns: 2, //最少允许的列数

? ? ? ? ? ? ? ? ? ? clickToSelect: true,

? ? ? ? ? ? ? ? ? ? ?uniqueId: "ID",

????????????????????checkboxHeader: true, //设置false 将在列头隐藏check-all?

????????????????????checkboxshowExport: false,

????????????????????exportfileName: '项目信息',

????????????????????columns: [{

????????????????????????field: "ID",

????????????????????????title: '项目id',

????????????????????????align: "center",

????????????????????????width:"110px",

????????????????????????hidden: "true"

????????????????????}, {

????????????????????????field: 'PROJECT_NAME',

????????????????????????title: '项目名称',

????????????????????????width:"144px",