Bootstrap Table Reorder Rows

Die Reorder-Rows-Erweiterung der Bootstrap Table.

Abhängigkeit: tablednd v0.9

Wenn Sie möchten, können Sie die bootstrap-table-reorder-rows.css Datei einfügen, um die Standard-dragClass zu verwenden.

Verwendung

<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>

Beispiel

Reorder Rows

Optionen

reorderableRows

• Attribut: data-reorderable-rows

• Typ: Boolean

• Detail:

  Setzen Sie true, um die Reorder-Funktion zu ermöglichen.

• Standard: false

onAllowDrop

• Attribut: data-on-allow-drop

• Typ: function

• Detail:

  Übergeben Sie eine Funktion, die aufgerufen wird, wenn eine Zeile über eine andere Zeile geführt wird. Wenn die Funktion true zurückgibt, ist das Ablegen auf dieser Zeile erlaubt, sonst nicht. Die Funktion nimmt 4 Parameter entgegen:

  • die gezogene Zeilen-Daten
  • die Daten der Zeile unter dem Cursor
  • die gezogene Zeile
  • die Zeile unter dem Cursor

  Sie gibt einen Boolean zurück: true erlaubt das Ablegen, false erlaubt es nicht.

• Standard: null

onDragStop

• Attribut: data-on-drag-stop

• Typ: function

• Detail:

  Übergeben Sie eine Funktion, die aufgerufen wird, wenn der Benutzer das Ziehen stoppt, unabhängig davon, ob die Zeilen neu angeordnet wurden. Die Funktion nimmt 3 Parameter entgegen: die Tabelle, die Zeilen-Daten und die Zeile, die der Benutzer gezogen hat.

• Standard: null

onDragStyle

• Attribut: data-on-drag-style

• Typ: String

• Detail:

  Dies ist der Stil, der der Zeile während des Ziehens zugewiesen wird. Es gibt Beschränkungen bei den Stilen, die einer Zeile zugeordnet werden können (z. B. können Sie einen Rand nicht zuweisen, obwohl Sie es können, aber er wird nicht angezeigt).

• Standard: null

onDragClass

• Attribut: data-on-drag-class

• Typ: String

• Detail:

  Diese Klasse wird für die Dauer des Ziehens hinzugefügt und dann entfernt, wenn die Zeile fallen gelassen wird. Sie ist flexibler als die Verwendung von onDragStyle, da sie von den Zeilen-Zellen und anderem Inhalt geerbt werden kann.

• Standard: reorder-rows-on-drag-class

onDropStyle

• Attribut: data-on-drop-style

• Typ: String

• Detail:

  Dies ist der Stil, der der Zeile zugewiesen wird, wenn sie fallen gelassen wird. Wie bei onDragStyle gibt es Beschränkungen bei dem, was Sie tun können. Außerdem ersetzt dies den ursprünglichen Stil, also denken Sie erneut daran, onDragClass zu verwenden, die einfach hinzugefügt und dann beim Ablegen entfernt wird.

• Standard: null

onReorderRowsDrag

• Attribut: data-on-reorder-rows-drag

• Typ: Function

• Detail:

  Übergeben Sie eine Funktion, die aufgerufen wird, wenn der Benutzer mit dem Ziehen beginnt. Die Funktion nimmt 1 Parameter entgegen: die Zeile, die der Benutzer zu ziehen begonnen hat.

• Standard: leere Funktion

onReorderRowsDrop

• Attribut: data-on-reorder-rows-drop

• Typ: Function

• Detail:

  Übergeben Sie eine Funktion, die aufgerufen wird, wenn die Zeile fallen gelassen wird. Die Funktion nimmt 1 Parameter entgegen: die Zeile, die fallen gelassen wurde.

• Standard: leere Funktion

dragHandle

• Attribut: data-drag-handle

• Typ: String

• Detail:

  Dies ist das Cursor-Element.

  Hinweis: Diese Option wird hauptsächlich verwendet, um sich an das TableDnD Plugin anzupassen. Unter normalen Umständen ändern Sie den Standardwert bitte nicht.

• Standard: >tbody>tr>td:not(.bs-checkbox)

useRowAttrFunc

• Attribut: data-use-row-attr-func

• Typ: Boolean

• Detail:

  Diese Funktion muss verwendet werden, wenn Ihre tr-Elemente nicht über das id-Attribut verfügen. Wenn Ihre tr-Elemente nicht über das id-Attribut verfügen, löst dieses Plugin das onDrop-Ereignis nicht aus.

• Standard: false

Events

onReorderRow(reorder-row.bs.table)

Wird ausgelöst, wenn die Zeile fallen gelassen wurde, empfängt zwei Parameter:

• Die neuen Tabellen-Daten
• Die fallen gelassene Zeile
• Die Zeile der alten Position