Table Reorder Rows

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

依赖项

该扩展依赖 tablednd v0.9 库。

默认拖拽样式

如需使用默认的拖拽样式，可以额外引入 bootstrap-table-reorder-rows.css 文件。

用法

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

示例

Reorder Rows

选项

reorderableRows

• 属性: data-reorderable-rows

• 类型: Boolean

• 详情:

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

• 默认值: false

onAllowDrop

• 属性: data-on-allow-drop

• 类型: function

• 详情:

  拖动行悬停在另一行上时调用。若函数返回 true，表示允许在该行上放置；否则不允许。入参共 4 个：

  • 被拖行的数据
  • 光标所在行的数据
  • 被拖行的 DOM 元素
  • 光标所在行的 DOM 元素

• 默认值: null

onDragStop

• 属性: data-on-drag-stop

• 类型: function

• 详情:

  拖拽结束时调用，无论是否改变顺序。入参为表格、被拖行的数据、被拖行的 DOM 元素。

• 默认值: null

onDragStyle

• 属性: data-on-drag-style

• 类型: String

• 详情:

  拖拽过程中为行应用的样式。受限于浏览器特性，某些样式（如边框）无法生效。

• 默认值: null

onDragClass

• 属性: data-on-drag-class

• 类型: String

• 详情:

  拖拽期间添加的类名，放置后会移除。相比 onDragStyle 更灵活，可继承至单元格等内容。

• 默认值: reorder-rows-on-drag-class

onDropStyle

• 属性: data-on-drop-style

• 类型: String

• 详情:

  行放置后应用的样式，同样存在样式限制；且会替换原样式，如无必要建议使用 onDragClass。

• 默认值: null

onReorderRowsDrag

• 属性: data-on-reorder-rows-drag

• 类型: Function

• 详情:

  用户开始拖拽时调用，参数为被拖行的 DOM 元素。

• 默认值: 空函数

onReorderRowsDrop

• 属性: data-on-reorder-rows-drop

• 类型: Function

• 详情:

  行放置时调用，参数为被放置的 DOM 元素。

• 默认值: 空函数

dragHandle

• 属性: data-drag-handle

• 类型: String

• 详情:

  指定拖拽时使用的光标元素。

  注意：该选项主要用于适配 TableDnD 插件，非特殊需求请勿修改默认值。

• 默认值: >tbody>tr>td:not(.bs-checkbox)

useRowAttrFunc

• 属性: data-use-row-attr-func

• 类型: Boolean

• 详情:

  当 tr 元素没有 id 属性时必须启用，否则插件不会触发 onDrop 事件。

• 默认值: false

事件

onReorderRow (reorder-row.bs.table)

行放置完成时触发，参数包括：

• 新的表格数据
• 被拖动的行
• 原位置所在的行