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


Posted in Javascript onMarch 07, 2019

之前使用bootstrap写了一个报表表格,最近突然找到我,说让我看看能不能将表格的表头和第一列进行固定,这样的话方便查看数据,于是,我开始了苦逼的研究起来,毕竟我是个后端啊,对于前端的样式问题,特别是小功能,烦的一批
这里就记录下我的研究成果

一:引入js和css

<!-- 引入jquery -->
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<!-- 引入bootstrap的js和css文件 -->
<link rel="stylesheet" href="./css/bootstrap.min.css" rel="external nofollow" >
<script src="./js/bootstrap.min.js" ></script>
<!-- 固定表头所需的js和css(bootstrap-table) -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap-table.min.css" rel="external nofollow" >
<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://3water.com/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的话,当你编写完代码之后,在控制台会出现如下错误:

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

二:编写table表格(固定表头)

<table class="table table-bordered" id="table" data-toggle="table" data-height="200">
<thead>
<tr>
  <th>表头一</th>
  <th>表头二</th>
  <th>表头三</th>
  <th>表头四</th>
 </tr>
</thead>
<tbody>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 </tr>
 <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(){
 //#table表示的是上面table表格中的id
 $("#table").bootstrapTable('destroy').bootstrapTable({
  fixedColumns: true, 
  fixedNumber: 1 //固定列数
 });
})
</script>

四:当浏览器窗口变化时,表头与表格不对齐解决:

<script>
$(function(){
$('#table').bootstrapTable();
 $(window).resize(function () {
  $('#table').bootstrapTable('resetView');
 });
})
</script>

五:初次展示时表头和表格数据不对齐解决(个人使用的方法,方法有点傻)

进过上面的过程我们已经实现了表格的表格和列固定功能了,于是我便开始将报表修改起来,开始修改起来十分的轻松,没有问题,但是,当我修改到一个报表的时候发现,开始的时候,表头和数据之间就发生了不对齐现象:

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

于是我开始在网上搜索起来,但是网上搜索的答案根本解决不了,例如:

找到bootstrap-table的源码中

if (this.options.showHeader && this.options.height) {
   this.$tableHeader.show();
   //注释掉下面两行 取消表头初始化解决表头和内容不对齐问题
   //this.resetHeader();
   //padding += this.$header.outerHeight();
}

不知道写这个的兄弟有没有自己测试过,反正我注释了之后,确实表头和数据对齐了,但是表头固定功能消失了,表头和数据不对齐的原因就是因为你设置了固定表头影响的,你这样将表头固定功能去掉了,那么我直接将table标签中的data-height="200"去掉不久行了吗,为什么还要改源码呢?

于是我自己开始研究起来

最后我使用审查元素找到错位的表头位置,发现这样一段代码

<div class="fht-cell" style="width: 146px;"></div>

这里将宽度设置为了146但是我的数据宽度只有120,这才造成了错位,

然后我找到bootstrap-table源码设置div的class为fht-cell宽度的代码位置

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

虽然我找到了问题所在,但是源码哪里出问题了,我还是不清楚,有知道的伙伴,欢迎告诉我答案

既然我不知道源码出问题出在哪,那么我就使用十分傻的方法,直接设置class为fht-cell的宽度,将之前宽度为146的覆盖

.fht-cell{width:120px!important;}

然后打开观看,错误问题解决了!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 #Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 #Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 #Javascript
vue项目前端埋点的实现
Mar 06 #Javascript
vue2.0结合Element-ui实战案例
Mar 06 #Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 #Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
You might like
PHP和.net中des加解密的实现方法
2013/02/27 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
IDEA安装vue插件图文详解
2019/09/26 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
python 实现红包随机生成算法的简单实例
2017/01/04 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
Python线程同步的实现代码
2018/10/03 Python
python构建基础的爬虫教学
2018/12/23 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
白岩松演讲
2014/05/21 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
打架检讨书范文
2015/01/27 职场文书
倡议书范文大全
2015/04/28 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP