bootstrap-table实现表头固定以及列固定的方法示例

bootstrap-table实现表头固定以及列固定的方法示例实现表头固定以及列固定的方法示例

主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细，对大家的

学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便

查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批

这里就记录下我的研究成果

一：引入一：引入js和和css

<!-- 引入jquery -->

<script src="./js/bootstrap-table.min.js"></script>

<!-- 固定列所需的js和css(bootstrap-table-fixed-columns) -->

<link rel="stylesheet" type="text/css" href="./css/bootstrap-table-fixed-columns.css" rel="external nofollow" >

<script src="./js/bootstrap-table-fixed-columns.js"></script>

query下载地址：https://www.jb51.net/zt/jquerydown.htm

bootstrap下载地址：http://www.bootcss.com/

bootstrap-table下载地址：https://bootstrap-table.com

bootstrap-table-fixed-columns下载地址：https://github.com/wenzhixin/bootstrap-table-fixed-columns

这里注意：

引入jquery时，不要引入jquery2.0.0(包括2.0.0)版本以下，如果你引入了2.0.0版本以下的jquery的话，当你编写完代码之后，

<th>表头二</th>

<th>表头三</th>

<th>表头四</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

</tbody>

</table>

上面代码中的table标签中的data-toggle="table"表示的是启用bootstrap表格，data-height="200"表示设置表格的高度，用于配

置固定表头。由于我这里编写的表格数据较少，所以展示出来的数据可能不会出现滑轮，看不出来固定表头现象，你可以向表

格中添加多一点数据就可以了

三：固定列三：固定列

<script>

$(function(){

</script>