Bootstrap Table Reorder Rows

Extension Table Reorder Rows de Bootstrap Table.

Sur cette page

Dépendance : tablednd v0.9

Si vous le souhaitez, vous pouvez inclure le fichier bootstrap-table-reorder-rows.css pour utiliser le dragClass par défaut.

Utilisation

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

Exemple

Réorganiser les lignes

Options

reorderableRows

attribut : data-reorderable-rows
type : Boolean
Détail :

Définissez true pour activer la fonctionnalité de réorganisation.
Par défaut : false

onAllowDrop

attribut : data-on-allow-drop
type : function
Détail :

Passez une fonction qui sera appelée lorsqu’une ligne est survolée par une autre ligne. Si la fonction retourne true, autorisez le dépôt sur cette ligne, sinon non. La fonction prend 4 paramètres :
- les données de la ligne déplacée
- les données de la ligne sous le curseur
- la ligne déplacée
- la ligne sous le curseur
Elle retourne un booléen : true autorise le dépôt, false ne l’autorise pas.
Par défaut : null

onDragStop

attribut : data-on-drag-stop
type : function
Détail :

Passez une fonction qui sera appelée lorsque l’utilisateur arrête de faire glisser, quelles que soient les lignes qui ont été réorganisées. La fonction prend 3 paramètres : le tableau, les données de la ligne et la ligne que l’utilisateur faisait glisser.
Par défaut : null

onDragStyle

attribut : data-on-drag-style
type : String
Détail :

C’est le style qui est attribué à la ligne pendant le glissement. Il y a des limitations aux styles qui peuvent être associés à une ligne (par exemple, vous ne pouvez pas attribuer une bordure - eh bien, vous pouvez, mais elle ne s’affichera pas).
Par défaut : null

onDragClass

attribut : data-on-drag-class
type : String
Détail :

Cette classe est ajoutée pendant la durée du glissement et ensuite supprimée lorsque la ligne est déposée. Elle est plus flexible que l’utilisation de onDragStyle car elle peut être héritée par les cellules de la ligne et autres contenus.
Par défaut : reorder-rows-on-drag-class

onDropStyle

attribut : data-on-drop-style
type : String
Détail :

C’est le style qui est attribué à la ligne lorsqu’elle est déposée. Comme pour onDragStyle, il y a des limitations sur ce que vous pouvez faire. De plus, cela remplace le style original, donc encore une fois, envisagez d’utiliser onDragClass qui est simplement ajouté et ensuite supprimé lors du dépôt.
Par défaut : null

onReorderRowsDrag

attribut : data-on-reorder-rows-drag
type : Function
Détail :

Passez une fonction qui sera appelée lorsque l’utilisateur commence à faire glisser. La fonction prend 1 paramètre : la ligne que l’utilisateur a commencé à faire glisser.
Par défaut : fonction vide

onReorderRowsDrop

attribut : data-on-reorder-rows-drop
type : Function
Détail :

Passez une fonction qui sera appelée lorsque la ligne est déposée. La fonction prend 1 paramètre : la ligne qui a été déposée.
Par défaut : fonction vide

dragHandle

attribut : data-drag-handle
type : String
Détail :

C’est l’élément curseur.

Remarque : Cette option est principalement utilisée pour s’adapter au plugin TableDnD. En l’absence de circonstances spéciales, veuillez ne pas modifier la valeur par défaut.
Par défaut : >tbody>tr>td:not(.bs-checkbox)

useRowAttrFunc

attribut : data-use-row-attr-func
type : Boolean
Détail :

Cette fonction doit être utilisée si vos éléments tr n’ont pas l’attribut id. Si vos éléments tr n’ont pas l’attribut id, ce plugin ne déclenche pas l’événement onDrop.
Par défaut : false

Événements

onReorderRow(reorder-row.bs.table)

Déclenché lorsque la ligne a été déposée, reçoit deux paramètres :

Les nouvelles données du tableau
La ligne déposée
La ligne de l’ancienne position