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)

行放置完成時觸發，參數包括：

• 新的表格數據
• 被拖動的行
• 原位置所在的行