BootstrapTable冻结表头（一）

朱雀 2020-10-17 17:55 1096阅读 0赞

BootstrapTable冻结表头，使用别人写的 JS，这种方法表头置顶后就不会动了。改正一个隐含的bug就是拉动滚定条时表头与数据列不对应。

bootstrap-table-fixed-header的js和css下载

链接：[https://pan.baidu.com/s/1d8qB1bldjhLEWQp6jsMBOQ][https_pan.baidu.com_s_1d8qB1bldjhLEWQp6jsMBOQ]  提取码：r57g

**一、冻结表头效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5sdW9sZWk_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5sdW9sZWk_size_16_color_FFFFFF_t_70 1][]

** 二、冻结表头demo**

使用时要注意的有注释，共5条

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>BootstrapTable冻结表头-Demo</title>
    		
    		<link rel="stylesheet" href="css/bootstrap.min.css" />
    		
    		<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
    		
    		<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>
    	
    	
    	<div style="overflow-x: auto;overflow-y: auto;" onmouseup="onmouseUP()">
        
    	<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>
    	
    	
    	<script type="text/javascript" src="js/jquery.min.js" ></script>
    	
    	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
    	
    	<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" 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"
    }
    ]
    }

[https_pan.baidu.com_s_1d8qB1bldjhLEWQp6jsMBOQ]: https://pan.baidu.com/s/1d8qB1bldjhLEWQp6jsMBOQ
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5sdW9sZWk_size_16_color_FFFFFF_t_70]: /images/1602957290747.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5sdW9sZWk_size_16_color_FFFFFF_t_70 1]: /images/1602957271078.png