BootstrapTable冻结表头,使用别人写的 JS,这种方法表头置顶后就不会动了。改正一个隐含的bug就是拉动滚定条时表头与数据列不对应。还有一种方法 BootstrapTable冻结表头(二)
bootstrap-table-fixed-header的js和css下载
链接:https://pan.baidu.com/s/1d8qB1bldjhLEWQp6jsMBOQ 提取码:r57g
一、冻结表头效果:
二、冻结表头demo
使用时要注意的有注释,共5条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BootstrapTable冻结表头-Demo</title>
<!-- 引入bootstrap样式 -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- 引入bootstrap-table样式 -->
<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
<!-- 1、固定表头样式 -->
<link rel="stylesheet" href="js/plugins/bootstrap-table-fixed-header/bootstrap-table-fixed-header.css" />
</head>
<body style="width: 95%;margin: 0 auto;">
<h2>BootstrapTable冻结表头-Demo</h2>
<!--2、bootstrap-table表格放到DIV中,加个松开鼠标时执行的事件来模拟模拟鼠标滚动事件,以实现横向滚动条的移动,表头跟数据对应-->
<div style="overflow-x: auto;overflow-y: auto;" onmouseup="onmouseUP()">
<!--3、给表格加样式 class="table table-striped 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"
class="table table-striped table-fixed-header"
>
<thead style="background:#efefef;">
<tr>
<th data-checkbox="true"></th>
<th data-field="id">标题标题ID-1</th>
<th data-field="name">标题标题Name-1</th>
<th data-field="price">标题标题Price-1</th>
<th data-field="id">标题标题ID-2</th>
<th data-field="name">标题标题Name-2</th>
<th data-field="price">标题标题Price-2</th>
<th data-field="id">标题标题ID-3</th>
<th data-field="name">标题标题Name-3</th>
<th data-field="price">标题标题Price-3</th>
<th data-field="id">标题标题ID-4</th>
<th data-field="name">标题标题Name-4</th>
<th data-field="price">标题标题Price-4</th>
<th data-field="id">标题标题ID-5</th>
<th data-field="name">标题标题Name-5</th>
<th 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>
<!-- 4、固定表头JS-->
<script type="text/javascript" src="js/plugins/bootstrap-table-fixed-header/bootstrap-table-fixed-header.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)
}
});
}
/*************5、固定表头start********************/
//固定表头
$("#table").on("post-body.bs.table",function(){
//alert(1);
$("#table thead").addClass("header");
$(".table-fixed-header").fixedHeader();
onmouseUP();
});
//onmouseup松开鼠标时执行
//模拟鼠标滚动事件,以实现横向滚动条的移动,表头跟数据对应
function onmouseUP(){
var scrollTop = document.getElementsByTagName("body")[0].scrollTop;
scrollTop -= 10;
$(".table-fixed-header").fixedHeader();
//alert(scrollTop)
}
/*************5、固定表头end********************/
</script>
</body>
</html>
data4.json
{
"code": 0,
"total": 1314,
"message": "success",
"array" :
[
{
"id": 0,
"name": "Item 0",
"price": "$1"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$1"
},
{
"id": 5,
"name": "Item 5",
"price": "$1"
},
{
"id": 6,
"name": "Item 6",
"price": "$1"
},
{
"id": 7,
"name": "Item 7",
"price": "$1"
},
{
"id": 8,
"name": "Item 8",
"price": "$1"
},
{
"id": 9,
"name": "Item 9",
"price": "$1"
},
{
"id": 0,
"name": "Item 0",
"price": "$1"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$1"
},
{
"id": 5,
"name": "Item 5",
"price": "$1"
},
{
"id": 6,
"name": "Item 6",
"price": "$1"
},
{
"id": 7,
"name": "Item 7",
"price": "$1"
},
{
"id": 8,
"name": "Item 8",
"price": "$1"
},
{
"id": 9,
"name": "Item 9",
"price": "$1"
}
]
}