在 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 開始）。