テーブル行の並べ替え

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)

行のドロップが完了したときにトリガーされます。パラメータには以下が含まれます：

新しいテーブルデータ
ドラッグされた行
元の位置にある行