Sortarea datelor în JavaScript
Sortarea datelor din tabel sunt sarcini destul de comune, care trebuie să rezolve programator. Și aplicația on-line nu este o excepție. Ea apare de multe ori, deci va trebui să dea utilizatorilor pe un „client“ este destul de o cantitate impresionantă de date. Și cantități mari implică costuri de tratament, astfel încât, dacă doriți să ușureze utilizatorii dvs. de lucru, trebuie să ia măsuri.
Există diferite moduri în care ar facilita utilizatorilor „client“ pentru a lucra cu cantități mari de date, inclusiv posibila utilizare paginația. Aici puteți citi despre cum se face paginare corect
- Nu utilizați biblioteci externe
- Funcționează în toate browserele importante
- Dimensiuni reduse
- Ușor de conectare și configurarea
- Linii și simboluri sortate în ordine alfabetică, de figuri de valoare
- Acesta are evenimentul și de stat
- Acesta este preocupat doar de propria afacere
demo date Sortare după:
Pentru claritate, ceea ce ar fi în măsură să vă înțelegeți dacă este nevoie de o discuție generală în acest articol script de sortare, am făcut un pic demo. Notă titlurile coloanelor din tabel sunt pictograme care indică posibilitatea de acest fel.
Conectarea script de sortare:
Deci, cum vă conectați sortarea script-ul? În primul rând aveți nevoie de un tabel cu date despre un marcaj (datele din tabel luate arbitrar, dar cu un sens care ar arăta că putem sorta nu numai numere, dar, de asemenea, linii și simboluri):
Există unele cerințe pentru marcarea tabelului în sine:
Nu rowspan, colspan, etc. Toate rândurile trebuie să aibă același număr de coloane și toate coloanele trebuie să aibă același număr de rânduri. Tabelele presupun sortarea datelor este logic și nu ar trebui să provoace disconfort.
De asemenea, este necesar să existe tag THEAD cu un singur rând antet (vezi. Listate de mai sus). Pentru conținutul antet, script-ul va adăuga iconițe sortator. Rubricile nu sunt implicate în sortarea.
Aceste restricții sunt logice și în concordanță cu standardele (chiar dimpotrivă), astfel încât acestea nu ar trebui să fie un obstacol pentru tine.
O funcție care sortează am numit sortTable este nevoie de 3 obligatorii și 2 parametri opționali:
O situație în care datele sunt sortate într-un anumit fel, într-o anumită coloană, iar atunci când utilizatorul face clic toate la fel pentru același tip - rezolvă după cum urmează: nu se întâmplă nimic. Sortarea eveniment nu este numit. Acest lucru se face pentru a conserva resursele: în cazul în care se face sortarea - nu este nevoie să-l facă din nou.
Deci, să se pregătească elementele pentru sortarea pictograme. Pentru a face acest lucru, avem nevoie doar de a crea o pereche de elemente SPAN (care nici măcar nu trebuie să pună în DOM copac):
Apoi, dacă sunteți un suporter mândru de standardele pot fi plasate pictograme ▲ și ▼ la SPAN-urile după cum urmează:
Iar pentru cei care ar dori să chhat toate temerile. Ce e în neregulă cu innerHTML poate face pur și simplu:
Și, de fapt, suna sortator:
Acesta este cel mai simplu caz. Dacă vrem în loc de icoane și ▲ ▼ pentru a pune fotografiile ak atribuie, de asemenea, stivuitoare pentru a sorta evenimentele, citiți mai departe.
Conectivitate avansată script de sortare:
Pentru script-ul avansat de sortare conexiune utiliza același marcaj pentru tabel, care este prezentat în primul exemplu, pentru a sorta pictogramele utiliza, de asemenea SPAN-uri:
Dar, în loc să fie plasate în interiorul ▲ ▼ și le vom numi unor astfel de tipuri de stiluri:
Dar cu aceste reguli:
Sarcina principală a sortării css imagine arată ca fundal este, de asemenea, și setați dimensiunea pictogramei. Următoarea peredaom funcția lor:
Puteti vedea, de asemenea, că a 4-a și a 5-parametrii am trecut în link-urile de funcții funcției de apelare - Stivuitoare pentru a sorta evenimentele.
Uite ce sa întâmplat:
Codul sursă de un fel de script-ul:
Sper că veți găsi date utile script-ul meu de sortare și utilizatorii vor aprecia la justa valoare sale - evoluții de succes prieten