bootstrap-table固定表头,同时适配高度,固定列解决方案

来源:互联网 发布:解放军土鳖 知乎 编辑:程序博客网 时间:2024/05/21 06:58

本博客技术基于参考 懒得安分 的博客实现的技术
原文链接:
JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能:彻底解决高度问题

在此非常感谢这位大神:懒得安分

懒得安分实现了左侧固定并适配固定高度,同时在上文中,在此实现右侧固定,并且实现按钮事件转移,但是没有时间继续实现适配固定高度。

本人业务需求需要实现表头,左右列固定,并适配高度,
实现效果如下:
这里写图片描述

同时修复了当没有固定高度的后的效果,防止样式丢失和重叠,空白等,也就是数据过少是,滑动框隐藏,样式不会乱;

if(typeof($('.clearfix'))!=='undefined'){                var height = this.$tableBody.height() - 17;            }else{                var height = this.$tableBody.height();            };            if (!this.$body.find('> tr[data-index]').length) {                this.$rightFixedBody.hide();                return;            }

类似这样的代码实现效果;

使用配置:在bootstrap-table初始化的时候,加入下面配置。记得引入js插件

       leftFixedColumns: true,       leftFixedNumber: 1,       rightFixedColumns: true,       rightFixedNumber: 1,

修改后的bootstrap-table-fixed-columns.js
,点击上面进行下载,如有疑问联系本人。

再次声明,非常感谢懒得安分大神
原文链接:
JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能:彻底解决高度问题

如有侵权,请联系本人删除;欢迎转载,但请说明出处

原创粉丝点击