bootstrap table 设置了高度,jquery.resizableColumns.min.js列表宽度不能拖动了
时间: 2023-06-19 18:06:03 浏览: 259
可能是因为 `jquery.resizableColumns.min.js` 中的代码没有考虑到表格设置了高度的情况。你可以尝试修改这个库的源代码,让它能够适应表格高度的设置,或者使用其他支持表格高度设置的库。
另外,你也可以尝试使用 `bootstrap-table-resizable` 这个库来实现表格列宽度的拖动功能,它支持表格高度设置,并且具有更好的兼容性和稳定性。你可以在这里找到它的使用文档和示例:https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/resizable
相关问题
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 实现表头固定,列宽可拖动改变宽度大小
可以通过使用 Bootstrap Table 插件结合一些其他的插件来实现表头固定和列宽可拖动改变宽度大小的效果。
首先,你可以使用 Bootstrap Table 自带的 `fixedHeader` 属性来实现表头固定。这个属性可以将表头固定在页面顶部,使其在滚动页面时保持可见。
```javascript
$('#table').bootstrapTable({
fixedHeader: true
});
```
接下来,你可以使用 `resizable` 插件来实现列宽可拖动改变宽度大小的效果。这个插件可以让用户通过鼠标拖动列边缘来改变列的宽度。
```javascript
$('#table').resizableColumns({
store: window.store
});
```
其中,`window.store` 是一个用于存储列宽信息的对象。你可以根据需要自定义这个对象。
最后,你需要引入相应的插件文件。具体来说,你需要引入以下文件:
- `jquery.resizableColumns.js`:`resizable` 插件文件;
- `jquery.resizableColumns.css`:`resizable` 插件样式文件。
这些文件可以从 `resizable` 插件的 GitHub 仓库中下载。
```html
<link rel="stylesheet" href="jquery.resizableColumns.css">
<script src="jquery.resizableColumns.js"></script>
```
综上所述,下面是一个完整的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Table</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="jquery.resizableColumns.css">
</head>
<body>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="jquery.resizableColumns.js"></script>
<script>
$('#table').bootstrapTable({
fixedHeader: true
});
$('#table').resizableColumns({
store: window.store
});
</script>
</body>
</html>
```
阅读全文
相关推荐
















