前言
正在做一个老的项目,依赖乱七八糟,一个页面引N多的依赖,但是没办法,功能还是要实现
目标:在bootstrapTable
的基础上,实现表格列宽度可随意拖动
方案
比较稳妥的还是使用官方的插件方案,利用
bootstrap-table-resizable
教程在这:官方插件
使用步骤
1.引入依赖
<!--官方示例代码-->
<link href="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>
<table id="table"
data-show-columns="true"
data-search="true"
data-show-toggle="true"
data-pagination="true"
data-url="json/data1.json"
data-resizable="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
<script>
$(function() {
$('#table').bootstrapTable()
})
</script>
- 要点:不清楚这3个JS库的依赖顺序,所以顺序还是不要乱
2. 开启
在bootstrapTable配置中加入一项
$().bootstrapTable({
resizable: true
})
3. 建议把每一列都给一个固定宽度,如果按照默认展开,最大宽度仅仅是屏幕宽度,可拉伸的范围不是很大
4. 万事大吉
BUG预告
不要配置固定的高度,与伸缩resizable冲突,会造成数据可以伸缩但是表头不能伸缩的情况