el table 固定表头和首行_bootstrap table 固定 表头 冻结 窗格 固定首行 冻结首行 fixed 对齐 分享...
改成这样即可解决溢出的BUG
//首行//点击分页时候内容改变了,表格宽度就有变化,我们需要动态的修改固定表头的宽度,所以开始的时候删除上次添加的表头重新生成
if($("#shelter").length > 0) {
//元素存在时执行的代码
$('#shelter').remove();
}
var sourceTable = $("#table");//源表格的ID
var sourceTableHead = $("#table thead");//需要的表头部分
var headHeight = sourceTableHead.height();//部分的高度
var sourceTableWidth = sourceTable.outerWidth(); //源表格宽度
var testDiv = $(".fixed-table-body"); //测试内容宽度
var wrapDiv = $(".fixed-table-container"); //滚动条外部ID,测量DIV与头部的高度
var tempTop = wrapDiv.offset().top - $(window).scrollTop(); //测量DIV与网页的高度
//从源表格copy一个份表头和其中元素插入
//插入一个表格用来存放我们要固定的表头
$('#table').append('
var maintable = $("#maintable");
var fixTopDiv = $("#shelter");
fixTopDiv.hide();
maintable.hide();
//首行固定,首行先左侧滑动
fixTopDiv.css({
'height':headHeight,
'position':'relative',
'top':tempTop+"px",
'left':'30',
'width':testDiv.width()+"px",
'overflow':'hidden'
});
//设置fixed表头的宽度与源一致
$("#fixed_table_wrap,#fixed_table").css({'width':sourceTableWidth+"px"});
//设置每一个th元素与源th宽度一致达到对齐的效果,并且每次点击分页按钮时候都会重新设置
var targetHead = sourceTableHead.clone().attr('id','fix_head');
//这个加入位置比较偷懒的继承了bootstrap-table的结构css样式,使得的表头与源表样式一致
targetHead.appendTo('#fixed_table');
$("#table thead tr th").each(function(index,value){
var tempWidth = $(value).outerWidth();
var tempHeight = $(value).outerHeight();
$("#fixed_table th").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});
});
//div内容scroll
wrapDiv=$(".fixed-table-body");
wrapDiv.scroll(function(){
//与源表格同步左右滑动
var sl=-Math.max(wrapDiv.scrollLeft(),$('document').scrollLeft());
if(isNaN(sl)){
sl = - wrapDiv.scrollLeft();
}
fixTopDiv.css("left",(sl+30)+'px');
var scroll_top = wrapDiv.scrollTop() - headHeight + $(window).scrollTop();
tempTop = wrapDiv.offset().top - $(window).scrollTop();
if(tempTop <= 0){
tempTop = 0;
}
var baseWidth = testDiv.width() + wrapDiv.scrollLeft();
//控制隐藏或显示
if (scroll_top >= 0) {
fixTopDiv.css({'top':(tempTop-30) +"px",'width':baseWidth+"px"});
if(!fixTopDiv.is(':visible')){
fixTopDiv.show();
maintable.show();
}
}else {
if(fixTopDiv.is(':visible')){
fixTopDiv.hide();
maintable.hide();
}
}
});
//浏览器scroll
$(window).on('scroll',function(){
tempTop = wrapDiv.offset().top - $(window).scrollTop();
var scroll_top = wrapDiv.scrollTop() - headHeight + $(window).scrollTop();
var baseWidth = testDiv.width() + wrapDiv.scrollLeft();
if(tempTop <= 0){
tempTop = 0;
}
fixTopDiv.css({'top':(tempTop-30) +"px",'width':baseWidth+"px"});
//控制显示或输出
if (scroll_top >= 0) {
if(!fixTopDiv.is(':visible')){
fixTopDiv.show();
maintable.show();
}
}else {
if(fixTopDiv.is(':visible')){
fixTopDiv.hide();
maintable.hide();
}
}
});
//首行结束
el table 固定表头和首行_bootstrap table 固定 表头 冻结 窗格 固定首行 冻结首行 fixed 对齐 分享...相关推荐
- 冻结拆分_还不会固定表头?速来围观Excel冻结窗格实战教程
我们知道,一个完整的表格中,表头是不可或缺的组成部分之一.表头可以提示我们某一行或某一列是什么内容. 但如果在行数或列数很多的情况下,随着鼠标的滚动,表头往往也随之消失,表格内容的辨识性也就大打折扣. ...
- 实现固定表头和表列的table组件
前端的table在设置overflow后横向.纵向滚动.但数据比较多时,为了查看方便,希望能在纵向滚动时固定表头,在横向滚动时在左边或右边固定特定表列,这是原生不支持的. 目录 实际效果 设计思路 普 ...
- QSortFilterProxyModel实现筛选与排序固定行号(垂直表头序号)
上一篇我们讲述了数据更新相关: (43条消息) QAbstractTableModel使用详解&数据单条更新&整体更新_恭德的博客-CSDN博客https://blog.csdn.ne ...
- qtabwidget设置表头_Qt GUI图形图像开发之QT表格控件QTableView,QTableWidget复杂表头(多行表头) 及冻结、固定特定的行的详细方法与实例...
我们在开发过程中对于表格使用频率还是挺高的,使用QT框架开发时候我们使用QTableView或者QTableWidget创建表格. 其中表格分为 表格头与表格体: 对于简单地表格,我们可以设置表头来满 ...
- tablewidget 多行表头_Qt GUI图形图像开发之QT表格控件QTableView,QTableWidget复杂表头(多行表头) 及冻结、固定特定的行的详细方法与实例...
我们在开发过程中对于表格使用频率还是挺高的,使用QT框架开发时候我们使用QTableView或者QTableWidget创建表格. 其中表格分为 表格头与表格体: 对于简单地表格,我们可以设置表头来满 ...
- QT QTableView QTableWidget 复杂表头(多行表头) 、(冻结、固定特定的行)
demo下载地址在最后 ================================分割线====================================== 对于所有前端开发人员会留意到 ...
- iview table 自定义列_案例 | iview中Table:拖拽适配列、自定义固定列、合并行
文 / 景朝霞 来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing ❥❥❥❥点个赞,让我知道你来过~❥❥❥❥ 0 / 更新Table "iview": &quo ...
- 固定表头如何设置_Excel如何设置固定表头?快速一键冻结窗格!
Excel如何设置固定表头?快速一键冻结窗格! Excel在办公中主要用来制作各种数据表格,表格除了数据还应具有标题行.项目列等基础内容,统称为表头.在数据表格的查阅过程中,如果表格数据过长,当滚动到 ...
- 打印冻结窗格怎么保证每页都有_EXCEL固定表头_冻结窗口以及打印的应用方法
EXCEL冻结窗口以及打印的应用方法 在日常工作过程中遇到很多类似于平时文件打印以及表格应用的问题.例如:我的同事由于办公软件的不熟练,导致工作效率下降,被领导批评!在统计以及制作表格过程中时常遇到有 ...
- Element Table 单元格中嵌套表格(Table) 合并行效果
在Element中实现表格合并行功能一般是通过自定义span-method方法,此方法要求表格数据源中需要合并行的单元格中数据相同,根据相同数据来实现合并算法. 本例通过在父Table单元格中嵌套子T ...
最新文章
- 基于TF-IDF编码进行文本聚类分析:文档成对相似性计算、层次聚类(链接矩阵、树形图dendrogram绘制、聚类标签)
- java 真数组 伪数组_伪数组(ArrayLike)
- 苹果怎样运行低版本php,Mac如何安装多个php版本
- Day 29:编写你的第一个 Google Chrome 扩展程序
- Qt 设置应用程序开机自启动
- python—while循环、字符串
- 上传图片至服务器,写入到数据库Blob字段中,以及从数据库读取Blob信息(iframe父子页面传值)(1)
- 效果良好!构造一个输入速度的神经网络,以DQN方式实现小游戏的自动控制
- result之global-results全局结果集
- 3-4 文件读写例子(2)
- Numpy、SciPy、MatPlotLib在Python2.7.9下的安装与配置
- 计算机硬件配置及安装,电脑硬件及电脑配置知识大全
- git小乌龟版本回退
- java数据结构——哈希表
- 两个高斯分布乘积的理论推导
- solr使用shards提示403
- PHP 图片转base64编码 和 base64编码字符串转换成图片保存
- 数组(初识、创建数组、数组的元素、数组的变量)
- 聚美自建的“真品联盟”被京东捅破的窗户纸
- 实战案例讲解:用户画像如何应用?