Share
Atunci când o pagină web este proiectată să afișeze tabele mari de date, o mare atenție ar trebui să fie dedicată permițând utilizatorului să sorteze datele într-o manieră structurată. În acest articol, voi trece peste patru tehnici: efecte de hover, rânduri de zebre, filtrare și sortare.
Există câteva note importante pe care trebuie să le adresăm înainte de a privi codul nostru Javascript. Marcajul de tabel HTML va fi ca orice alt tabel pe care l-ați creat, cu excepția celor noi
necesită două etichete pe care mulți omit. Secțiunea capului mesei trebuie înfășurată . Corpul
tabelul, în cazul în care toate datele pe care dorim să le afișăm, trebuie să fie împachetate
| Nume | Numele de familie | Oraș | Stat |
|---|---|---|---|
| Mannix | Șurub pe |
Zebra Rows reprezintă o tehnică foarte comună de organizare a datelor, care este ușor de implementat și are un impact puternic. Zebra Rânduri în
esența alternă stilul de rânduri ciudate și uniforme pentru a face datele mai ușor de citit orizontal. Acest lucru este foarte important cu
datele din mai multe coloane, astfel încât utilizatorii să poată privi o coloană și să citească cu ușurință datele asociate din același rând sub alte antete. În
exemple pe care le voi folosi prin acest tutorial, am o listă de persoane cu patru proprietăți: nume, prenume, oraș și
stat. Observați cum am modificat culorile rândului, precum și culoarea fontului, pentru a maximiza efectul.
Acum, la rândurile Zebra actuale. Primul loc de pornire este un fișier CSS extern legat de document. Primul element pentru
țintă este tabelul.
tabel culoare-fundal: alb; lățime: 100%;
Acest lucru este destul de banal; se spune fundalul tabelului să fie alb și să se întindă la 100% din lățimea elementului părinte. În continuare ne vom orienta
elementele celulare
tbody td fundal-culoare: alb; tbody td.odd background-color: # 666; culoare albă;
Aici setăm o clasă pentru rândurile tabelului "ciudat" care stabilește o culoare de fundal și o culoare alternativă. De asemenea, stabilim un stil implicit pentru toate td-urile
elemente care se vor aplica în mod inerent liniilor "uniforme". Acesta este tot CSS-ul necesar. Ți-am spus că e simplu! Acum, să ne uităm la codul jQuery.
puterea selectorilor jQuery face acest lucru la fel de ușor ca și codul CSS. Tot ce trebuie să facem este să vizăm celulele și să folosim funcția addClassName.
Accentsconagua
$ (document) .ready (funcție () zebraRows ('tbody tr: odd td', 'odd');); // folosit pentru a aplica stiluri alternate de stiluri funcția zebraRows (selector, className) $ (selector) .removeClass (className) .addClass (className); Acest cod, în timp ce este scurt, are câteva întrebări pe care trebuie să le luați în considerare. În primul rând, observați cum am abstracționat implementarea unei funcții; acest lucru este ideal deoarece, dacă schimbăm
datele din tabel asincron, fără o reîmprospătare a paginii, atunci vom dori să asigurăm că rândurile sunt încă stil alternativ. Din același motiv invocăm de asemenea
removeClass funcție, astfel încât, dacă un rând este inițial ciudat, dar devine uniform, suntem siguri că definiția clasa impare nu rămâne. Acest lucru poate părea confuz chiar acum,
dar când ne uităm la filtrarea mai târziu, acest lucru va deveni mai clar. De dragul codului reutilizabil, de asemenea, trebuie să trecem selectorul și numele clasei
funcția - astfel încât poate fi utilizată în proiecte care au nume de clasă diferite sau cerințe selector (adică un site care are mai multe tabele numai unul dintre
pe care doriți să le vizați). Dacă revedeți funcția gata (), o funcție jQuery execută când pagina este
încărcați încărcarea, veți vedea apelul nostru la zebraRows (). Aici treceți în selector și numele clasei. Selectorul utilizează o sintaxă jQuery specială
: ciudat, care va găsi toate rândurile ciudate. Atunci căutăm toate elementele copilului din rând care sunt celule. Acest cod
este destul de simplu pentru oricine care a folosit jQuery anterior, dar simplitatea ar trebui să facă codul destul de ușor de citit de oricine.
Notă: În timp ce folosiți jQuery pentru a aplica culori alternante de rând este o soluție simplă, nu este degradabil dacă un utilizator are JavaScript dezactivat. Aș
recomandăm aplicarea clasei ciudate pe server fie în cod PHP, fie în codul static HTML, deși acest lucru depășește domeniul de aplicare al acestui articol.
Un efect foarte frumos pentru utilizatori este acela de a sublinia rândul pe care se află în prezent. Aceasta este o modalitate excelentă de a identifica anumite date care ar putea fi interesate
Acest lucru este mort simplu de implementat folosind jQuery, dar mai intai un CSS.
... td.hovered background-color: lightblue; culoare: # 666; ...
Acesta este tot CSS-ul de care avem nevoie, practic, atunci când vom trece peste un rând, vrem să facem ca toate celulele din acest rând să aibă un fundal albastru deschis și o culoare de fontă gri.
jQuery pentru a face acest lucru este la fel de simplu.
...) () () () () () () () () () () ) .removeClass ("plutit");)); ... Folosim funcția hover () din biblioteca jQuery. Este nevoie de două argumente care sunt
funcțiile pe care le dorim executate atunci când mouse-ul se deplasează peste și atunci când mouse-ul se deplasează de pe element, respectiv. Când vor trece peste un rând, vrem să găsim totul
celulele din rând și adăugați la ele clasa mobilată. Atunci când mouse-ul părăsește elementul pe care vrem să-l eliminăm atunci clasa. Acesta este tot ce trebuie să facem
obține efectul de hover, du-te încercați!
Acum, chestii de carne - de fapt, manipularea datelor care sunt arătate. Dacă un site web solicită afișarea mai multor înregistrări de date, în exemplul meu 1000 de rânduri, atunci
este mai mult decât potrivit pentru a oferi utilizatorului o modalitate de a analiza datele. O modalitate deosebit de eficientă care a apărut pe web în ultimii ani ca parte din
mișcarea Web2.0 / AJAX filtrează. Acest lucru este, de asemenea, ceva care Apple împinge în mare acolo aplicații, cum ar fi iTunes. Scopul pentru noi este de a permite utilizatorului
pentru a tasta o interogare de căutare într-o intrare standard de text și de filtrare live, rândurile de tabel de mai jos arată doar cele care conțin text de potrivire. Acest lucru este, probabil, mai mult
avansat atunci stilurile de rând alternante, dar în toate realitățile necesită un cod minimal, datorită funcționalității built-in a jQuery.
Mai întâi vom scrie o funcție generică care să ia un selector și un șir de text. Această funcție va căuta apoi toate elementele care se potrivesc cu acel selector care caută
șirul. Dacă găsește șirul, va afișa elementul și va aplica un nume de clasă vizibil elementului, altfel ascunde elementul. De ce aplicăm
clasa de vizibil? Odată ce articolele sunt sortate, vom dori să reluăm din nou funcția zebraRows, dar trebuie să le spunem jQuery să ignore rândurile ascunse și
cea mai bună metodă pe care am găsit-o să o fac este să aplic o clasă de vizibilitate.
Căutarea reală este realizată de funcția JavaScript, denumită în mod corespunzător, căutarea (). Deși datorită funcționării DOM, dacă nu folosim funcția jQuery,
text (), caseta se va uita, de asemenea, la orice etichete HTML care se întâmplă să fie în rândul tabel, cum ar fi
// filtra rezultatele bazate pe filtrul funcției de interogare (selector, interogare) query = $ .trim (interogare); // tăiați spațiul alb interogare = query.replace (/ / gi, '|'); // adăuga OR pentru interogarea regex $ (selector) .each (funcția () ($ (this) .text () căutare (nouă RegExp (interogare, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible'); ); A șasea linie este locul în care se întâmplă magia și, probabil, necesită o explicație. Începând de la linia 5, îi spunem codul să circule prin toate elementele
care se potrivesc cu selectorul, adică rândurile, iar apoi vrem să executăm codul pe linia 6 folosind fiecare. Linia 6 este puțin complicată dacă sunteți nou în programare,
dar este destul de ușor să înțelegem dacă l-am împărțit. Gândiți-vă la totul înainte ca semnul întrebării să fie o întrebare, dacă răspunsul la această întrebare este adevărat atunci
executați codul în partea stângă a colonului, dar după semnul întrebării. Dacă răspunsul este fals, atunci executați codul după colon. Aceasta este în esență un caz
dar într-o formă mai concisă cunoscută ca un operator ternar, și nu ar fi altfel decât scrierea:
... dacă ($ (this) .text () căutare (nouă RegExp (interogare, "i")) < 0) $(this).hide().removeClass('visible') else $(this).show().addClass('visible'); … Motivul pentru care ne întrebăm dacă search () revine "mai puțin de zero, testăm acea condiție. În teorie, nu este nimic în neregulă cu verificarea dacă se întoarce (==) -1, dar în practică este mai sigur să se asigure că este
mai puțin de zero.
Acum că avem o funcție completă de filtrare, hai să folosim evenimentele jQuery pentru al conecta la intrare. Pentru a obține efectul viu, dorim evenimentul pe care îl dorim
ceas pentru este atunci când utilizatorul eliberează o cheie în timp ce acestea sunt concentrate pe caseta de text, cunoscut sub numele de tastare în JavaScript. Este important să setăm atributul ID al
astfel încât să putem viza folosind jQuery. Înapoi în funcția noastră pregătită trebuie să adăugăm cod după apelul nostru la zebraRows ().
Și codul jQuery:
... // implicit fiecare rând la $ vizibil ('tbody tr') addClass ('visible'); $ ('filter')) tasta (functie (eveniment) // daca esc este apasat sau nimic nu este introdus daca (event.keyCode == 27 || $ (this) .val () == ") // dacă esc este apăsat vrem să ștergem valoarea căutării $ (this) .val ("); // dorim ca fiecare rând să fie vizibil, deoarece dacă nimic // nu este introdus atunci toate rândurile sunt potrivite $ ('tbody tr ');. ()) .removeClass (' visible ') show () addClass (' visible '); / / reaplica zebra rânduri $ ('.visible td') removeClass ('odd'); zebraRows ('vizibil: odd td', 'odd'); Acest cod este de departe cel mai complex pe care l-am văzut până acum, așa că vom trece prin linia de linie.
Notă: O notă bună ar fi să utilizați CSS pentru a ascunde caseta de filtrare și chiar deasupra apelului pentru tastare pentru ao afișa, astfel încât utilizatorii cu JavaScript dezactivat nu sunt
confuzi când încearcă să sorteze datele, ar arăta astfel:
... #filter display: none; ...
application.js
... $ ('# filter') arată (); ... Wow, care a fost o mulțime de cod, nu ezitați să luați o pauză de ceai / cafea înainte de a trece la sortare ...
Bine toți pregătiți? Bine, lasă-mă!
Ca sarcină finală, vom permite sortarea mesei cu oricare dintre anteturile coloanelor. Aceasta este o practică foarte standard pe care utilizatorii o anticipează cunoscută sub numele de clic pentru sortare.
Când utilizatorul face clic pe una dintre anteturile pe care dorim să le sortăm ascendent și dacă dau din nou clic pe dorim să ordonăm descrescătorul după coloana respectivă. Acest cod este destul
avansate și nu pentru cei slabi la inimă. Conceptul inițial a venit de la
Învățarea jQuery 1.3. eu
am re-proiectat-o pentru a se potrivi mai bine nevoilor noastre de simplitate, totuși, totuși, dacă doriți un control mai bun al cerealelor, vă voi referi la capitolul 7 al cărții unde
tabele și jQuery sunt discutate în detaliu.
Înainte de a ne arunca cu adevărat în codul actual, este important să discutăm despre modul în care intenționăm să abordăm această problemă. Vom folosi JavaScript-ul intern
sort (), care este conceput pentru a lua o matrice și ao sorta
utilizând o funcție personalizată furnizată de cod. În cazul nostru, pur și simplu doriți să sortați în ordine alfabetică și numerică, așa că vom compara doar cele două elemente pe care le furnizează
și întoarcerea care ordinea celor doi ar trebui să meargă în bazate pe acel design. Pentru că vrem să sortăm atât ascendent cât și descendent, vom folosi o declarație de clasă CSS pentru a vedea
care este situația actuală a acestui tip de coloană și inversați-o dacă este necesar. Odată ce avem matricea noastră în ordine, vom folosi ordinea pentru a reintroduce rândurile
în tabelul câte unul. Acest lucru sună ca o mulțime, dar din cauza cât de rapid va fi JavaScript, va fi foarte simplu pentru utilizator. Toate
acest lucru va fi legat de evenimentul de clic al anteturilor coloanelor din tabel.
Ca de obicei, hai să eliminăm codul CSS, deoarece este cel mai simplu.
t.sortabile culoare: # 666; cursor: pointer; text-decorare: subliniere; th.sortable: hover culoare: negru; th.sorted-asc, th.sorted-desc culoare: negru;
Toate anteturile noastre de tip director vor avea o clasă de categorii, iar modificatorul de hover în CSS o face să emuleze un hyperlink pentru utilizatori. Noi, de asemenea, profităm de
clasa CSS pe care am menționat-o despre sort-asc și sort-desc astfel încât să putem arăta utilizatorului coloana curentă care sortează tabelul. Nu am inclus-o decât
acest lucru ar fi un loc bun pentru a pune imaginile de fundal ale săgeților îndreptate în sus și în jos ca un semn vizual suplimentar pentru utilizator. Acum trecem la codul JavaScript și la
complexitatea sortimentului, mulțumită mult mai ușor cu jQuery. Codul de mai jos aparține funcției gata () pe care am început să o întoarcem la început. Plasarea acestui drept
deasupra capătului funcției este cea mai bună.
// arata toate ruturile headerului $ ('thead th') fiecare (functie (coloana) $ (acest) .addClass (' (*) sort.php ('' sort_key '') text () toUpperCase () + "+ $ cell.text () toUpperCase (); var sortDirection = $ ')? -1: 1; // pas înapoi arborele și obținerea rândurilor cu date // pentru sortarea lui var $ rows = $ (this) .parent () parent () parent (). tr '). get (); / / intra prin toate rândurile și găsiți $ .each ($ rows, function (index, row) row.sortKey = findSortKey ($ (row). ()); // comparați și sortați rândurile în ordine alfabetică $ rows.sort (funcția (a, b) if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection; retur 0; ); // adăugați rândurile în ordinea corectă în partea de jos a tabelului $. fiecare ($ rânduri, funcție (index, rând) $ ('tbody'). // identificați ordinea de sortare a coloanelor $ ('th ') removeClass (' sort-asc sort-desc '); var $ sortHead = $ ('th'). filtru (': nth-copil (' + (coloana + 1) + ')'); sortDirection == 1? $ sortHead.addClass ('sort-asc'): $ sortHead.addClass ('sort-desc'); // identifica coloana care va fi sortata de $ ('td'). RemoveClass ('sort') .filter (': nth-child (' + ' ; $ ('.td vizibil'). removeClass ('odd'); zebraRows ("vizibil: chiar td", "ciudat"); ); ); Woo, asta eo mulțime de cod. Să lăsăm asta în bucăți mari. Primul cod de cod este prins toate anteturile și leșindu-le prin ele. Primul lucru
este să adăugați o clasă de direcționați și începe să legați clicurile.
... // apuca toate rândurile antet $ ('thead th') fiecare (funcția (coloana) $ (this) .addClass ('comanda'). Rețineți că acest lucru poate fi ușor modificat pentru a permite selectarea anumitor coloane numai prin eliminarea apelului addClass () și schimbarea selectorului de la 'thead th' la
ceva asemănător "cel mai potrivit". Desigur, acest lucru necesită să specificați manual care dintre coloanele dvs. sunt selectate prin adăugarea la
corespunzătoare anteturilor din codul HTML.
Următorul bit de cod este o declarație a funcției legată de o variabilă. Acest lucru poate părea un pic ciudat pentru cei necunoscuți programării, dar este o practică obișnuită. Acest
ne permite să menționăm cu ușurință funcția în mod specific în contextul antetului pe care lucrăm. Această explicație este probabil puțin confuză, dar
un fel de raționament precis depășește domeniul de aplicare al acestui articol. Punctul funcției findSortKey este de a determina în ce coloană se sortează, putem face acest lucru
deoarece știm că elementul pe care au făcut clic este același indice din tabel pentru toate coloanele pe care le vom compara. De exemplu, dacă faceți clic pe cel de-al treilea antet
doriți să vă uitați la a treia coloană a fiecărui rând pentru a compara ce ordine de plasare a rândurilor. După ce declarăm această funcție, determinăm ordinea de sortare, ascendentă
sau descendentă. Acest lucru se face prin căutarea numelui de clasă "sort-asc" în antetul tabelului dacă este acolo știm că acesta este în prezent sortat ca ascendent și
trebuie să facem coborâre, în caz contrar să folosim defaultul ascendent. Acest lucru are grijă de cazul în care acesta este descendent și trebuie să îl facem să urce din nou.
Acest bit de cod returnează 1 sau -1, vom explica de ce mai târziu.
... var findSortKey = functie ($ cell) retur $ cell.find ('. Sort -key') text () toUpperCase () + "+ $ cell.text () toUpperCase () $ (acest) .is ('.sezurat-asc')? -1: 1; ... Acum vrem să obținem acea coloană specifică din fiecare rând și să o plasăm într-o matrice, aceasta se face folosind metoda jQuery a
get () care ia rândurile și le pune într-o matrice pe care funcția sort () o poate înțelege. Deoarece curentul
selectorul a fost capul de tabel, trebuie să revenim la copacul DOM 3 locuri pentru a găsi tabelul> tbody> tr> td. Pare puțin complex, dar în realitate este simplu. După
că ne buclele prin fiecare din rândurile pe care tocmai le-am găsit și găsim coloana pe care vrem să o folosim în sortare. Acest lucru se face verificând dacă indicatorul său (numărul de locuri
începând cu 0 din prima coloană din tabel) este egală cu indicele antetului cu clic. Acest lucru este trecut apoi în funcția findSortKey ca să putem
apoi setați un atribut personalizat numit sortKey care conține antetul coloanei pe care îl sortim și textul coloanei curente pe care o căutăm ambele
setat la majuscule, astfel încât tipul este insensibil pentru majuscule. Aceasta este o modalitate prin care eficientizăm sortarea astfel încât să o facem mai receptivă pentru cantități mari de date.
... // pentru sortare var $ rows = $ (this) .parent () parent () parent () find ('tbody tr'). // creează toate rândurile și găsește $ .each ($ rânduri, funcție (index, rând) row.sortKey = findSortKey ($ (rând) .copii ('td'). ... Apoi urmează funcția de sortare actuală () pe care am făcut-o. Aceasta se numește pe o serie de rânduri create cu ajutorul get (). Singurul parametru pe care îl transmitem este
dorim să determinăm sortarea. Această funcție primește două atribute de comparat și returnează 1 dacă prima este mai mare, -1 dacă a doua este mare și 0
dacă sunt egale. Aici variabila sortDirection intră în joc, deoarece modul în care funcționează este că am setat 1 sau -1 la ea și apoi înmulțim fie
1 sau -1 funcția ar trebui să revină după sortDirection, atingând efectul ascendent / descrescător dorit.
... // compara și sortează rândurile în ordine alfabetică $ rows.sort (funcția (a, b) if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection; retur 0; ); ...
Următorul bit de cod adaugă pur și simplu fiecare rând din matricea sortată acum în structura DOM. Acest lucru se face cu funcția de adăugare care este frumos pentru că este
nu copiază rândul și îl poziționează la sfârșit, îl înlătură efectiv de la locul curent din DOM și de la locurile în care îi spunem, în acest caz la sfârșitul
masa. După ce a făcut acest lucru pentru fiecare element din matrice, acesta va fi mutat fiecare rând în noul său loc. De asemenea, pentru a face un pic de curățare eliminăm sortKey
atributul stabilit mai devreme.
... // adăugați rândurile în ordinea corectă în partea inferioară a tabelului $. Fiecare ($ rânduri, funcție (index, rând) $ ('tbody') append (row); row.sortKey = null;) ; ... Acum ne îndreptăm spre etapa de curățare a funcției noastre de când a fost făcută toată ridicarea grele. Apoi apucam toate celulele din corpul tablei, scoatem orice
a lungul perioadei de timp în care se afișează atributele clasificate în declarațiile din clasă și apoi filtra toate, cu excepția coloanelor care sunt aceleași ca și antetul nostru sortat,
clasa pentru ei. Acest lucru este frumos pentru direcționarea CSS dacă, de exemplu, am vrut să facem coloana pe care o sortim cu o altă culoare, am putea declara acest CSS:
... sortat background-color: verde; ...
Ultimul lucru pe care îl facem este să eliminăm toate declarațiile CSS ciudate și să aplicăm din nou rapoartele Zebra exact așa cum am făcut în partea de filtru.
... $ ('.td vizibil') removeClass ('odd'); zebraRows ("vizibil: chiar td", "ciudat"); ... Așa facem sortarea foarte simplă. Este important să rețineți că acest lucru va sorta doar articolele în ordine alfabetică sau numerică și nu funcționează cu date sau monedă
de exemplu. Aceasta necesită o manipulare mai specializată, care depășește scopurile noastre de manipulare simplă a meselor.
În acest articol, am învățat cum să facem propriul cod de manipulare a mesei folosind jQuery. Aceasta este
foarte convenabil atât pentru utilizatori, cât și pentru noi. Utilizatorul obține controalele așteptate pentru sortarea și filtrarea datelor și avem un cod care este atât mic, cât și ușor de utilizat
a intelege. Pentru că am scris acest lucru, noi îl putem extinde acum pe propriile noastre căi. Metoda noastră este excelentă pentru manipularea simplă, dar dacă aveți nevoie de chiuveta de bucătărie, vă recomand să aruncați o privire la
Tabele de date plugin pentru jQuery. Mi-ar plăcea să răspund la orice întrebări din comentarii sau pe Twitter
(@Noahendrix). Vă mulțumim pentru lectură!
