在 GitHub 上查看

Table Reorder Columns

Bootstrap Table 的列重排扩展，允许通过拖拽方式调整表格列的顺序。

本页目录

依赖项

该扩展依赖以下库：

用法

<link rel="stylesheet" href="dragtable.css">
<script src="jquery-ui.js"></script>
<script src="jquery.dragtable.js"></script>
<script src="extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>

示例

Reorder Columns

选项

reorderableColumns

  • 属性: data-reorderable-columns

  • 类型: Boolean

  • 详情:

    控制是否启用列拖拽功能。设置为 true 时，允许用户通过拖拽表头调整列顺序。

  • 默认值: false

dragaccept

  • 属性: data-dragaccept

  • 类型: String

  • 详情:

    仅允许拖拽具有指定 CSS 类的列。

  • 默认值: null

maxMovingRows

  • 属性: data-max-moving-rows

  • 类型: Integer

  • 详情:

    控制拖拽时同时移动的行数。设置为 1 时仅移动表头，推荐在超大表格（单元格数量 > 1000）时使用此设置以提升性能。

  • 默认值: 10

事件

onReorderColumn (reorder-column.bs.table)

当列拖拽完成时触发，参数为新的表头字段顺序。

方法

orderColumns

  • 参数: object，例如 {name: 0, price: 1}

  • 详情:

    根据传入的配置对象重新排列列顺序。对象的键为 field（列字段名），值为列索引（从 0 开始）。