Inizio Blog User Interface (YUIBlog)

Quick Edit mode per YUI 3 DataTable

19 Aprile, 2011 alle 3:20 pm da Giovanni Lindal | In Development , YUI 3 Gallery | Nessun Commento

Anche se YUI 3 DataTable non dispone ancora di modifica in linea di singole celle, è relativamente semplice da implementare Quick Edit mode. Il QuickEdit plugin per DataTable in 3 YUI Gallery permette a tutti i valori visibili in un DataTable da modificare contemporaneamente.

( Clicca l'immagine per giocare con questo esempio .)

Panoramica

Come per la versione 2 YUI , l'idea centrale della Quick Edit mode è di scambiare tutte le formattatori cella con quelli nuovi, che popolano le celle con elementi del modulo, ad esempio, i campi di input o di discesa. Questo viene fatto quando start() viene chiamato, in base alla configurazione descritta di seguito. Dopo che l'utente è finito, è possibile chiamare getChanges() per ottenere i valori cambiati e quindi persistono loro. Per uscire dalla modalità Quick Edit, chiamata cancel() . (Il suo nome invece di annullare fermata per ricordare che scarta tutte le modifiche.)

Poiché il modulo Quick Edit gallery è un plugin per DataTable, è necessario collegarlo al tuo datatable prima di poterlo utilizzare:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

Ciò memorizza il plug-in qe membro della DataTable, quindi è necessario chiamare il plugin funzioni come questa:

 my_table.qe.start ();

Configurazione

Quick Edit aggiunge due nuovi attributi di configurazione per tutte le colonne: quickEdit e qeFormatter .

Se una colonna quickEdit proprietà è definita, la colonna sarà modificabile in modalità Quick Edit. Per accettare tutte le impostazioni predefinite, si può semplicemente impostare quickEdit:true . Per un maggiore controllo, è possibile passare un oggetto con le seguenti proprietà:

formatter

Il formattatore cellula che renderà un campo apposito modulo: type="text"> <input, <textarea>, o <seleziona>. Per impostazione predefinita, la cella formattatore Y.Plugin.QuickEdit.textFormatter viene utilizzato per tutte le cellule a produrre elementi di input. Per ottenere una textarea elemento, configurare una colonna da utilizzare Y.Plugin.QuickEdit.textareaFormatter invece.

validation

configurazione di convalida per ogni campo nella colonna.

css

CSS classi di codifica le regole di convalida di base:

yiv-required

Il valore non deve essere vuoto.

yiv-length:[x,y]

Stringa deve essere almeno x caratteri e al massimo y caratteri. Almeno uno di X e Y deve essere specificato.

yiv-integer:[x,y]

Il valore intero deve essere almeno x e al massimo y . x e y sono entrambi opzionali.

yiv-decimal:[x,y]

Il valore decimale deve essere almeno x e al massimo y . Esponenti non sono ammessi. x e y sono entrambi opzionali.

fn

Una funzione che verrà chiamata alla classe DataTable come il suo campo di applicazione e 'elemento forma della cella come argomento. Restituisce vero se il valore è valido. In caso contrario, chiamare this.displayMessage(...) per visualizzare un errore e poi tornare false.

msg

Una mappa dei tipi di messaggi che vengono visualizzati quando una regola di convalida di base o regex non riesce. I tipi validi sono: required , min_length , max_length , integer , decimal , e regex . Non vi è alcun valore predefinito per il tipo di regex , quindi è necessario specificare un messaggio se si configura una convalida regex. I messaggi di errore di default per gli altri tipi vengono memorizzati in Y.FormManager.Strings (fornito da galleria-formmgr-css-validazione ) e può essere ignorato e / o localizzate.

regex

Espressione regolare che il valore deve soddisfare per essere considerato valido.

A volte, una colonna non modificabile deve essere resa in modo diverso durante la modalità Quick Edit. Il miglior esempio è una colonna contenente un link, dal momento che la navigazione dalla pagina, mentre in modalità Quick Edit possono essere disastrose. Per rimuovere il collegamento in modalità Quick Edit, configurare qeFormatter per la colonna da Y.Plugin.QuickEdit.readonlyLinkFormatter . Per gli indirizzi e-mail, utilizzare Y.Plugin.QuickEdit.readonlyEmailFormatter . Si può anche scrivere personalizzati, formattazione di sola lettura. È sufficiente seguire le normali regole per la costruzione di un formattatore DataTable cella.

Funzioni mancanti

A causa di un bug in YUI 3.3.0 DataTable , il td elemento passati a un formattatore colonna è in realtà dalla colonna precedente. Ciò ha reso troppo fastidioso per sostenere copia verso il basso, dove un pulsante nella prima riga consente di copiare il valore verso il basso per tutte le altre righe.

Il bug anche richiesto una rielaborazione completa del regolamento di base Quick Edit formattatori cella per tornare testo invece di manipolare il DOM. Questo è il motivo formattatori cellule personalizzate non sono ufficialmente supportati in questa versione iniziale. Se siete avventurosi, si può ancora costruire, ma tieni presente che sarà necessario riscrivere, che comprende in aggiunta il supporto per annotare, una volta che il bug in DataTable è fisso.

Circa l'autore: Giovanni Lindal ( @ jafl5272 su Twitter) è uno degli ingegneri di piombo costruire le fondamenta su cui Yahoo! APT è costruito. In precedenza, ha lavorato sulla Yahoo! Publisher Network.

Trova conversazioni: bloglines | technorati

Condividi e ampliare: Bookmark con del.icio.us | digg it! | reddit!