RowReorder

DataTables 通常用於顯示序列資料,因此自然而然會希望能夠重新排序資料 - 為此,可以使用 RowReorder 擴充功能。它讓終端使用者能夠點擊並拖曳(或在行動裝置上觸摸並拖曳)表格中的列,並變更其位置。同時也提供與 Editor 的多列編輯功能的完整整合,以便將更新自動寫入資料庫。

RowReorder 採用資料交換方法運作,因此即使在非序列資料上也能運作。例如,假設將某列拖曳到表格頂端,它會取得目前位於頂端位置的列的資料,目前頂端的列會移動到第二個位置,然後從第二個位置的列取得其新值,依此類推。所修改的列中的資料點是由 rowReorder.dataSrc 所定義。通常您會希望它是個序號!否則資料重新排序可能會讓終端使用者感到困惑!

下載

取得和使用 RowReorder 最簡單的方式是使用 DataTables 下載產生器,您可以在其中選擇您希望在頁面上使用的軟體,並為您建立單一的 JavaScript 和 CSS 檔案並進行託管。

或者,您可以將個別檔案包含在您的頁面上,下載發行套件,或在 GitHub 上複製原始碼控制儲存庫

初始化

可以透過在 DataTables 選項物件中使用 rowReorder 選項,在 DataTable 上初始化 RowReorder - 這只是一個布林值 true,表示列應該是可重新排序的,雖然也可以使用物件進行精細控制(請參閱參考文件以取得完整詳細資訊)。

$('#myTable').DataTable( {
    rowReorder: true
} );

功能

RowReorder 提供下列功能

  • 為 DataTables 提供具有點擊和觸摸支援的列重新排序功能
  • Editor 的完整整合
  • 可自訂的拖曳開始手柄
  • 拖曳對齊
  • 與 Bootstrap、Foundation 和 DataTables 支援的其他樣式函式庫的完整整合