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，用是可以用，但是个人感觉没有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属性和列对齐冲突，我两个都想要，但是不知道怎么解决。。。