bootstrap带左右固定列表格,列选择操作后,表头和内容无法对其问题。

通过属性showColumns: true,开始列选择后,
(1)列变动后,列总数量依然较多存在滚动轴时,右侧少一部分问题。
(2) 列变动后,选择列数较少时,左右固定列消失,表头和表格无法自适应对齐问题。

解决:通过onColumnSwitch 列切换操作时候的函数
 

onColumnSwitch:function(field, checked){
    if($('.fixed-columns-right .fixed-table-header .JCLRgrips').html()!= undefined){
        setTimeout(()=>{
//解决(1)
              $('.fixed-columns-right .fixed-table-header .JCLRgrips').css('display','none')
        })
    }else{
// 解决(2)
        setTimeout(()=>{
            $('.fixed-table-header').css('display','none')
            $('.bootstrap-table .fixed-table-container .table').css('marginTop','0px')
        })
    }
}
后来又发现点击排序按钮后,表头和内容又对不齐了
解决:
onPostBody: function (data) {
    if(data.length>0){
        if($('.fixed-columns-right').html()== ''){
            setTimeout(()=>{
                $('.fixed-table-header').css('display','none')
                $('.bootstrap-table .fixed-table-container #bootstrap-table').css('marginTop','0px')
            })
        }
    }

},
然后,表头固定列失效了,因为表头固定列的宽度计算方式和内容的不一致,滑动的时候,看不到表头了。。。。

猜你喜欢

转载自blog.csdn.net/weixin_40992252/article/details/136840204