bootstrap-table学习系列--锁定表头
引⾔
很多情况下，我们都要写⼀些报表，在数据量⽐较⼤的情况下，会造成表内容太多，表⽐较长，需要⽤侧栏的下拉条进⾏查看数据--这个本⾝没有什么问题；但是领导们⼀般很喜欢，表头固定住,⽆论怎么下拉，界⾯就这么⼤，内容便就好了，表头和表⾥⾯数据还是要对应好的.所以需求就提出来了：锁定表头，纵向拉伸，改变表内容，表头不变.
实现⽅法
1. 实现原理
主要思想还是讲将表头做悬浮状，浮于表格内容的上⽅.可以使⽤js和css样式进⾏实现.
2. 注意事项
要固定好表格的宽度，这样⼦才不会有表数据和表头对应不⼀致问题的出现.
3. 代码
下⾯直接粘贴web的主要代码，后端接⼝，就略掉了，因为此⽂主要是介绍表头锁定的，等下篇会写前后台交互.~_~
3.1. 页⾯hea d引⼊⽂件列表
1. 引⼊jquery⽂件
<script script src="../resources/jquery/jquery-1.12.4.min.js" th:src="@{/resources/jquery/jquery-
1.1
2.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. 页⾯bo dy
<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) {sult;},
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",bootstrap项目
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",
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论