Bootstrap Table列宽拖动的方法
2018-10-15 18:06
阅读：715
在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table做的，客户要求能利用拖动改变列宽，为了总结和备忘，现将实现的过程记录如下：
1. Bootstrap Table可拖动，需要用到它的Resizable扩展插件，具体可见bootstrap-table的官方文档链接：
进入之后，找到Resizable插件，点击Home进入github可以找到详细的用法。
2. 用法是直接引入该js插件，不过可以看到，这个插件还依赖于colResizable v1.6（下载地址：）
<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>总结
以上所述是小编给大家介绍的Bootstrap Table列宽拖动的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
评论
亲，登录后才可以留言！