Bootstrap Table列宽拖动的方法

在之前做过的一个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/ ）

rush:js;">

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

rush:js;"> $('#myTable').bootstrapTable({ url: url,method: 'post',columns:[{

  align: 'center',check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>:true,width:'15',valign: 'middle'
},{
  field: 'name',title: '<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>',align: 'center',width:'100',{
  field: 'desc',title: '描述',width:500,align: 'left',valign: 'middle'
}]

});

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

rush:js;">

总结

以上所述是小编给大家介绍的Bootstrap Table列宽拖动的方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。