本博客技术基于参考 懒得安分 的博客实现的技术
原文链接:
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的 冻结列 功能:彻底解决高度问题
如有侵权,请联系本人删除;欢迎转载,但请说明出处