bootstrap table 拖动列实现以及问题

依赖

<!--拖动调整列宽相关-->
<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这个js，用是可以用，但是个人感觉没有colResizable这个插件好用

我这里用的是colResizable

js：

tableInit:function () {
        $('#tb').bootstrapTable('destroy').bootstrapTable({
            略，
            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'//允许溢出父容器
        });

然后问题就来了，我的拖动光标只在table body的第一行显示，并不是显示在header表头显示的。

然后拖动第一行只能调整body的列宽，导致表头和内容不对齐

我的解决：增加拖动事件，在拖动同时调整表头宽度

$('#tb').colResizable({
    liveDrag:true,//拖动列时更新表布局
    gripInnerHtml:"<div class='grip'></div>",
    draggingClass:"dragging",
    resizeMode:'overflow',//允许溢出父容器
    //拖动事件
    onDrag: function () {
        $('#tb').bootstrapTable("resetView")
    }
});

但是拖动光标的问题还在，不知道问题处在哪里，期待各位大哥能解决并告知，谢谢

bootstrap table 拖动列实现以及问题

猜你喜欢