bootstrap table列和表头对不齐的解决方法
我们在使用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()); }); } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
bootstrap table插件动态加载表头
bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表加载的数据需求不同,所以需要动态的更换表头. 网上有很多加载表格数据的例子,但是却没有找到如何动态加载表格,再加在数据. 虽然可以一个表格加载一种数据,但是本着学习的态度尝试了下这种方式,结果发现是可以执行的.分享下思路和实现过程,以备日后使用. 思路: 1.写接口,查询出要展示的列.注意接口中必须要有字段中文名称(columns属性的title值),字段的英文名称(columns的field字段),特别注意filed
-
BootStrap table表格插件自适应固定表头(超好用)
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b
-
bootstrap-table实现表头固定以及列固定的方法示例
之前使用bootstrap写了一个报表表格,最近突然找到我,说让我看看能不能将表格的表头和第一列进行固定,这样的话方便查看数据,于是,我开始了苦逼的研究起来,毕竟我是个后端啊,对于前端的样式问题,特别是小功能,烦的一批 这里就记录下我的研究成果 一:引入js和css <!-- 引入jquery --> <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></scri
-
BootStrap的table表头固定tbody滚动的实例代码
关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css
-
bootstrap-table组合表头的实现方法
最近需要做一个表格样式,需要组合表头,现在把做出来的分享给大家, 1.效果图 2.html代码 <table id="table"></table> 3.javascript代码 $("#table").bootstrapTable({ dataType: "json", method: 'get', contentType: "application/x-www-form-urlencoded",
-
BootStrap Table 设置height表头与内容无法对齐的问题
首先说下我遇到的问题,就是设置表格的height后先加载所有数据再隐藏除第一条外的数据(即只显示第一条数据)发现表头与内容无法对齐,在网上也找了很多解决方法,但效果都不太理想,最后还是老老实实调样式,发现我们所看到的表头就是".fixed-table-header"这样一个div,而原来的表头因为margin-top而看不见了,而这个表头与内容是对齐的,因此就可以设置".fixed-table-header"的每一个"th"的宽度来实现对齐,于是
-
基于Bootstrap table组件实现多层表头的实例代码
在做私活的时候,有一个需求是要在页面上实现多层表头.一开始有点懵,不知道怎么来实现,我回想起在JFTT的时候,曾用过Flex版的多层表头,不过那离现在已经很久远了,久远到Flex已经被淘汰出局了.于是在网上折腾了好一会儿,终于找到一款用起来简单,效果又很不错的组件--Bootstrap-table. Bootstrap-table还有很多强大的功能,但这篇文章我们把关注点只放在多层表头上,关注点确定后,这篇博客就很简单了,但我觉得还是很有必要推而广之--因为之前在看董卿主持的<诗词大会>,里面
-
bootstrap table列和表头对不齐的解决方法
我们在使用bootstraptable做表格展示时,有时需要固定表格的高度当数据超出高度会出现滚动条,这时有可能出现表头列和数据列对不齐.出现这个问题的原因是数据列出现了滚动条占了宽度,造成表头 数据 的div宽度不一样. 通过Chrome浏览器 f12,看到样式为 .fixed-table-header .fixed-table-body .fixed-table-footer的3个div容器宽度不一样, .fixed-table-header .fixed-table-footer这两个
-
Bootstrap Table列宽拖动的方法
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table做的,客户要求能利用拖动改变列宽,为了总结和备忘,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它的Resizable扩展插件,具体可见bootstrap-table的官方文档链接: http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/ 进入之后,找到Resizable插件,点击Home进入github可以找到详细的
-
Bootstrap table列上下移动效果
本文实例为大家分享了Bootstrap table列上下移动效果的具体代码,供大家参考,具体内容如下 排序 1. 按钮排序 点击排序按钮,页面的序号变为可点击的方向键,实现手动排序(第一行没有下箭头,最后一行没有上尖头) 实现方式 1.击则“编辑”,改变内容 <button class="btn btn-info editBtn" style="display:inline-block" onclick="handleTableEditBtn(thi
-
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
最近的项目用的bootstrap前端,手机刚刚更新IOS9发现其中的modal有个bug,首页点弹出框会出现问题,找了好多资料终于找到解决办法.在CSS中加入以下代码 CSS body { padding-right: 0px !important } .modal-open { overflow-y: auto; } PS:bootstrap datepicker 在bootstrap modal中不显示问题 可以通过在 input 输入框之外 嵌套 <span style="posit
-
基于layui table返回的值的多级嵌套的解决方法
我在学习layui的过程中遇到了table返回值的问题,如果服务器端返回给你的数据是多级嵌套的话,那你在前台是解析不了的,在table.js源码中 它渲染数据是用了 data = res[options.response.dataName] || [] 这个意味着它源码不支持嵌套数据 举个例子把 比如服务器端返回的数据中data>dataList>list 把这个数据返回给前段解析出来的是 res[data.dataList.list]类似这种的结构,当然解析不了,所以我写了一个方法处理返回的
-
Mysql报Table 'mysql.user' doesn't exist问题的解决方法
目录 发现问题 问题起源: 排查记录: 总结 发现问题 前天突然出现了这个问题,花费了很多时间去解决问题.记录一下,希望能给大家避坑 问题起源: 周六,windows本地的mysql还能正常使用,周日早上,使用navicat连接本地mysql,一直报连接拒绝. 排查记录: 1 首先博主,去查看了一下本地Mysql服务是否启动,经过查看发现Mysql服务关闭,且无法启动. 2 因需要先确定Mysql服务无法启动的原因, 所以,去查看了一下系统的日志. 3 确定了问题,是因为Mysql自身报错,信息
-
bootstrap table分页模板和获取表中的ID方法
1.dao层 MyBatis映射 mapper.xml中 <select id="getTcdt" parameterType="com.ls.entity.Mydata" resultMap="BaseResultMap"> select * from TB_COMMUNICATION_DEVICE_TBL ORDER BY ${ordername} ${order} </select> mapper.java中 pub
-
bootstrap table.js动态填充单元格数据的多种方法
bootstrap-table.js动态填充table单元格数据,总结了几种方法以适应各种需求,以下就简单介绍两种方法: 方法一:全部自动填充table <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 引入 echarts.js --> <script typ
-
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
网站发布到IIS后,发现网站使用的Bootstrap框架所引用的woff字体无法正常显示.于是跟踪http请求,发现woff字体请求出现GET .woff 404 (Not Found)的问题,但是项目中woff字体的文件并未丢失.后经排查,原来是服务器上IIS没有添加woff字体的MIME类型,导致发送HTTP请求时,IIS无法处理和识别此类型的文件. 解决方法1:在Web.config配置文件中添加woff字体的MIME类型 解放方法2:在IIS中添加woff字体的MIME类型 woff字体
随机推荐
- Vue 兄弟组件通信的方法(不使用Vuex)
- 微信应用号(小程序)入门安装教程及IDE(破解版)下载
- GO语言Defer用法实例分析
- 如何使用Javascript正则表达式来格式化XML内容
- js获取窗口相对于屏幕左边和上边的位置坐标
- java使用Socket实现SMTP协议发送邮件
- php 过滤英文标点符号及过滤中文标点符号代码
- Bootstrap table学习笔记(2) 前后端分页模糊查询
- checkbox设置复选框的只读效果不让用户勾选
- jQuery Ajax显示对号和错号用于验证输入验证码是否正确
- Java微信公众平台开发(14) 微信web开发者工具使用
- 一步一步教你创建SQL 2005计划任务应用图解教程
- SQL2005CLR函数扩展-解析天气服务的实现
- JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
- Android解析json数组对象的方法及Apply和数组的三个技巧
- 使用iframe window的scroll方法控制iframe页面滚动
- Bootstrap 表单验证formValidation 实现表单动态验证功能
- 浅谈python中字典append 到list 后值的改变问题
- Java中的显示锁ReentrantLock使用与原理详解
- 微信小程序搭建自己的Https服务器