在之前做过的一个 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>
总结
以上所述是小编给大家介绍的 Bootstrap Table 列宽拖动的方法, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/145647.htm