Share
Quando una pagina web è progettata per visualizzare tabelle di dati di grandi dimensioni, è necessario dedicare una grande quantità di considerazione per consentire all'utente di ordinare i dati in modo strutturato. In questo articolo, descriverò quattro tecniche: effetti al passaggio del mouse, file zebra, filtraggio e ordinamento.
Ci sono alcune note importanti che dobbiamo prendere in considerazione prima di guardare il nostro codice Javascript. Il markup della tabella HTML sarà come qualsiasi altra tabella che potresti aver creato, tranne noi
richiedono due tag che molte persone omettono. La sezione della testa del tavolo deve essere avvolta . Il corpo del
tabella, dove vengono conservati tutti i dati che vogliamo visualizzare, devono essere racchiusi
| Nome di battesimo | Cognome | Città | Stato |
|---|---|---|---|
| Mannix | Bolton |
Le Zebra Rows sono una tecnica di organizzazione dei dati molto comune, facile da implementare e di grande impatto. Zebra Rows in
essence sta alternando lo stile di righe dispari e pari per rendere i dati più facili da leggere in orizzontale. Questo è molto importante con
dati a più colonne in modo che gli utenti possano guardare una colonna e leggere facilmente i dati associati sulla stessa riga sotto altre intestazioni. Nel
esempi che userò attraverso questo tutorial, ho una lista di persone con quattro proprietà: nome, cognome, città e
stato. Notare come sono alternati i colori delle righe e il colore del carattere per massimizzare l'effetto.
Ora sulle attuali file Zebra. Il primo punto di partenza è un file CSS esterno collegato al documento. Il primo elemento a
l'obiettivo è la tabella.
table background-color: white; larghezza: 100%;
Questo è abbastanza banale; stiamo dicendo allo sfondo della tabella di essere bianco e di allungare al 100% della larghezza dell'elemento genitore. Successivamente ci concentreremo
gli elementi della cellula
tbody td background-color: white; tbody td.odd background-color: # 666; colore bianco;
Qui stiamo impostando una classe per le righe della tabella "dispari" che imposta un colore di sfondo e un colore di carattere alternativi. Abbiamo anche impostato uno stile predefinito per tutti i td
elementi che si applicano intrinsecamente alle righe "pari". Questo è tutto il CSS che è richiesto. Te l'ho detto che era semplice! Ora diamo un'occhiata al codice jQuery. Il
la potenza dei selettori jQuery rende tutto questo facile come il codice CSS. Tutto quello che dobbiamo fare è indirizzare le celle e utilizzare la funzione addClassName.
Accentsconagua
$ (document) .ready (function () zebraRows ('tbody tr: odd td', 'odd');); // utilizzato per applicare stili di riga alternati funzione zebraRows (selector, className) $ (selector) .removeClass (className) .addClass (className); Questo codice, anche se breve, ha alcune considerazioni da considerare. Prima di tutto notiamo come abbiamo astratto l'implementazione in una funzione; questo è l'ideale perché se cambiamo il
dati nella tabella in modo asincrono, senza un aggiornamento della pagina, quindi vorremmo assicurare che le righe siano ancora in stile alternato. Per lo stesso motivo invochiamo anche il
funzione removeClass in modo che se una riga è inizialmente dispari, ma diventa uniforme, ci viene assicurato che la definizione di classe dispari non rimane. Questo può sembrare confuso al momento,
ma quando guardiamo al filtraggio più avanti, questo diventerà più chiaro. Per motivi di codice riusabile, richiediamo anche il passaggio al selettore e al nome della classe
la funzione - in modo che possa essere utilizzata in progetti che hanno nomi di classi o requisiti di selezione diversi (ad esempio un sito che ha più tabelle solo uno di
che desideri scegliere come target). Se rivedi la funzione ready (), una funzione jQuery eseguita quando la pagina è
terminato il caricamento, vedrai la nostra chiamata a zebraRows (). Qui è dove passiamo il selettore e il nome della classe. Il selettore usa una speciale sintassi jQuery
: dispari, che troveranno tutte le righe dispari. Quindi cerchiamo tutti gli elementi figlio della riga che sono celle. Questo codice
è abbastanza semplice per chiunque abbia usato jQuery in precedenza, ma la semplicità dovrebbe rendere il codice abbastanza leggibile da chiunque.
Nota: L'utilizzo di jQuery per applicare colori di righe alternate è una soluzione semplice, non è degradabile se un utente ha JavaScript disabilitato. Vorrei
consigliamo di applicare la classe dispari sul server sia nel codice PHP che nell'HTML statico, sebbene questo esuli dallo scopo di questo articolo.
Un effetto davvero piacevole per gli utenti è quello di evidenziare la riga su cui stanno attualmente passando il tempo. Questo è un ottimo modo per individuare dati specifici che potrebbero essere interessati
in. Questo è semplicissimo da implementare usando jQuery, ma prima un po 'di CSS.
... td.hovered background-color: lightblue; colore: # 666; ...
Questo è tutto il CSS di cui abbiamo bisogno, fondamentalmente quando passiamo il mouse su una riga, vogliamo fare in modo che tutte le celle di quella riga abbiano uno sfondo blu chiaro e un colore di carattere grigio. Il
jQuery per rendere questo accada è altrettanto semplice.
... $ ('tbody tr'). Hover (function () $ (this) .find ('td'). AddClass ('hovered');, function () $ (this) .find ('td' ) .removeClass ('hovered');); ...) Stiamo facendo uso della funzione hover () nella libreria jQuery. Ci vogliono due argomenti che sono
le funzioni che vogliamo vengano eseguite quando il mouse passa sopra e quando il mouse si allontana dall'elemento, rispettivamente. Quando passano il mouse su una riga, vogliamo trovare tutto
le celle all'interno della riga e aggiungi loro la classe hovered. Quando il mouse lascia l'elemento che vogliamo rimuovere allora quella classe. Questo è tutto quello che dobbiamo fare
ottenere l'effetto hover, provalo!
Ora le cose carnose - in realtà manipolando i dati che vengono mostrati. Se un sito Web richiede la visualizzazione di molti record di dati, nel mio esempio 1000 righe, quindi
è più che appropriato per offrire all'utente un modo per setacciare i dati. Un modo particolarmente efficace che è nato sul web negli ultimi anni come parte di
il movimento Web 2.0 / AJAX sta filtrando. Questo è anche qualcosa che Apple spinge pesantemente in applicazioni come iTunes. L'obiettivo per noi è di consentire all'utente
per digitare una query di ricerca in un input di testo standard e attivare il filtro, le righe della tabella sotto mostrano solo quelle che contengono il testo corrispondente. Questo è probabilmente più
avanzato quindi gli stili di riga alternati, ma in tutta la realtà richiede codice minimo, grazie alla funzionalità integrata di jQuery.
Innanzitutto scriveremo una funzione generica che accetta un selettore e una stringa di testo. Questa funzione cercherà quindi tutti gli elementi corrispondenti a quel selettore che cercano
la stringa. Se trova la stringa, mostrerà l'elemento e applicherà un nome di classe visibile all'elemento, altrimenti nasconderà l'elemento. Perché stiamo facendo domanda
la classe del visibile? Bene, una volta ordinati gli elementi, vorremmo eseguire nuovamente la funzione zebraRows, ma dobbiamo dire a jQuery di ignorare le righe nascoste, e
il modo migliore che ho trovato per fare è applicare una classe di visibilità.
La ricerca effettiva viene eseguita dalla funzione JavaScript, opportunamente denominata, search (). Anche se a causa del modo in cui il DOM funziona, se non impieghiamo la funzione jQuery,
text (), la casella vedrà anche tutti i tag HTML che si trovano nella riga della tabella, come ad esempio
// filtra i risultati in base al filtro della funzione di query (selettore, query) query = $ .trim (query); // elimina lo spazio bianco query = query.replace (/ / gi, '|'); // aggiungi OR per la query regex $ (selector) .each (function () ($ (this) .text (). search (new RegExp (query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible'); ); La sesta riga è dove avviene la magia, e probabilmente richiede un po 'di spiegazione. A partire dalla riga 5, stiamo dicendo al codice di scorrere tutti gli elementi
che corrispondono al selettore, cioè le righe, e quindi vogliamo eseguire il codice sulla riga 6 usando ognuno di essi. La linea 6 è un po 'complicata se sei nuovo alla programmazione,
ma è abbastanza facile da capire se lo dividiamo. Pensa a tutto prima che il punto interrogativo sia una domanda, se la risposta a questa domanda è vera allora
eseguire il codice a sinistra dei due punti, ma dopo il punto interrogativo. Se la risposta è falsa, esegui il codice dopo i due punti. Questo è essenzialmente un se
dichiarazione ma in una forma più concisa nota come operatore ternario e non sarebbe diversa dalla scrittura:
... if ($ (this) .text (). Search (new RegExp (query, "i")) < 0) $(this).hide().removeClass('visible') else $(this).show().addClass('visible'); … La ragione per cui chiediamo se search () restituisce "meno di zero, testiamo questa condizione. In teoria non c'è nulla di sbagliato nel controllare se restituisce (==) -1, ma in pratica è più sicuro semplicemente assicurarlo
meno di zero.
Bene, ora che abbiamo una funzione di filtro completa, usiamo gli eventi di jQuery per collegarli all'input. Per ottenere l'effetto dal vivo desideriamo l'evento che vogliamo
è quando l'utente rilascia una chiave mentre è focalizzata sulla casella di testo, nota come keyup in JavaScript. È importante impostare l'attributo ID di
input in modo che possiamo scegliere come target usando jQuery. Tornando alla nostra funzione pronta, dobbiamo aggiungere il codice dopo la nostra chiamata a zebraRows ().
E il codice jQuery:
... // default ogni riga a $ visibile ('tbody tr'). AddClass ('visible'); $ ('# filtro'). keyup (function (event) // se esc viene premuto o non viene inserito nulla if (event.keyCode == 27 || $ (this) .val () == ") // se viene premuto esc, vogliamo cancellare il valore della casella di ricerca $ (this) .val ("); // vogliamo che ogni riga sia visibile perché se non viene inserito nulla // tutte le righe sono abbinate. $ ('tbody tr ') .removeClass (' visible '). show (). addClass (' visible '); // se c'è del testo, consente di filtrare else filter (' tbody tr ', $ (this) .val ()); // riapplica righe zebra $ ('. visible td'). removeClass ('odd'); zebraRows ('. visible: odd td', 'odd'); ... Questo codice è di gran lunga il più complesso che abbiamo visto fino ad ora, quindi lo faremo passare linea per linea.
Nota: Una buona nota potrebbe essere quella di usare i CSS per nascondere la casella del filtro, e proprio sopra la chiamata keyup per mostrarla, quindi gli utenti con JavaScript disabilitato non sono
confuso quando tentano di ordinare i dati, questo apparirebbe come:
... # filtro display: nessuno; ...
application.js
... $ ('# filtro'). Mostra (); ... Caspita che fosse un sacco di codice, sentitevi liberi di prenderci una pausa caffè / tè prima di passare alla classificazione ...
Va bene tutto pronto? Bene, lascia andare!
Come compito finale, consentiremo di ordinare la tabella in base a qualsiasi intestazione di colonna. Questa è una pratica molto comune che gli utenti anticipano nota come fare clic per ordinare.
Quando l'utente fa clic su una delle intestazioni, vogliamo ordinare la tabella in ordine crescente e, se fanno nuovamente clic, vogliamo ordinare in ordine decrescente per quella colonna. Questo codice è abbastanza
avanzato e non per i deboli di cuore. Il concetto iniziale è venuto da
Apprendimento di jQuery 1.3. io
l'ho riprogettato per adattarlo meglio alle nostre esigenze di semplicità, tuttavia, se desideri un controllo più preciso, ti rimanderò al capitolo 7 del libro in cui
le tabelle e jQuery sono discusse in grande dettaglio.
Prima di addentrarci veramente nel codice attuale è importante discutere del concetto di come intendiamo affrontare questo problema. Useremo JavaScript interno
metodo sort () progettato per prendere un array e ordinarlo
utilizzando una funzione personalizzata fornita dal codice. Nel nostro caso vogliamo semplicemente ordinare alfabeticamente e numericamente, quindi confronteremo solo i due articoli che fornisce
e restituire l'ordine in cui i due dovrebbero andare in base a tale progetto. Poiché vogliamo ordinare sia in ordine ascendente che discendente, utilizzeremo una dichiarazione di classe CSS per vedere
qual è lo stato corrente del tipo in base a tale colonna e lo inverta se necessario. Una volta ottenuto il nostro array, useremo l'ordine per reinserire le righe
nel tavolo uno per uno. Sembra molto, ma a causa di quanto sia veloce il JavaScript veloce, sarà molto semplice per l'utente. Tutto di
questo sarà legato all'evento click delle intestazioni di colonna nella tabella.
Come al solito, prendiamo il codice CSS fuori mano, poiché è il più semplice.
th.sortable color: # 666; cursore: puntatore; decorazione del testo: sottolineatura; th.sortable: hover color: black; th.sorted-asc, th.sorted-desc colore: nero;
Tutte le nostre intestazioni ordinabili avranno una classe di ordinabile, e il modificatore di passaggio del mouse in CSS rende emulare un collegamento ipertestuale per gli utenti. Ne approfittiamo anche noi
la classe CSS che abbiamo menzionato su Sort-Asc e Sort-Desc in modo che possiamo mostrare all'utente la colonna corrente che sta ordinando la tabella. Non l'ho incluso ma
questo sarebbe un buon posto per mettere le immagini di sfondo delle frecce rivolte verso l'alto e verso il basso come un ulteriore segnale visivo per l'utente. Ora passiamo al codice JavaScript e al
complessità dell'ordinamento, fortunatamente reso più facile con jQuery. Il codice seguente appartiene alla funzione ready () che abbiamo iniziato all'inizio. Mettendo questo giusto
al di sopra della fine della funzione è meglio.
// cattura tutte le righe di intestazione $ ('thead th'). each (function (column) $ (this) .addClass ('ordinabile'). click (function () var findSortKey = function ($ cell) return $ cell.find ('. sort-key'). text (). toUpperCase () + "+ $ cell.text (). toUpperCase ();; var sortDirection = $ (this) .is ('. ordinato-asc ')? -1: 1; // esegue il backup dell'albero e recupera le righe con i dati // per l'ordinamento var $ rows = $ (this) .parent (). Parent (). Parent (). Find (' tbody tr '). get (); // esegue il ciclo di tutte le righe e trova $ .each ($ rows, function (index, row) row.sortKey = findSortKey ($ (row) .children (' td '). eq (colonna));); // confronta e ordina le righe alfabeticamente $ rows.sort (funzione (a, b) if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection; ritorno 0; ); // aggiungi le righe nell'ordine corretto alla fine della tabella $ .each ($ rows, function (index, row) $ ('tbody'). append (row); row.sortKey = null;); // identifica l'ordinamento di colonne $ ('th'). removeClass ('ordinati-asc ordinati-desc'); var $ sortHead = $ ('th'). filter (': nth-child (' + (column + 1) + ')'); sortDirection == 1? $ sortHead.addClass ('sorted-asc'): $ sortHead.addClass ('sorted-desc'); // identifica la colonna da ordinare per $ ('td'). removeClass ('sorted') .filter (': nth-child (' + (column + 1) + ')') .addClass ('sorted') ; $ ('. visible td'). removeClass ('odd'); zebraRows ('. visible: even td', 'odd'); ); ); Woo, questo è un sacco di codice. Analizziamolo in pezzi considerevoli. Il primo bit di codice è afferrare tutte le intestazioni e scorrerle attraverso. La prima cosa
lo fa è aggiungere una classe di ordinabile e inizia il bind di clic.
... // cattura tutte le righe di intestazione $ ('thead th'). Each (function (column) $ (this) .addClass ('sortable'). Click (function () ... Si noti che questo può essere facilmente modificato per consentire l'ordinamento solo di alcune colonne rimuovendo la chiamata addClass () e cambiando il selettore da 'thead th' a
qualcosa come "thead th.sortable". Ovviamente ciò richiede di specificare manualmente quale delle colonne è ordinabile aggiungendo al
intestazioni appropriate nel codice HTML.
Il prossimo bit di codice è una dichiarazione di funzione legata a una variabile. Questo potrebbe sembrare un po 'strano per coloro che non hanno familiarità con la programmazione, ma è una pratica comune. Questo
ci consente di fare facilmente riferimento alla funzione in modo specifico nel contesto dell'intestazione su cui stiamo lavorando. Questa spiegazione probabilmente è un po 'confusa, ma il
un tipo preciso di ragionamento oltrepassa la portata di questo articolo. Il punto della funzione findSortKey è determinare quale colonna stiamo ordinando, possiamo farlo
perché sappiamo che l'elemento su cui hanno fatto clic è lo stesso indice nella tabella per tutte le colonne che confronteremo. Ad esempio se fanno clic sulla terza intestazione noi
vuoi guardare la terza colonna di ogni riga per confrontare quale ordine posizionare le righe. Dopo aver dichiarato questa funzione, determiniamo quindi l'ordinamento, in ordine crescente
o discendente. Questo viene fatto cercando il nome della classe di 'sorted-asc' nell'intestazione della tabella, se è lì, sappiamo che è attualmente ordinato come ascendente e
dobbiamo fare la discesa, altrimenti usare il valore predefinito di ascendente. Questo si prende cura del caso in cui sta scendendo e dobbiamo farlo di nuovo salire.
Questo bit di codice restituisce 1 o -1, spiegheremo perché dopo.
... var findSortKey = function ($ cell) return $ cell.find ('. Sort-key'). Text (). ToUpperCase () + "+ $ cell.text (). ToUpperCase ();; var sortDirection = $ (this) .is ('. sorted-asc')? -1: 1; ... Ora vogliamo ottenere quella colonna specifica da ogni riga e metterla in un array, questo viene fatto usando il metodo jQuery di
get () che prende le righe e le inserisce in un array che la funzione sort () può comprendere. Perché la corrente
selector era il capo della tabella, dobbiamo risalire l'albero del DOM 3 posti per trovare la tabella> tbody> tr> td. Sembra un po 'complesso, ma in realtà è semplice. Dopo
che ciclichiamo su ciascuna delle file che abbiamo appena trovato e troviamo la colonna che vogliamo usare nell'ordinamento. Questo viene fatto controllando se il suo indice (il numero di posti
a partire da 0 dalla prima colonna della tabella) è uguale all'indice dell'intestazione cliccata. Questo è quindi passato alla funzione findSortKey in modo che possiamo
quindi imposta un attributo personalizzato chiamato sortKey che contiene l'intestazione della colonna che stiamo ordinando e il testo della colonna corrente che stiamo cercando entrambi sono
impostato su maiuscolo in modo che l'ordinamento non abbia distinzione tra maiuscole e minuscole. Questo è un modo per semplificare l'ordinamento in modo da renderlo più reattivo per grandi quantità di dati.
... // per l'ordinamento var $ rows = $ (this) .parent (). Parent (). Parent (). Find ('tbody tr'). Get (); // esegue il ciclo di tutte le righe e trova $ .each ($ rows, function (index, row) row.sortKey = findSortKey ($ (row) .children ('td'). eq (column));); ... Poi viene la funzione sort () effettiva su cui sto andando avanti. Questo è chiamato sulla matrice di righe che abbiamo creato usando get (). L'unico parametro che passiamo è il
funzione vogliamo determinare l'ordinamento. Quella funzione riceve due attributi da confrontare e restituisce 1 se il primo è maggiore, -1 se il secondo è grande e 0
se sono uguali. È qui che entra in gioco la variabile sortDirection perché il modo in cui funziona è che impostiamo 1 o -1 su di esso e quindi moltiplichiamo
1 o -1 la funzione dovrebbe tornare da sortDirection, ottenendo l'effetto ascendente / discendente che desideriamo.
... // confronta e ordina le righe alfabeticamente $ rows.sort (function (a, b) if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection; ritorno 0; ); ...
Il prossimo bit di codice aggiunge semplicemente ogni riga dall'array ora ordinato alla struttura DOM. Questo è fatto con la funzione append che è carina perché
non copia la riga e la piazza alla fine la rimuove effettivamente dal posto corrente nel DOM e posiziona dove lo diciamo, in questo caso alla fine del
tavolo. Dopo averlo fatto per ogni elemento dell'array, avrà spostato ogni riga nella sua nuova posizione. Anche per fare un po 'di pulizia rimuoviamo l'ordinamento
attributo che abbiamo impostato in precedenza.
... // aggiungi le righe nell'ordine corretto alla fine della tabella $ .each ($ rows, function (index, row) $ ('tbody'). Append (row); row.sortKey = null;) ; ... Ora stiamo passando alla fase di pulizia della nostra funzione, dal momento che tutto il sollevamento è stato fatto. Quindi prendiamo tutte le celle nel corpo del tavolo, rimuovine
persistere degli attributi ordinati nelle dichiarazioni di classe e quindi filtrare tutti tranne le colonne che hanno lo stesso indice della nostra intestazione ordinata e applicare le 'ordinate'
classe per loro. Questo è utile per il targeting CSS se, per esempio, volessimo rendere la colonna che selezioniamo con un colore diverso potremmo dichiarare questo CSS:
... ordinato background-color: green; ...
L'ultima cosa che facciamo è rimuovere qualsiasi dichiarazione CSS "strana" e riapplicare le file Zebra come abbiamo fatto nella parte del filtro.
... $ ('. Visible td'). RemoveClass ('dispari'); zebraRows ('. visible: even td', 'odd'); ... È così che facciamo un ordinamento molto semplice. È importante notare che questo sarà solo ordinare gli oggetti in ordine alfabetico o numerico e non funziona con date o valuta
per esempio. Ciò richiede una gestione più specializzata che va oltre i nostri obiettivi di semplice manipolazione della tabella.
In questo articolo, abbiamo imparato come eseguire il rollover del nostro codice di manipolazione della tabella usando jQuery. Questo è
molto conveniente sia per l'utente che per noi. L'utente ottiene i controlli previsti per l'ordinamento e il filtraggio dei dati e abbiamo un codice che è allo stesso tempo piccolo e facile
capire. Poiché abbiamo scritto questo noi stessi, possiamo ora estenderlo a modo nostro. Il nostro metodo è ottimo per una semplice manipolazione, ma se hai bisogno del lavello della cucina, ti consiglio di dare un'occhiata al
Plug-in Data Tables per jQuery. Mi piacerebbe rispondere a qualsiasi domanda nei commenti o su Twitter
(@Noahendrix). Grazie per aver letto!
