BootstrapTable冻结表头（一）

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"
}
]
}

BootstrapTable冻结表头（一）

猜你喜欢