BootstrapTable冻结表头,这个方法根据客户需求,找了好久没找到合适的方法,第一次用的这种方法,BootstrapTable冻结表头(一)无意在正在开发的项目中发现了不知道那个大佬做的,挺不错的。记录一下
一、冻结表头效果
可能细心的你发现了,上面错位了,这个根据你的情况适当调整,看注释6
二、冻结表头demo2
使用时要注意的有注释,共6条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BootstrapTable冻结表头-Demo2</title>
<!-- 引入bootstrap样式 -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- 引入bootstrap-table样式 -->
<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
<style type="text/css">
/******注释1.表头固定 Start******/
.fixed-table-container .no-records-found>td:last-of-type{display:block !important;position:absolute;width:100%;}
.fixed-table-container{height:auto !important;}
p{margin-bottom:0;}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
/**注释6.有事会错位,根据情况适当调整这里**/
table thead {
width: calc( 100% - 0.4em )
}
#table,#table1{background:#efefef;border-top:2px solid #ddd;}
#table tbody,#table1 tbody{background:#fff;}
.table thead:first-child tr:first-child th{border-top:none;}
/******表头固定 end******/
</style>
</head>
<body style="width: 95%;margin: 0 auto;">
<h2>BootstrapTable冻结表头-Demo2</h2>
<!-- 注释2.bootstrap-table表格外div的class="bootstrap-table-fixed-header",名字可以变但是JS也同步-->
<!-- 注释3.列数过多会挤到一起,这时候就自己设置data-width="140px" -->
<div class="bootstrap-table-fixed-header">
<table id="table"
data-toolbar="#toolbar"
data-toggle="table"
data-ajax="ajaxRequest"
data-search="false"
data-side-pagination="server"
data-click-to-select="true"
data-single-select="true"
data-pagination="true"
data-page-size= "10"
>
<thead style="background:#efefef;">
<tr>
<th data-width="140px" data-checkbox="true"></th>
<th data-width="140px" data-field="id">标题标题ID-1</th>
<th data-width="140px" data-field="name">标题标题Name-1</th>
<th data-width="140px" data-field="price">标题标题Price-1</th>
<th data-width="140px" data-field="id">标题标题ID-2</th>
<th data-width="140px" data-field="name">标题标题Name-2</th>
<th data-width="140px" data-field="price">标题标题Price-2</th>
<th data-width="140px" data-field="id">标题标题ID-3</th>
<th data-width="140px" data-field="name">标题标题Name-3</th>
<th data-width="140px" data-field="price">标题标题Price-3</th>
<th data-width="140px" data-field="id">标题标题ID-4</th>
<th data-width="140px" data-field="name">标题标题Name-4</th>
<th data-width="140px" data-field="price">标题标题Price-4</th>
<th data-width="140px" data-field="id">标题标题ID-5</th>
<th data-width="140px" data-field="name">标题标题Name-5</th>
<th data-width="140px" data-field="price">标题标题Price-5</th>
</tr>
</thead>
</table>
</div>
<!-- jquery -->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!-- bootstrap -->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<!-- bootstrap-table -->
<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script>
<!-- 引入中文语言包 -->
<script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script>
<script type="text/javascript">
//自定义ajax方法
function ajaxRequest(params){
//debugger;
$.ajax({
url: "/bootstrap-table/data4.json",
type: "POST",
dataType: "json",
success: function(rs){
console.log(rs)
var message = rs.array;
params.success({
total: rs.total,
rows: message
});
},
error: function(rs){
console.log(rs)
}
});
}
/******注释4.表头固定 Start******/
$(function(){
var winH=$(window).height();
var tabH=Math.floor(winH*0.4)+"px";
var tabH2=Math.floor(winH*0.10)+"px";
//注释5.注意这里的.bootstrap-table-fixed-header可根据情况改变
$(".bootstrap-table-fixed-header .fixed-table-body tbody").css({'max-height':tabH,'overflow-Y':"scroll",'display':'block'})
$(".listboxline .fixed-table-body tbody").css({'max-height':tabH2,'overflow-Y':"scroll",'display':'block'})
});
/******表头固定 end******/
</script>
</body>
</html>
更多推荐
BootstrapTable冻结表头(二)
发布评论