引言
很多情况下,我们都要写一些报表,在数据量比较大的情况下,会造成表内容太多,表比较长,需要用侧栏的下拉条进行查看数据--这个本身没有什么问题;但是领导们一般很喜欢,表头固定住,无论怎么下拉,界面就这么大,内容便就好了,表头和表里面数据还是要对应好的.所以需求就提出来了:锁定表头,纵向拉伸,改变表内容,表头不变.
实现方法
1. 实现原理
主要思想还是讲将表头做悬浮状,浮于表格内容的上方.可以使用js和css样式进行实现.
2. 注意事项
要固定好表格的宽度,这样子才不会有表数据和表头对应不一致问题的出现.
3. 代码
下面直接粘贴web的主要代码,后端接口,就略掉了,因为此文主要是介绍表头锁定的,等下篇会写前后台交互.~_~
3.1. 页面head引入文件列表
1. 引入jquery文件
<script script src="../resources/jquery/jquery-1.12.4.min.js" th:src="@{/resources/jquery/jquery-1.12.4.min.js}" type="text/javascript"></script>
2. 引入bootstrap的基本文件
<link href="../resources/bootstrap/bootstrap.min.css" th:href="@{/resources/bootstrap/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
<script src="../resources/bootstrap/bootstrap.min.js" th:src="@{/resources/bootstrap/bootstrap.min.js}" type="text/javascript"></script>
3. 引入bootstrap-table基础文件
<link href="../resources/bootstrap-table/bootstrap-table.min.css" th:href="@{/resources/bootstrap-table/bootstrap-table.css}" rel="stylesheet" type="text/css"/>
<script src="../resources/bootstrap-table/bootstrap-table.min.js" th:src="@{/resources/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script src="../resources/bootstrap-table/bootstrap-table-zh-CN.min.js" th:src="@{/resources/bootstrap-table/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>
4. 自定义样式表
<!-- .table样式为定义表,列宽由表格宽度和列宽度设定。
.fixed-table-container自定义表的高度,这个可以根据自己需要设定,也可以不设定,不设定的话,默认是屏幕高度
-->
<style type="text/css">
.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",
align: "center"
},{
field: 'ROOM_NAME',
title: '机房名称',
width:"180px",
align: "center"
},{
field: 'CUSTOMER_MANAGER',
title: '客户经理',
width:"110px",
align: "center"
},{
field: 'PJ_MANAGER',
title: '项目经理',
width:"110px",
align: "center"
},{
field: 'INPUT_DATE',
title: '创建日期',
width:"110px",
align: "center"
}, {
title: '操作',
field: 'Id11',
align: "center",
width:"110px",
formatter: formatOperat
}]
});
$('#stock_table').bootstrapTable('hideColumn', 'ID');
function formatOperat(value,row,index){
return [ '查看' ].join('');
}
};
//得到查询的参数
oTableInit.queryParams = function(params) {
if(!params.limit) {
params.limit = params.pageSize;
}
if(!params.offset) {
params.offset = params.pageNumber;
}
var temp = {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
page_number: params.offset, //页面大小
line: params.limit, //页码
ROOM_PROPERTY:"1",
ID: $("#ID").val(),
PROJECT_NAME: $("#PROJECT_NAME").val(),
ROOM_NAME: $("#ROOM_NAME").val(),
CUSTOMER_MANAGER: $("#CUSTOMER_MANAGER").val(),
PJ_MANAGER: $("#PJ_MANAGER").val(),
INPUT_DATE: $("#INPUT_DATE").val()
};
return temp;
};
return oTableInit;
};
</script>
</body>
效果图
