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的 冻结列 功能:彻底解决高度问题

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

你可能感兴趣的:(bootstrap笔记,javascript)