Share
Når en nettside er utformet for å vise store datatabeller, bør en stor mengde hensyn tas opp slik at brukeren kan sortere dataene på en strukturert måte. I denne artikkelen vil jeg gå over fire teknikker: sveveeffekter, zebra rader, filtrering og sortering.
Det er noen viktige notater vi må adressere før vi ser på Javascript-koden vår. HTML-tabelloppslaget vil være som et annet bord du kanskje har opprettet, bortsett fra vi
krever to koder som mange utelater. Hodet delen av bordet må pakkes inn . Kroppen til
bord, der alle dataene vi vil vise skal holdes, må pakkes inn
| Fornavn | Etternavn | By | Stat |
|---|---|---|---|
| Mannix | Bolton |
Zebra Rows er en svært vanlig dataanordningsteknikk som både er enkel å implementere og har en kraftig innvirkning på. Zebra Rows in
essensen veksler stilen av merkelige og jevne rader for å gjøre dataene lettere å lese horisontalt. Dette er svært viktig med
multi-kolonne data slik at brukerne kan se på en kolonne og enkelt lese de tilknyttede dataene i samme rad under andre overskrifter. I
eksempler som jeg skal bruke gjennom denne opplæringen, har jeg en liste over personer med fire egenskaper: fornavn, etternavn, by og
stat. Legg merke til hvordan jeg har radfargene alternerende og fontfargen for å maksimere effekten.
Nå videre til selve Zebra Rows. Det første stedet å starte er en ekstern CSS-fil knyttet til dokumentet. Det første elementet til
målet er tabellen.
bord bakgrunnsfarge: hvit; bredde: 100%;
Dette er ganske trivielt; Vi forteller tabellens bakgrunn som hvit, og strekker seg til 100% av overordnet elementets bredde. Neste vil vi målrette
celleelementene
tbody td bakgrunnsfarge: hvit; tbody td.odd bakgrunnsfarge: # 666; farge: hvit;
Her setter vi opp en klasse for "odde" tabellrader som setter en alternativ bakgrunnsfarge og skrifttypefarge. Vi stiller også en standard stil for alle td
elementer som iboende gjelder for "jevne" rader. Dette er alt CSS som kreves. Jeg fortalte deg at det var enkelt! La oss nå se jQuery-koden. De
kraften til jQuery selectors gjør dette like enkelt som CSS-koden. Alt vi trenger å gjøre er å målrette cellene og bruk addClassName-funksjonen.
Accentsconagua
$ (dokument) .ready (funksjon () zebraRows ('tbody tr: odd td', 'odd');); // brukes til å bruke alternerende radstiler funksjon zebraRows (selector, className) $ (selector) .removeClass (className) .addClass (className); Denne koden, mens den er kort, har noen få gotker å vurdere. Først legger du merke til hvordan vi abstraherte implementeringen til en funksjon; Dette er ideelt fordi hvis vi forandrer
data i tabellen asynkront, uten en sideoppdatering, så vil vi forsikre at radene fortsatt er alternerende stil. Av samme grunn anvender vi også
removeClass-funksjonen, slik at hvis en rad i utgangspunktet er merkelig, men blir jevn, er vi sikre på at den ulige klassedepartementet ikke forblir. Dette kan virke forvirrende akkurat nå,
men når vi ser på filtrering senere vil dette bli tydeligere. Av hensyn til gjenbrukbar kode krever vi også at velger og klassenavn blir sendt til
funksjonen - slik at den kan brukes i prosjekter som har forskjellige klassenavn eller valgkrav (dvs. et nettsted som har flere tabeller bare en av
som du ønsker å målrette mot). Hvis du vurderer klar () -funksjonen, utføres en jQuery-funksjon når siden er
ferdig lasting, ser du vårt kall til zebraRows (). Her er hvor vi passerer i velger og klassenavn. Velgeren bruker en spesiell jQuery-syntaks
: merkelig, som vil finne alle merkelige rader. Deretter ser vi etter alle barnets elementer i raden som er celler. Denne koden
er ganske enkelt for alle som har brukt jQuery tidligere, men enkelheten bør gjøre koden ganske lett tilgjengelig for alle.
Merk: Mens du bruker jQuery til å bruke alternerende radfarger, er det en enkel løsning, det er ikke nedbrytbart hvis en bruker har JavaScript deaktivert. jeg ville
anbefaler å bruke merkelig klasse på serveren enten i PHP-kode eller statisk HTML, selv om dette er utenfor rammen av denne artikkelen.
En veldig fin effekt for brukerne er å markere raden de svinger på. Dette er en fin måte å utpeke bestemte data som de kan være interessert i
i. Dette er dødt enkelt å implementere ved hjelp av jQuery, men først en liten CSS.
... td.hovered bakgrunnsfarge: lyseblå; farge: # 666; ...
Dette er alt CSS vi trenger, i utgangspunktet når vi svinger over en rad, ønsker vi å gjøre alle cellene i den raden, har en lyseblå bakgrunn og en grå skriftfarge. De
jQuery for å få dette til å skje er like enkelt.
... $ ('tbody tr'). Sving (funksjon () $ (dette) .find ('td'). AddClass ('hovered');, funksjon () $ ) .removeClass ('hovered');); ... Vi benytter funksjonen hover () i jQuery-biblioteket. Det tar to argumenter som er
funksjoner vi vil ha henrettet når musen svinger over og når musen beveger seg av elementet, henholdsvis. Når de svinger over en rad, ønsker vi å finne alt
cellene i raden og legg til den svarte klassen til dem. Når musen forlater elementet vil vi da fjerne den klassen. Dette er alt vi må gjøre med
få hover effekten, gå prøve den ut!
Nå de kjøttfulle tingene - faktisk manipulerer dataene som vises. Hvis et nettsted krever at mange dataposter skal vises, i mitt eksempel 1000 rader, så er det
er mer enn hensiktsmessig for å tilby brukeren en måte å sile gjennom dataene. En spesielt effektiv måte som har spratt opp på nettet de siste årene som en del av
Web2.0 / AJAX bevegelsen filtrerer. Dette er også noe som Apple presser tungt inn der applikasjoner som iTunes. Målet for oss er å tillate brukeren
for å skrive inn et søk i en standard tekstinnføring og et levende filter vises tabellrommene under bare de som inneholder samsvarende tekst. Dette er uten tvil mer
avansert deretter de alternerende rad stilene, men i all realitet krever minimal kode, på grunn av jQuery's innebygde funksjonalitet.
Først skal vi skrive en generisk funksjon som tar en velger og en streng tekst. Denne funksjonen vil da søke etter alle elementene som passer den selektoren ser etter
strengen. Hvis den finner strengen, vil den vise elementet og bruke et klassenavn som er synlig for elementet, ellers skjuler det elementet. Hvorfor søker vi?
klassen av synlig? Vel når elementene er sortert, vil vi ønske å kjøre zebraRows-funksjonen igjen, men vi må fortelle jQuery å ignorere de skjulte radene, og
Den beste måten jeg har funnet på å gjøre det er å bruke en klasse synlig.
Den faktiske søket er gjort av JavaScript-funksjonen, passende navn, søk (). Selv om DOM fungerer, hvis vi ikke bruker jQuery-funksjonen,
tekst (), vil boksen også se på noen HTML-koder som forekommer i tabellraden, for eksempel
// filterresultater basert på spørringsfunksjonsfilter (selector, query) query = $ .trim (spørring); // trim white space query = query.replace (/ / gi, '|'); // legg til OR for regex query $ (selector) .each (funksjon () ($ (dette) .text (). søk (ny RegExp (spørring, "jeg")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible'); ); Den sjette linjen er hvor magien skjer, og krever sannsynligvis litt forklaring. Starter på linje 5, forteller vi at koden går gjennom alle elementene
som stemmer overens med selgeren, det vil si radene, og da vil vi utføre koden på linje 6 ved hjelp av hver enkelt. Linje 6 er litt komplisert hvis du er ny til programmering,
men det er ganske enkelt å forstå hvis vi deler det opp. Tenk på alt før spørsmålet er et spørsmål, hvis svaret på det spørsmålet er sant da
Kjør koden til venstre for kolon, men etter spørsmålstegnet. Hvis svaret er feil, kjør du koden etter kolon. Dette er egentlig en hvis
uttalelse, men i en mer kortfattet form kjent som en ternær operatør, og ville være annerledes enn å skrive:
... hvis ($ (dette) .text (). Søk (nytt RegExp (spørring, "jeg")) < 0) $(this).hide().removeClass('visible') else $(this).show().addClass('visible'); … Årsaken til at vi spør om søket () returnerer "mindre enn null, vi tester den tilstanden. I teorien er det ingenting galt med å sjekke om den returnerer (==) -1, men i praksis er det sikrere å bare forsikre om at det er
mindre enn null.
Ok, nå at vi har en komplett filterfunksjon, la oss bruke jQuery-hendelser for å koble den til inngangen. For å oppnå live-effekten ønsker vi det arrangementet vi ønsker
se etter når brukeren slipper en nøkkel mens de er fokusert på tekstboksen, kjent som nøkkeloppringing i JavaScript. Det er viktig at vi setter ID-attributtet til
input slik at vi kan målrette det ved hjelp av jQuery. Tilbake i vår klare funksjon må vi legge til kode etter vårt kall til zebraRows ().
Og jQuery-koden:
... // standard hver rad til synlig $ ('tbody tr'). AddClass ('synlig'); $ ('# filter'). nøkkel opp (funksjon (hendelse) // hvis esc er trykket eller ingenting er angitt hvis (event.keyCode == 27 || $ (dette) .val () == ") // Hvis esc trykkes, vil vi slette verdien av søkeboksen $ (dette) .val ("); // Vi vil at hver rad skal være synlig fordi hvis ingenting // er oppgitt, blir alle rader matchet. $ ('tbody tr ') .removeClass (' visible '). show (). addClass (' synlig '); // hvis det er tekst, la filteret annet filter (' tbody tr ', $ (dette) .val ()); // reapply zebra rader $ ('. visible td'). removeClass ('odd'); zebraRows ('. synlig: odd td', 'odd'); ... Denne koden er langt den mest komplekse vi har sett så langt, så vi vil gå gjennom det linje for linje.
Merk: Et godt notat kan være å bruke CSS til å skjule filterboksen, og rett over nøkkeloppringningen for å vise det, slik at brukere med JavaScript deaktivert ikke er
forvirret når de forsøker å sortere dataene, vil dette se ut som:
... #filter display: none; ...
application.js
... $ ('# filter'). Show (); ... Wow det var mye kode, vær så snill å ta en te / kaffepause før vi fortsetter å sortere ...
OK, helt klart? Bra, la oss gå!
Som den endelige oppgaven skal vi tillate sortering av tabellen ved hjelp av kolonneoverskriftene. Dette er veldig vanlig praksis som brukere forutse kjent som klikk for å sortere.
Når brukeren klikker på et av topptekstene, vil vi sortere bordet stigende, og hvis de klikker på nytt, vil vi sortere nedover etter den kolonnen. Denne koden er ganske
avansert og ikke for svak i hjertet. Det opprinnelige konseptet kom fra
Lære jQuery 1.3. Jeg
har re-engineered det for å bedre passe våre behov av enkelhet skjønt, men hvis du ønsker mer fin korn kontroll jeg vil referere deg til kapittel 7 i boken der
Tabeller og jQuery diskuteres i stor detalj.
Før vi virkelig dykker inn i selve koden, er det viktig at vi diskuterer begrepet hvordan vi planlegger å takle dette problemet. Vi vil bruke JavaScript internt
sort () metode som er designet for å ta en matrise og sortere den
bruker en tilpasset funksjon levert av koden. I vårt tilfelle ønsker vi bare å sortere alfabetisk og numerisk, så vi vil bare sammenligne de to elementene den leverer
og return hvilken rekkefølge de to skulle gå inn i basert på det designet. Fordi vi vil sortere både stigende og synkende, vil vi bruke en CSS-klassedeklarasjon for å se
hva den nåværende tilstanden for sorteringen ved den kolonnen er og reverser den om nødvendig. Når vi har vårt utvalg i rekkefølge, vil vi bruke bestillingen til å sette inn radene igjen
inn i bordet en-for-en. Dette høres ut som mye, men på grunn av hvor lynrask JavaScript er, vil det være veldig sømløst for brukeren. Alt
Dette vil bli knyttet til klikkhendelsen i kolonneoverskriftene i tabellen.
Som vanlig, la oss få CSS-koden ut av veien, da det er den mest enkle.
th.sortable color: # 666; markør: pointer; tekst-dekorasjon: understreke; th.sortable: hover color: black; th.sorted-asc, th.sorted-desc farge: svart;
Alle våre sorterbare overskrifter vil ha en klasse som kan sorteres, og svingemodifikatoren i CSS gjør det etterligne en hyperkobling for brukere. Vi benytter oss også av
CSS-klassen nevnte vi om sortert-asc og sortert-desc slik at vi kan vise brukeren den nåværende kolonnen som sorterer bordet. Jeg inkluderte ikke det, men
dette ville være et godt sted å sette bakgrunnsbilder av piler som peker opp og ned som en ytterligere visuell signal til brukeren. Nå beveger vi oss på JavaScript-koden og
kompleksitet sortering, heldigvis gjort lettere med jQuery. Koden nedenfor tilhører klar () -funksjonen vi startet vei tilbake i begynnelsen. Plasser dette til høyre
over slutten av funksjonen er best.
// grab alle headerrader $ ('thead th'). hver (funksjon (kolonne) $ (dette) .addClass ('sorterbar'). klikk (funksjon () var findSortKey = funksjon ($ celle) cell.find ('. sort-key'). tekst (). toUpperCase () + "+ $ cell.text (). toUpperCase ();; var sortDirection = $ (dette) .is ')? -1: 1; // trinn tilbake opp treet og få rader med data // for sortering var $ rader = $ (dette) .parent () .forelder () .forelder (). Finn (' tbody tr '). get (); // loop gjennom alle rader og finn $ .each ($ rader, funksjon (indeks, rad) row.sortKey = findSortKey ($ (rad) .children (' td '). (kolonne));); // sammenligne og sorter radene alfabetisk $ rows.sort (funksjon (a, b) if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) returner sortDirection; returner 0; ); // legge radene i riktig rekkefølge til bunnen av tabellen $ .each ($ rader, funksjon (indeks, rad) $ ('tbody'). append (rad); row.sortKey = null;); // identifiser kolonne sorteringsordren $ ('th'). removeClass ('sorted-asc sorted-desc'); var $ sortHead = $ ('th'). filter (': nth-barn (' + (kolonne + 1) + ')'); sortDirection == 1? $ sortHead.addClass ('sorted-asc'): $ sortHead.addClass ('sorted-desc'); // identifiser kolonnen som skal sorteres etter $ ('td'). removeClass ('sorted') .filter (': nth-child (' + (kolonne + 1) + ')') .addClass ('sortert') ; $ ('. visible td'). removeClass ('odd'); zebraRows ('. visible: even td', 'odd'); ); ); Woo, det er mye kode. La oss knuse det i store biter. Den første delen av koden er å ta tak i alle hodene og looping gjennom dem. Den første tingen
det gjør er legge til en klasse av sorterbar, og begynner å klikke bind.
... / / Ta tak i alle headerrader $ ('thead th'). Hver (funksjon (kolonne) $ (dette) .addClass ('sorterbar'). Klikk (funksjon () Vær oppmerksom på at dette lett kan endres slik at bare enkelte kolonner kan sorteres ved å fjerne addClass () samtale og bytte velger fra 'thead th' til
noe som "thead th.sortable". Selvfølgelig krever dette at du manuelt spesifiser hvilken av kolonnene du kan sortere ved å legge til
passende overskrifter i HTML-koden.
Den neste koden er en funksjonsdeklarasjon knyttet til en variabel. Dette kan virke litt rart for de som ikke er kjent med programmering, men det er vanlig praksis. Dette
lar oss enkelt referere til funksjonen spesielt i sammenheng med overskriften vi jobber med. Denne forklaringen er nok litt forvirrende, men den
presis resonnement slags oversteps omfanget av denne artikkelen. Poenget med findSortKey-funksjonen bestemmer hvilken kolonne vi sorterer etter, vi kan gjøre dette
fordi vi vet at elementet de klikket på, er den samme indeksen i tabellen for alle kolonnene vi vil sammenligne. For eksempel hvis de klikker på den tredje headeren vi
Vil du se på den tredje kolonnen i hver rad for å sammenligne hvilken rekkefølge du vil plassere radene. Når vi erklærer denne funksjonen, bestemmer vi deretter sorteringsrekkefølgen, stigende
eller nedadgående. Dette gjøres ved å lete etter klassenavnet "sorted-asc" i tabelloverskriften hvis det er der, vi vet at det for tiden er sortert som stigende og
Vi må gjøre nedstigning, ellers bruk standard av stigende. Dette tar vare på tilfellet der det faller ned og vi må gjøre det stige opp igjen.
Denne koden returnerer 1 eller -1, vi vil forklare hvorfor senere.
... var findSortKey = funksjon ($ celle) return $ cell.find ('sort-key'). Tekst (). ToUpperCase () + "+ $ cell.text (). ToUpperCase ();; var sortDirection = $ (dette) .is ('. sortert-asc')? -1: 1; ... Nå vil vi få den spesifikke kolonnen fra hver rad og sette den i en matrise, dette gjøres ved hjelp av jQuery-metoden til
få () som tar radene og legger dem i en matrise som sorten () -funksjonen kan forstå. Fordi gjeldende
Velgeren var bordshodet, vi må gå tilbake til DOM-treet 3 steder for å finne bordet> tbody> tr> td. Virker litt komplekst, men i virkeligheten er det enkelt. Etter
at vi løp gjennom hver av de rader vi nettopp har funnet, og finn kolonnen vi vil bruke i sortering. Dette gjøres ved å sjekke om indeksen (antall steder
starter ved 0 fra den første kolonnen i tabellen) er lik indeksen for klikket overskrift. Dette sendes deretter inn i funnene FindSortKey slik vi kan
sett deretter et egendefinert attributt som heter sortKey som inneholder kolonneoverskriften vi sorterer etter og teksten til den nåværende kolonnen vi ser begge er
sett til store versjoner, slik at saken er uaktsom. Dette er en måte vi strømlinjeformer sorteringen slik at vi gjør det mer responsivt for store mengder data.
... // for sortering var $ rader = $ (dette) .parent () .forelder () .forelder (). Finn ('tbody tr'). Get (); // loop gjennom alle rader og finn $ .each ($ rader, funksjon (indeks, rad) row.sortKey = findSortKey ($ (rad) .children ('td'). eq (kolonne));); ... Deretter kommer den faktiske sorten () -funksjonen som jeg har pågått om. Dette kalles på rekke rader vi opprettet ved hjelp av get (). Den eneste parameteren vi passerer er
funksjon vi ønsker å bestemme sorteringen. Den funksjonen får to attributter til å sammenligne og returnerer 1 hvis den første er større, -1 hvis den andre er stor og 0
hvis de er like. Dette er hvor variabelen sortDirection kommer inn i spill fordi måten det virker på, er at vi setter 1 eller -1 til det og deretter multipliserer enten
1 eller -1 skal funksjonen returnere etter sortDirection, oppnå stigende / synkende effekt vi ønsker.
... // sammenligne og sorter radene alfabetisk $ rows.sort (funksjon (a, b) if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) returner sortDirection; returner 0; ); ...
Den neste koden legger ganske enkelt til hver rad fra den nå sorterte matrisen tilbake til DOM-strukturen. Dette er gjort med append-funksjonen som er hyggelig fordi den
kopierer ikke raden og plasserer den på slutten den faktisk fjerner den fra det nåværende stedet i DOM og steder der vi forteller det, i dette tilfellet på slutten av
bord. Etter at det har gjort dette for hvert element i gruppen, vil det ha flyttet hver rad til sitt nye sted. Også for å gjøre litt opprydding fjerner vi sortKey
attributt vi satt tidligere.
... // legg til radene i riktig rekkefølge til bunnen av tabellen $ .each ($ rader, funksjon (indeks, rad) $ ('tbody'). Append (rad); row.sortKey = null;) ; ... Nå går vi inn i opprydningsfasen av funksjonen vår siden alle de tunge løftene har blitt gjort. Deretter tar vi alle cellene i bordkroppen, fjerner alle
dvale sorterte attributter i klassedeklarasjonene, og deretter filtrere ut alt, men kolonnene som er den samme indeksen som vår sorterte topptekst og bruke den "sorterte"
klasse til dem. Dette er fint for CSS-målretting hvis vi for eksempel ønsker å lage kolonnen vi sorterer med en annen farge, kan vi deklarere dette CSS:
... sortert (bakgrunnsfarge: grønn; ...
Den endelige tingen vi gjør er å fjerne noen "merkelige" CSS-erklæringer og bruke Zebra-radene på nytt akkurat som vi gjorde i filterdelen.
... $ ('. Visible td'). RemoveClass ('odd'); zebraRows ('. visible: even td', 'odd'); ... Slik gjør vi veldig enkel sortering. Det er viktig å merke seg at dette bare vil sortere elementer alfabetisk eller numerisk og ikke fungerer med datoer eller valuta
for eksempel. Det krever mer spesialisert håndtering som er utenfor våre mål om enkel bordmanipulering.
I denne artikkelen lærte vi å rulle vår egen tabellmanipulasjonskode ved hjelp av jQuery. Dette er
veldig praktisk for både brukeren og oss. Brukeren får de forventede kontrollene for sortering og filtrering av dataene, og vi har kode som er både liten og enkel å
forstå. Fordi vi skrev dette selv, kan vi nå utvide det på våre egne måter. Vår metode er perfekt for enkel manipulasjon, men hvis du trenger kjøkkenvasken, anbefaler jeg å ta en titt på
Datatabellplugg for jQuery. Jeg vil gjerne svare på spørsmål i kommentarene eller på Twitter
(@Noahendrix). Takk for at du leste!
