bootstrap table 拖动列实现以及问题

Posted 2023-02-15 Arvin_Wong

依赖

<!--拖动调整列宽相关-->
<script type="text/javascript" src="bootstrap-table/extensions/resizable/bootstrap-table-resizable.js"></script>
<script type="text/javascript" src="bootstrap-table/extensions/resizable/colResizable-1.6.js"></script>

这里使用bootstrap table的extensions扩展js：bootstrap-table-resizable.js

官网里说是依赖 jquery-resizable-columns，用是可以用，但是个人感觉没有colResizable这个插件好用

我这里用的是colResizable

js：

tableInit:function () 
        $('#tb').bootstrapTable('destroy').bootstrapTable(
            略，
            height: $(window).height() * (0.85),
            columns: [
                
                    title: '序号',//标题  可不加
                    width:'64px',
                    align: 'center',
                    vAlign: 'middle',
                    formatter: function (value, row, index) 
                        return index+1;
                    
                ,
                
                    title: '单号',
                    field: 'orderId',
                    align: 'center',
                    vAlign: 'middle',
                    sortable : true
                ,...
            ]
        );
        $('#tb').colResizable(
            liveDrag:true,//拖动列时更新表布局
            gripInnerhtml:"<div class='grip'></div>",
            draggingClass:"dragging",
            resizeMode:'overflow'//允许溢出父容器
        );

然后问题就来了

     1.拖动光标只在table body显示，并不是在header表头显示的

     2.拖动只能调整body的列宽，导致表头和内容不对齐

我的解决：去除初始化时的height属性

tableInit:function () 
        $('#tb').bootstrapTable('destroy').bootstrapTable(
            略，
            //height: $(window).height() * (0.85),
            ...
        );

拖动光标第一次只能在header出现，拖动一次后，在header和body中都会出现，emmm勉强算是解决了

bootstrap table的height属性和列对齐冲突，我两个都想要，但是不知道怎么解决。。。