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小时内删除。
发表评论