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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
详解JavaScript树结构
Jan 09 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP获取当前页面URL函数实例
2014/10/22 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
js的[defer]和[async]属性
2014/11/24 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
用Python进行TCP网络编程的教程
2015/04/29 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python装饰器语法糖
2019/01/02 Python
Django框架实现的分页demo示例
2019/05/25 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
特色蛋糕店创业计划书
2014/01/28 职场文书
电大会计学自我鉴定
2014/02/06 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
教师节慰问信
2015/02/15 职场文书
停车场管理制度范本
2015/08/05 职场文书