bootstrap-table 右上角设置列 拖动改变列顺序
时间: 2023-09-10 18:16:00 浏览: 209
对于使用 Bootstrap Table 实现右上角设置列拖动改变列顺序的功能,你可以按照以下步骤进行操作:
1. 首先,确保你已经引入了 Bootstrap 和 Bootstrap Table 的相关 CSS 和 JS 文件。
2. 在 HTML 中创建一个表格,并为其添加一个唯一的 ID,例如:
```html
<table id="myTable" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
<th data-field="date">Date</th>
</tr>
</thead>
<tbody>
<!-- 表格数据 -->
</tbody>
</table>
```
3. 在 JavaScript 中,使用 jQuery 或其他方式初始化表格,并启用列拖动功能。同时,你还需要引入 bootstrap-table-draggable-columns 插件。
```javascript
$(function() {
$('#myTable').bootstrapTable({
// 表格配置选项
}).draggableColumns();
});
```
4. 确保你已经在 HTML 中引入了 bootstrap-table-draggable-columns 插件的相关 CSS 和 JS 文件。
```html
<link rel="stylesheet" href="path/to/bootstrap-table-draggable-columns.css">
<script src="path/to/bootstrap-table-draggable-columns.js"></script>
```
5. 在网页中打开该页面,你应该能够看到表格右上角出现一个设置列的按钮。点击该按钮后,你可以通过拖动列来改变它们的顺序。
请注意,这种功能依赖于 Bootstrap Table 和 bootstrap-table-draggable-columns 插件,因此你需要确保它们都已正确引入,并按照上述步骤进行配置。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)