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

本博客技术基于参考 懒得安分 的博客实现的技术
原文链接:
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的 冻结列 功能:彻底解决高度问题

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

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值