bootstrap-table学习系列--锁定表头

引言

很多情况下,我们都要写一些报表,在数据量比较大的情况下,会造成表内容太多,表比较长,需要用侧栏的下拉条进行查看数据--这个本身没有什么问题;但是领导们一般很喜欢,表头固定住,无论怎么下拉,界面就这么大,内容便就好了,表头和表里面数据还是要对应好的.所以需求就提出来了:锁定表头,纵向拉伸,改变表内容,表头不变.

实现方法

1.  实现原理

主要思想还是讲将表头做悬浮状,浮于表格内容的上方.可以使用js和css样式进行实现.

2. 注意事项

要固定好表格的宽度,这样子才不会有表数据和表头对应不一致问题的出现.

3. 代码

下面直接粘贴web的主要代码,后端接口,就略掉了,因为此文主要是介绍表头锁定的,等下篇会写前后台交互.~_~

3.1. 页面head引入文件列表

1. 引入jquery文件

2. 引入bootstrap的基本文件

3. 引入bootstrap-table基础文件

4. 自定义样式表

3.2. 页面body

   

       

    

   

效果图