bootstrap table 设置了高度, bootstrap-table-resizable列表宽度不能拖动了
时间: 2023-06-19 11:06:03 浏览: 132
Bootstrap Table Resizable 插件是用来实现 Bootstrap Table 列表的宽度可拖拽的功能,但是如果你设置了表格的高度,可能会导致该插件无法正常工作。
解决方案是在设置表格高度的同时,同时也需要设置表格容器的高度,并且将表格容器的 `overflow` 属性设置为 `auto`,这样就可以让 Bootstrap Table Resizable 插件正常工作了。
以下是一个示例代码:
```html
<div class="table-responsive" style="height: 200px; overflow: auto;">
<table id="table" class="table table-bordered table-striped"></table>
</div>
<script>
$(function() {
$('#table').bootstrapTable({
// 表格的配置
});
// 初始化表格可拖拽列宽度的插件
$('#table').resizableColumns({
// 插件的配置
});
});
</script>
```
注意,表格容器的高度需要大于等于表格的高度,否则会导致表格溢出容器而无法正常显示。
相关问题
bootstrap table 设置了高度,实现列表宽度可拖动
可以使用 bootstrap-table-resizable 插件来实现表格列宽度可拖动。
首先,在 HTML 中引入以下资源:
```html
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table-resizable/0.1.2/bootstrap-table-resizable.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table-resizable/0.1.2/bootstrap-table-resizable.min.js"></script>
```
然后,在 JavaScript 中初始化表格,并启用可拖动列宽度的功能:
```javascript
$(function() {
$('#table').bootstrapTable({
height: 400, // 设置表格高度
resizable: true, // 启用列宽度可拖动
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '名称'
}, {
field: 'price',
title: '价格'
}]
});
});
```
最后,在 HTML 中添加表格元素:
```html
<table id="table"></table>
```
这样就可以实现表格列宽度可拖动的效果了。
bootstrap table 设置了高度,jquery.resizableColumns.min.js列表宽度不能拖动了
可能是因为 `jquery.resizableColumns.min.js` 中的代码没有考虑到表格设置了高度的情况。你可以尝试修改这个库的源代码,让它能够适应表格高度的设置,或者使用其他支持表格高度设置的库。
另外,你也可以尝试使用 `bootstrap-table-resizable` 这个库来实现表格列宽度的拖动功能,它支持表格高度设置,并且具有更好的兼容性和稳定性。你可以在这里找到它的使用文档和示例:https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/resizable
阅读全文