GitHub で確認

表の行の並べ替え

Bootstrap Table の行の並べ替え拡張機能。

依存関係: tablednd v0.9

必要に応じて、デフォルトの dragClass を使用する 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>

例

行の並べ替え

オプション

reorderableRows

属性: data-reorderable-rows
型: Boolean
詳細

並べ替え機能を有効にするには true に設定します。
デフォルト: false

onAllowDrop

属性: data-on-allow-drop
型: function
詳細

行が別の行の上に置かれたときに呼び出される関数を渡します。関数が true を返す場合、その行へのドロップが許可されます。そうでない場合は許可されません。この関数は4つのパラメータを取ります。
- ドラッグされた行のデータ
- カーソル下の行のデータ
- ドラッグされた行
- カーソル下の行
ブール値を返します。true はドロップを許可し、false はドロップを許可しません。
デフォルト: null

onDragStop

属性: data-on-drag-stop
型: function
詳細

行が再配置されたかどうかに関係なく、ユーザーがドラッグを停止したときに呼び出される関数を渡します。この関数は、テーブル、行データ、ユーザーがドラッグしていた行の3つのパラメータを取ります。
デフォルト: 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
詳細

これは、行がドロップされたときに割り当てられるスタイルです。onDragStyle と同様に、実行できることには制限があります。また、これは元のスタイルを置き換えるため、onDragClass の使用を検討してください。これは単に追加され、ドロップ時に削除されます。
デフォルト: null

onReorderRowsDrag

属性: data-on-reorder-rows-drag
型: Function
詳細

ユーザーがドラッグを開始したときに呼び出される関数を渡します。この関数は、ユーザーがドラッグを開始した行を1つのパラメータとして取ります。
デフォルト: 空関数

onReorderRowsDrop

属性: data-on-reorder-rows-drop
型: Function
詳細

行がドロップされたときに呼び出される関数を渡します。この関数は、ドロップされた行を1つのパラメータとして取ります。
デフォルト: 空関数

dragHandle

属性: data-drag-handle
型: String
詳細

これはカーソル要素です。

注: このオプションは主に TableDnD プラグインに適応するために使用されます。特別な事情がない限り、デフォルト値を変更しないでください。
デフォルト: >tbody>tr>td:not(.bs-checkbox)

useRowAttrFunc

属性: data-use-row-attr-func
型: Boolean
詳細

tr 要素に id 属性がない場合、この関数を必ず使用する必要があります。tr 要素に id 属性がない場合、このプラグインは onDrop イベントを発生させません。
デフォルト: false

イベント

onReorderRow(reorder-row.bs.table)

行がドロップされたときに発生し、2つのパラメータを受け取ります。

新しいテーブルデータ
ドロップされた行
元の位置の行