在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table实现的，要求能利用拖动改变列宽，现将实现的过程记录如下：

　　1. Bootstrap Table可拖动，需要用到它的Resizable扩展插件，具体可见bootstrap-table的官方文档链接：http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/

进入之后，找到Resizable插件，点击Home进入github可以找到详细的用法。

　　　　　　　　

　　2. 用法是直接引入该js插件，不过可以看到，这个插件还依赖于colResizable v1.6（下载地址：http://www.bacubacu.com/colresizable/）

<script src="colResizable-1.6.min.js"></script>
<script src="extensions/bootstrap-table-resizable.js"></script>

　　3. 另外，在使用Bootstrap Table的时候，建议用js去设置table的列属性，即按照如下方式：

$(\'#myTable\').bootstrapTable({  
                url: url,
        method: \'post\',  
        columns:[{

            align: \'center\',
            checkbox:true,
            width:\'15\',
            valign: \'middle\'
        },{
            field: \'name\',
            title: \'名称\',
            align: \'center\',
            width:\'100\',
            valign: \'middle\'
        },{
            field: \'desc\',
            title: \'描述\',
            width:500,
            align: \'left\',
            valign: \'middle\'
        }]
});

　　上面这种方式可以通过修改width的大小来直接修改列的宽度。而还有一种写法是在HTML中设置table的列头部，这种方式是很难调整宽度的，且很容易导致列头与内容无法对齐，是不推荐的，例如：

        <thead>
            <tr>
                <th data-field="id" data-width="50px">编号</th>
                <th data-field="name" data-width="100px">姓名</th>
                <th data-field="desc" data-width="120px">描述</th>
            </tr>
        </thead>

　　




　

版权声明：本文为legend-123原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/legend-123/p/9478799.html