bootstrap表头如何展示不动_bootstrap-table实现表头固定以及列固定
之前使用bootstrap写了一个报表表格,最近突然找到我,说让我看看能不能将表格的表头和第一列进行固定,这样的话方便查看数据,于是,我开始了苦逼的研究起来,毕竟我是个后端啊,对于前端的样式问题,特别是小功能,烦的一批
这里就记录下我的研究成果
一:引入js和css
query下载地址:http://www.jq22.com/jquery-in...
bootstrap下载地址:http://www.bootcss.com/
bootstrap-table下载地址:https://bootstrap-table.com/
bootstrap-table-fixed-columns下载地址:https://github.com/wenzhixin/...
这里注意:
引入jquery时,不要引入jquery2.0.0(包括2.0.0)版本以下,如果你引入了2.0.0版本以下的jquery的话,当你编写完代码之后,在控制台会出现如下错误:
二:编写table表格(固定表头)
表头一表头二表头三表头四
12341234
上面代码中的table标签中的
data-toggle="table"表示的是启用bootstrap表格,
data-height="200"表示设置表格的高度,用于配置固定表头
由于我这里编写的表格数据较少,所以展示出来的数据可能不会出现滑轮,看不出来固定表头现象,你可以向表格中添加多一点数据就可以了
三:固定列
$(function(){
//#table表示的是上面table表格中的id
$("#table").bootstrapTable('destroy').bootstrapTable({
fixedColumns: true,
fixedNumber: 1 //固定列数
});
})
四:当浏览器窗口变化时,表头与表格不对齐解决:
$(function(){
$('#table').bootstrapTable();
$(window).resize(function () {
$('#table').bootstrapTable('resetView');
});
})
五:初次展示时表头和表格数据不对齐解决(个人使用的方法,方法有点傻)
进过上面的过程我们已经实现了表格的表格和列固定功能了,于是我便开始将报表修改起来,开始修改起来十分的轻松,没有问题,但是,当我修改到一个报表的时候发现,开始的时候,表头和数据之间就发生了不对齐现象:
于是我开始在网上搜索起来,但是网上搜索的答案根本解决不了,例如:
找到bootstrap-table的源码中
if (this.options.showHeader && this.options.height) {
this.$tableHeader.show();
//注释掉下面两行 取消表头初始化解决表头和内容不对齐问题
//this.resetHeader();
//padding += this.$header.outerHeight();
}
不知道写这个的兄弟有没有自己测试过,反正我注释了之后,确实表头和数据对齐了,但是表头固定功能消失了,表头和数据不对齐的原因就是因为你设置了固定表头影响的,你这样将表头固定功能去掉了,那么我直接将table标签中的data-height="200"去掉不久行了吗,为什么还要改源码呢?
于是我自己开始研究起来
最后我使用审查元素找到错位的表头位置,发现这样一段代码
这里将宽度设置为了146但是我的数据宽度只有120,这才造成了错位,
然后我找到bootstrap-table源码设置div的class为fht-cell宽度的代码位置
虽然我找到了问题所在,但是源码哪里出问题了,我还是不清楚,有知道的伙伴,欢迎告诉我答案
既然我不知道源码出问题出在哪,那么我就使用十分傻的方法,直接设置class为fht-cell的宽度,将之前宽度为146的覆盖
.fht-cell{width:120px!important;}
然后打开观看,错误问题解决了!!!
bootstrap表头如何展示不动_bootstrap-table实现表头固定以及列固定相关推荐
- bootstrap表头如何展示不动_bootstrap-table实现表头固定以及列固定的方法示例
之前使用bootstrap写了一个报表表格,最近突然找到我,说让我看看能不能将表格的表头和第一列进行固定,这样的话方便查看数据,于是,我开始了苦逼的研究起来,毕竟我是个后端啊,对于前端的样式问题,特别 ...
- bootstarp js设置列隐藏_bootstrap table getHiddenColumns获取隐藏的列的方法
bootstrap table getHiddenColumns获取隐藏的列的方法 bootstrap table getHiddenColumns获取表格隐藏的列,即获取哪些列当前不可见的列,因为有 ...
- 使用ant design的table控件最后一列固定(fixed)遇到的问题
工作以来一直在做2b的项目,因此表单操作,权限设置,一些业务逻辑就做的比较多. 首先介绍下背景:前后端完全分离,前端技术栈使用react+redux+antd,经常是没有视觉设计,全凭产品需求文档·· ...
- bootstrap表头如何展示不动_bootstrap-table固定表头固定列
1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js data-tog ...
- bootstrap 树形表格渲染慢_bootstrap table轻松实现数据表格
在使用bootstrap table时可能在很多时候回用的表格来显示数据,如果自己写那肯定没问题,但是数据展示出来就麻烦多了,然而bootstrap table 封装了一套完善的数据表格组件,把从后台 ...
- bootstrap 点击按钮刷新_bootstrap table onRefresh刷新事件
bootstrap table onRefresh刷新事件 bootstrap table刷新按钮事件,当然开启了showRefresh:"true"显示刷新按钮,用户点击刷新按钮 ...
- bootstrap table 怎么实现前两列固定冻结?
$("#Table").bootstrapTable('destroy').bootstrapTable({pagination: true,//分页minimumCountCol ...
- elementui 表格表头竖着显示_elementUI Table表格表头自定义
element UI 官方文档有一个 :render-header 的方法 渲染自定义结构用的是 vue 的h函数 也就是render 函数写法 //html align="center&q ...
- bootstrap中固定table的表头
前端时间鼓捣的一个简单的手机网站,今天又拿出来弄一弄 因为主要是给手机访问,用的是bootstrap响应式布局,今天的任务是做一个数据展示页面 但是由于数据的列比较多,所以横向显示不下,为了较好的显示 ...
最新文章
- 《数据虚拟化:商务智能系统的数据架构与管理》一 1.11 数据集成的其他方式...
- 纯CSS 实现组织架构图,学习
- Win32 API CreateCompatibleDC 函数的相关应用
- visual studio code python环境配置_visual-pushing-grasping环境配置及复现
- #51CTO学院四周年# 51CTO与我的大学生活
- docker下交叉编译环境配置
- 谷歌浏览器flash_谷歌浏览器不支持Flash Player的问题
- FATAL ERROR: Could not find ./bin/my_print_defaults 解决方法
- python 白化_Python新疆某气候要素IDW(反距离权重)插值
- linux shell脚本判断文件行数,判断文件是否存在的shell脚本代码
- 农村树上的野菜“刺老芽”,价格比肉还贵,这是为啥呢?
- oracle 下载 pb12.5,PowerBuilder
- 【牛客网-公司真题-前端入门篇】——如何快速上手牛客
- MAXHUB会议平板的无线投屏怎么用?
- 若依ruoyi框架整合magic-api增删改查Demo
- html页面发送微信朋友圈,【源码分享】分享一个基于官方share.html简化的分享js代码(微信,朋友圈,QQ)...
- php unhtml包,JavaScript 版本的 PHP serialize/unse_js
- ubuntu更换源报 E: Failed to fetch。。。。错误的解决办法
- 4 of 100 days
- GNSS数据下载网站
热门文章
- 下拉推广系统立择火星推荐_下拉框软件都择火星下拉下拉框软件速来火星下拉...
- 计算机基础里适合做微课的知识点,微课在计算机基础教学中的要求和应用
- WPF 控件专题 ListView 样式(斑马线)
- 基于JavaWeb三层架构的OA管理系统
- 易语言视频教程(黑旋易语言教程)一套
- 网络安全-DNS欺骗与钓鱼网站
- 第二届 “国信蓝点”软件设计大赛 C语言模拟题(附程序题 解题程序)
- oracle远程导出数据是卡住了,告急!!!备份oracle数据库时卡住不动求解释,求解决方法!谢谢希望牛人帮忙 - Oracle论坛 - 51CTO技术论坛_中国领先的IT技术社区...
- 精通国际象棋的AI研究员:AlphaZero真的是一次突破吗?
- jQuery使用addClass添加样式不生效