bootstrap table列和表头对不齐的解决方法


Posted in Javascript onJuly 19, 2019

我们在使用bootstraptable做表格展示时,有时需要固定表格的高度当数据超出高度会出现滚动条,这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度,造成表头 数据 的div宽度不一样。

通过Chrome浏览器 f12,看到样式为 .fixed-table-header  .fixed-table-body .fixed-table-footer的3个div容器宽度不一样, .fixed-table-header  .fixed-table-footer这两个div没有滚动条。

解决方法:

bootstraptable在渲染完列表时会执行onPostBody事件,代码如下。

$('#dataGrid').bootstrapTable({ 
 method: 'post', 
 url: 'http://www.itxst.com/?ajax', 
 dataType: "json", 
 striped: true, //隔行变色 
 pagination: true, //底部显示分页码
 pageSize: 30, //每页显示行数
 pageNumber: 1, //页码
 pageList: [30, 50, 100, 200, 500], //每页显示数量选择器
 idField: "objectId", //主键字段 
 showColumns: true, //显示隐藏列 
 showRefresh: true, //刷新按钮 
 singleSelect: true, 
 search: false, 
 clickToSelect: true, 
 sidePagination: "server", 
 queryParams: queryParams, 
 queryParamsType: "limit", 
 toolbar: "#toolbar", //设置工具栏的Id 
 columns: column, //要显示的列
 silent: true, //刷新事件必须设置 
 formatLoadingMessage: function () { 
 return "it小书童正在加载中..."; 
 }, 
 formatNoMatches: function () { 
 return '未查询到结果'; 
 }, 
 onLoadError: function (data) { 
 
 }, 
 onClickRow: function (row) { 
 window.location.href = "/detail?id=" + row.objectId; 
 }, 
 onPostBody:function()
 {
 //重点就在这里,获取渲染后的数据列td的宽度赋值给对应头部的th,这样就表头和列就对齐了
 var header=$(".fixed-table-header table thead tr th");
 var body=$(".fixed-table-header table tbody tr td");
 var footer=$(".fixed-table-header table tr td");
 body.each(function(){
 header.width((this).width());
 footer.width((this).width());
 });
 }
});

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
同时使用n个window onload加载实例介绍
Apr 25 Javascript
javascript闭包的理解
Apr 01 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
泛谈JS逻辑判断选择器 || &&
May 24 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
js实现简单进度条效果
Mar 25 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 #Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 #Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 #Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 #Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 #Javascript
Vue动态生成表格的行和列
Jul 18 #Javascript
vue通过数据过滤实现表格合并
Nov 30 #Javascript
You might like
深入php 正则表达式的学习探讨
2013/06/06 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python 通配符删除文件的实例
2018/04/24 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Python如何批量生成和调用变量
2020/11/21 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
西部世纪面试题
2014/12/05 面试题
会计助理的岗位职责
2013/11/29 职场文书
奉献演讲稿范文
2014/05/21 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python