Bootstrap Table Riordina Righe

Estensione Riordina Righe della tabella di Bootstrap Table.

Dipendenza: tablednd v0.9

se desideri puoi includere il file bootstrap-table-reorder-rows.css per utilizzare il dragClass predefinito.

Utilizzo

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

Esempio

Riordina Righe

Opzioni

reorderableRows

• Attributo: data-reorderable-rows

• Tipo: Boolean

• Dettagli:

  Imposta true per consentire la funzionalità di riordino.

• Default: false

onAllowDrop

• Attributo: data-on-allow-drop

• Tipo: function

• Dettagli:

  Passa una funzione che verrà chiamata quando una riga viene sopra un’altra riga. Se la funzione restituisce true, consente il rilascio su quella riga, altrimenti no. La funzione riceve 4 parametri:

  • i dati della riga trascinata
  • i dati della riga sotto il cursore
  • la riga trascinata
  • la riga sotto il cursore

  Restituisce un booleano: true consente il rilascio, false non lo consente.

• Default: null

onDragStop

• Attributo: data-on-drag-stop

• Tipo: function

• Dettagli:

  Passa una funzione che verrà chiamata quando l’utente smette di trascinare indipendentemente dal fatto che le righe siano state riordinate. La funzione riceve 3 parametri: la tabella, i dati della riga e la riga che l’utente stava trascinando.

• Default: null

onDragStyle

• Attributo: data-on-drag-style

• Tipo: String

• Dettagli:

  Questo è lo stile che viene assegnato alla riga durante il trascinamento. Ci sono limiti per gli stili che possono essere associati a una riga (ad esempio non puoi assegnare un bordo, beh puoi, ma non verrà visualizzato).

• Default: null

onDragClass

• Attributo: data-on-drag-class

• Tipo: String

• Dettagli:

  Questa classe viene aggiunta per la durata del trascinamento e poi rimossa quando la riga viene rilasciata. È più flessibile rispetto all’uso di onDragStyle poiché può essere ereditata dalle celle della riga e da altro contenuto.

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

onDropStyle

• Attributo: data-on-drop-style

• Tipo: String

• Dettagli:

  Questo è lo stile che viene assegnato alla riga quando viene rilasciata. Come per onDragStyle, ci sono limiti per ciò che puoi fare. Inoltre, questo sostituisce lo stile originale, quindi considera di nuovo l’uso di onDragClass che viene semplicemente aggiunto e poi rimosso al rilascio.

• Default: null

onReorderRowsDrag

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

• Tipo: Function

• Dettagli:

  Passa una funzione che verrà chiamata quando l’utente inizia a trascinare. La funzione riceve 1 parametro: la riga che l’utente ha iniziato a trascinare.

• Default: funzione vuota

onReorderRowsDrop

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

• Tipo: Function

• Dettagli:

  Passa una funzione che verrà chiamata quando la riga viene rilasciata. La funzione riceve 1 parametro: la riga che è stata rilasciata.

• Default: funzione vuota

dragHandle

• Attributo: data-drag-handle

• Tipo: String

• Dettagli:

  Questo è l’elemento del cursore.

  Nota: Questa opzione viene utilizzata principalmente per adattarsi al plugin TableDnD. In nessuna circostanza particolare, non modificare il valore predefinito.

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

useRowAttrFunc

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

• Tipo: Boolean

• Dettagli:

  Questa funzione deve essere utilizzata se i tuoi elementi tr non avranno l’attributo id. Se i tuoi elementi tr non hanno l’attributo id, questo plugin non attiva l’evento onDrop.

• Default: false

Eventi

onReorderRow(reorder-row.bs.table)

Si scatena quando la riga viene rilasciata, riceve tre parametri:

• I nuovi dati della tabella
• La riga rilasciata
• La riga della vecchia posizione