Share
Wanneer een webpagina is ontworpen om grote tabellen met gegevens weer te geven, moet er veel aandacht worden besteed aan het op een gestructureerde manier door de gebruiker laten sorteren van de gegevens. In dit artikel ga ik over vier technieken: zweefeffecten, zebrarijen, filteren en sorteren.
Er zijn enkele belangrijke opmerkingen die we moeten behandelen voordat we naar onze Javascript-code kijken. De HTML-tabelmarkering is net als elke andere tabel die u hebt gemaakt, behalve wij
vereisen twee tags die veel mensen weglaten. Het hoofdgedeelte van de tafel moet ingepakt zijn . Het lichaam van de
tabel, waarin alle gegevens die we willen weergeven worden bewaard, moeten worden ingepakt
| Voornaam | Achternaam | stad | Staat |
|---|---|---|---|
| Mannix | Bolton |
Zebra Rows zijn een veel voorkomende data-organisatie techniek die zowel eenvoudig te implementeren is als een krachtige impact heeft. Zebra Rows in
essentie wisselt de stijl van oneven en even rijen af om de gegevens horizontaal leesbaarder te maken. Dit is erg belangrijk met
gegevens met meerdere kolommen, zodat gebruikers één kolom kunnen bekijken en gemakkelijk de bijbehorende gegevens in dezelfde rij onder andere headers kunnen lezen. In de
voorbeelden die ik in deze zelfstudie zal gebruiken, ik heb een lijst met mensen met vier eigenschappen: voornaam, achternaam, stad en
staat. Merk op hoe ik de rijkleuren afwisselend en de kleur van het lettertype heb om het effect te maximaliseren.
Nu verder met de eigenlijke Zebra Rows. De eerste plaats om te beginnen is een extern CSS-bestand dat aan het document is gekoppeld. Het eerste element om
doel is de tafel.
tafel achtergrondkleur: wit; breedte: 100%;
Dit is vrij triviaal; we zeggen dat de achtergrond van de tabel wit is en uitrekken tot 100% van de breedte van het bovenliggende element. Vervolgens zullen we ons richten
de celelementen
tbody td background-color: white; tbody td.odd background-colour: # 666; kleur wit;
Hier stellen we een klasse in voor de "oneven" tabelrijen die een alternatieve achtergrondkleur en letterkleur instellen. We hebben ook een standaardstijl ingesteld voor alle td
elementen die inherent van toepassing zijn op de "even" -rijen. Dit is alle CSS die vereist is. Ik zei toch dat het eenvoudig was! Laten we nu de jQuery-code bekijken. De
De kracht van jQuery-selectors maakt dit net zo eenvoudig als de CSS-code. Het enige wat we moeten doen is de cellen targeten en de functie addClassName gebruiken.
Accentsconagua
$ (document) .ready (function () zebraRows ('tbody tr: odd td', 'odd');); // gebruikt voor het toepassen van alternerende rijstijlen functie zebraRows (selector, className) $ (selector) .removeClass (className) .addClass (className); Deze code, hoewel kort, heeft een paar valkuilen om te overwegen. Allereerst merkte ik op hoe we de implementatie tot een functie hebben geabstraheerd; dit is ideaal omdat als we het veranderen
gegevens in de tabel asynchroon, zonder een pagina verversen, dan willen we ervoor zorgen dat de rijen nog steeds afwisselend stijl zijn. Om dezelfde reden voeren we ook de
removeClass-functie, zodat als een rij in eerste instantie oneven is, maar gelijk wordt, we er zeker van zijn dat de oneven klassedefinitie niet blijft bestaan. Dit lijkt op dit moment verwarrend,
maar wanneer we later naar filteren kijken, zal dit duidelijker worden. Voor herbruikbare code moeten we ook de selector en de klassenaam doorgeven
de functie - zodat deze kan worden gebruikt in projecten met verschillende klassenamen of selectorvereisten (dat wil zeggen een site met meerdere tabellen waarvan er slechts één
die je wilt targeten). Als u de functie ready () bekijkt, wordt een jQuery-functie uitgevoerd wanneer de pagina is
Als u klaar bent met laden, ziet u onze oproep aan zebraRows (). Hier geven we de selector- en klassennaam door. De selector maakt gebruik van een speciale jQuery-syntaxis
: oneven, die alle oneven rijen zal vinden. Vervolgens zoeken we naar alle onderliggende elementen van de rij die cellen zijn. Deze code
is vrij eenvoudig voor iedereen die eerder jQuery heeft gebruikt, maar de eenvoud moet de code voor iedereen redelijk leesbaar maken.
Notitie: Terwijl het gebruik van jQuery om afwisselende rij kleuren toe te passen een eenvoudige oplossing is, is het niet afbreekbaar als een gebruiker JavaScript heeft uitgeschakeld. ik zou
raad aan om de oneven klasse op de server toe te passen in PHP-code of de statische HTML, hoewel dit buiten het bestek van dit artikel valt.
Een echt leuk effect voor gebruikers is om de rij te markeren waar ze momenteel op zweven. Dit is een geweldige manier om specifieke gegevens te selecteren waarvan ze mogelijk geïnteresseerd zijn
inch Dit is doodeenvoudig om te implementeren met jQuery, maar eerst een beetje CSS.
... td.hovered achtergrondkleur: lichtblauw; kleur: # 666; ...
Dit is allemaal CSS die we nodig hebben, eigenlijk willen we dat alle cellen in die rij een lichtblauwe achtergrond en een grijze letterkleur hebben. De
jQuery om dit te laten gebeuren is net zo eenvoudig.
... $ ('tbody tr'). Hover (function () $ (this) .find ('td'). AddClass ('hovered');, function () $ (this) .find ('td' ) .removeClass ('hovered');); ... We maken gebruik van de functie hover () in de jQuery-bibliotheek. Er zijn twee argumenten voor nodig
functies die we willen uitvoeren wanneer de muis zweeft en wanneer de muis van het element af beweegt, respectievelijk. Als ze over een rij zweven, willen we alles vinden
de cellen in de rij en voeg de klasse met zweeftekens eraan toe. Wanneer de muis het element verlaat dat we willen verwijderen, verwijdert u die klasse. Dit is alles wat we moeten doen
krijg het hover effect, ga het proberen!
Nu het vlezige spul - eigenlijk manipuleren van de gegevens die wordt getoond. Als een website vraagt om veel gegevensrecords weer te geven, in mijn voorbeeld 1000 rijen, dan is het
is meer dan gepast om de gebruiker een manier te bieden om de gegevens te doorzoeken. Een bijzonder effectieve manier die de laatste jaren op het internet is ontstaan als onderdeel van
de beweging Web2.0 / AJAX filtert. Dit is ook iets dat Apple zwaar pusht in applicaties zoals iTunes. Het doel voor ons is om de gebruiker toe te staan
om een zoekopdracht in te voeren in een standaard tekstinvoer en live filter de onderstaande tabelrijen die alleen die met overeenkomende tekst tonen. Dit is aantoonbaar meer
geavanceerd dan de afwisselende rijstijlen, maar in alle werkelijkheid vereist minimale code, vanwege de ingebouwde functionaliteit van jQuery.
Eerst zullen we een generieke functie schrijven die een selector en een reeks tekst vereist. Deze functie zoekt dan naar alle elementen die overeenkomen met die selector waarnaar wordt gezocht
de snaar. Als het de tekenreeks vindt, wordt het element weergegeven en wordt een klassenaam toegepast die zichtbaar is voor het element, anders verbergt het het element. Waarom solliciteren we?
de klasse van zichtbaar? Nadat de items zijn gesorteerd, willen we de functie zebraRows opnieuw uitvoeren, maar we moeten jQuery laten weten dat de verborgen rijen moeten worden genegeerd, en
de beste manier die ik heb gevonden om dat te doen is een klasse van zichtbaar toepassen.
Het daadwerkelijke zoeken wordt gedaan door de JavaScript-functie, toepasselijk benoemd, search (). Hoewel vanwege de manier waarop de DOM werkt, als we de functie jQuery niet gebruiken,
tekst (), zal het vak ook kijken naar HTML-tags die zich toevallig in de tabelrij bevinden, zoals
// filterresultaten op basis van queryfunctie filter (selector, query) query = $ .trim (query); // trim white space query = query.replace (/ / gi, '|'); // voeg OR toe voor regex-query $ (selector) .each (function () ($ (this) .text (). search (nieuwe RegExp (query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible'); ); De zesde regel is waar de magie gebeurt, en vereist waarschijnlijk een beetje uitleg. Beginnend met regel 5, vertellen we de code om door alle elementen te bladeren
die overeenkomen met de selector, d.w.z. de rijen, en dan willen we de code op regel 6 uitvoeren met elk daarvan. Lijn 6 is een beetje ingewikkeld als je nog niet bekend bent met programmeren,
maar het is vrij gemakkelijk te begrijpen als we het opsplitsen. Denk aan alles vóór het vraagteken als een vraag, als het antwoord op die vraag dan waar is
voer de code links van de dubbele punt uit, maar na het vraagteken. Als het antwoord vals is, voert u de code na de dubbele punt uit. Dit is in wezen een als
maar in een meer beknopte vorm bekend als een ternaire operator, en dat zou niet anders zijn dan schrijven:
... if ($ (this) .text (). Search (nieuwe RegExp (query, "i")) < 0) $(this).hide().removeClass('visible') else $(this).show().addClass('visible'); … De reden waarom we vragen of search () "minder dan nul retourneert, we testen die voorwaarde." In theorie is er niets mis met het controleren of het resultaat (==) -1 is, maar in de praktijk is het veiliger om te verzekeren dat het is
minder dan nul.
Oké, nu we een volledige filterfunctie hebben, laten we jQuery-gebeurtenissen gebruiken om het aan de invoer te koppelen. Om het live-effect te bereiken, willen we het evenement dat we willen
het letten op is wanneer de gebruiker een sleutel vrijgeeft terwijl deze gericht is op het tekstvak, beter bekend als keyup in JavaScript. Het is belangrijk dat we het ID-kenmerk van de
invoer zodat we het kunnen targeten met jQuery. Terug in onze ready-functie moeten we code toevoegen na onze oproep aan zebraRows ().
En de jQuery-code:
... // standaard elke rij op zichtbaar $ ('tbody tr'). AddClass ('visible'); $ ('# filter'). keyup (functie (event) // als esc wordt ingedrukt of niets wordt ingevoerd als (event.keyCode == 27 || $ (this) .val () == ") // als esc wordt ingedrukt, willen we de waarde van zoekvak $ (this) .val ("); // wissen we willen dat elke rij zichtbaar is omdat als niets // wordt ingevoerd, alle rijen worden vergeleken. $ ('tbody tr ') .removeClass (' visible '). show (). addClass (' visible '); // als er tekst is, laat filter anders filter (' tbody tr ', $ (this) .val ()); // zebra rijen opnieuw toepassen $ ('. visible td'). removeClass ('odd'); zebraRows ('. visible: odd td', 'odd'); ... Deze code is veruit de meest complexe die we tot nu toe hebben gezien, dus we zullen er regel voor regel doorheen stappen.
Notitie: Een goede opmerking kan zijn om CSS te gebruiken om het filtervak te verbergen en net boven het key-up-call om het weer te geven, zodat gebruikers met JavaScript uitgeschakeld zijn
in de war als ze proberen de gegevens te sorteren, ziet dit er als volgt uit:
... #filter weergave: geen; ...
application.js
... $ ('# filter'). Show (); ... Wauw, dat was veel code, voel je vrij om een thee / koffiepauze te nemen voordat we verder gaan met sorteren ...
Oké, allemaal klaar? Goed, laten we gaan!
Als de laatste taak gaan we toestaan dat de tabel wordt gesorteerd op een van de kolomkoppen. Dit is een standaardpraktijk waar gebruikers op anticiperen dat bekend staat als klik om te sorteren.
Wanneer de gebruiker op een van de headers klikt, willen we de tabel oplopend sorteren en als ze opnieuw klikken, willen we sorteren op die kolom. Deze code is vrij
gevorderd en niet voor de zwakkeren in hart en nieren. Het eerste concept kwam van
JQuery leren 1.3. ik
hebben het opnieuw ontworpen om beter aan onze behoeften van eenvoud te voldoen, maar als je meer fijnkorreligheid wenst, zal ik je verwijzen naar hoofdstuk 7 van het boek waarin
tabellen en jQuery worden uitgebreid besproken.
Voordat we echt in de feitelijke code duiken, is het belangrijk dat we het concept bespreken van hoe we dit probleem willen aanpakken. We zullen de interne JavaScript gebruiken
sorteer () methode die is ontworpen om een array te nemen en te sorteren
een aangepaste functie gebruiken die door de code wordt geleverd. In ons geval willen we eenvoudig alfabetisch en numeriek sorteren, dus we vergelijken alleen de twee items die het levert
en retourneer welke volgorde de twee moeten gebruiken op basis van dat ontwerp. Omdat we zowel oplopend als aflopend willen sorteren, gebruiken we een CSS-klassenverklaring om te zien
wat de huidige staat van het type is door die kolom is en deze indien nodig omkeren. Zodra we onze array in orde hebben, zullen we de order gebruiken om de rijen opnieuw in te voegen
in de tafel een voor een. Dit klinkt als veel, maar vanwege de snelheid van JavaScript is dit voor de gebruiker erg naadloos. Alles van
dit wordt gekoppeld aan de klikgebeurtenis van de kolomkoppen in de tabel.
Zoals gewoonlijk, laten we de CSS-code uit de weg ruimen, omdat deze het meest rechttoe rechtaan is.
th.sortable color: # 666; cursor: pointer; tekstdecoratie: onderstrepen; th.sortable: hover color: black; th.gesorteerd-asc, th.gesorteerd-desc kleur: zwart;
Al onze sorteerbare headers hebben een klasse sorteerbaar en de hover-modifier in CSS zorgt ervoor dat het een hyperlink emuleert voor gebruikers. Wij maken er ook gebruik van
de CSS-klasse die we noemden over gesorteerd-asc en gesorteerd-desc zodat we de gebruiker de huidige kolom kunnen tonen die de tabel sorteert. Ik heb het niet opgenomen, maar
dit zou een goede plek zijn om achtergrondafbeeldingen van pijlen omhoog en omlaag te zetten als een extra visueel signaal voor de gebruiker. Nu gaan we verder met de JavaScript-code en de
complexiteit van sorteren, gelukkig gemakkelijker gemaakt met jQuery. De onderstaande code hoort thuis in de functie ready () die we aan het begin hebben gebruikt. Dit goed plaatsen
boven het einde van de functie is het beste.
// pak alle koprijen $ ('thead th'). each (functie (kolom) $ (this) .addClass ('sortable'). click (function () var findSortKey = function ($ cell) return $ cell.find ('. sort-key'). text (). toUpperCase () + "+ $ cell.text (). toUpperCase ();; var sortDirection = $ (this) .is ('. gesorteerd-asc ')? -1: 1; // stap een stap omhoog in de structuur en pak de rijen met gegevens // voor het sorteren var $ rows = $ (this) .parent (). Parent (). Parent (). Find (' tbody tr '). get (); // doorloop alle rijen en vind $ .each ($ rows, function (index, row) row.sortKey = findSortKey ($ (row) .children (' td '). eq (kolom));); // vergelijk en sorteer de rijen alfabetisch $ rows.sort (functie (a, b) if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) sortDirection retourneren; retourneer 0; ); // voeg de rijen in de juiste volgorde toe aan de onderkant van de tabel $ .each ($ rows, function (index, row) $ ('tbody'). append (row); row.sortKey = null;); // identificeer de kolom sorteervolgorde $ ('th'). removeClass ('gesorteerd-asc gesorteerd-desc'); var $ sortHead = $ ('th'). filter (': nth-child (' + (column + 1) + ')'); sortDirection == 1? $ sortHead.addClass ('separated-asc'): $ sortHead.addClass ('gesorteerd-desc'); // identificeer de kolom die moet worden gesorteerd op $ ('td'). removeClass ('gesorteerd') .filter (': nth-child (' + (column + 1) + ')') .addClass ('separated') ; $ ('. visible td'). removeClass ('odd'); zebraRows ('. visible: even td', 'odd'); ); ); Woo, dat is veel code. Laten we dat onderverdelen in omvangrijke delen. Het eerste stukje code grijpt alle headers en loopt er doorheen. Het eerste ding
het is een klasse van sorteerbaar toevoegen, en begint met de klikbinding.
... // pak alle koprijen $ ('thead th'). Each (functie (kolom) $ (this) .addClass ('sortable'). Click (function () ... Houd er rekening mee dat dit eenvoudig kan worden gewijzigd om alleen bepaalde kolommen te kunnen sorteren door de addClass () -aanroep te verwijderen en de selector te wijzigen van 'thead th' in
zoiets als 'thead th.sortable'. Dit vereist natuurlijk dat u handmatig opgeeft welke van uw kolommen sorteerbaar zijn door toe te voegen aan de
geschikte headers in de HTML-code.
Het volgende stukje code is een functiedeclaratie die is gekoppeld aan een variabele. Dit lijkt misschien een beetje raar voor degenen die onbekend zijn met programmeren, maar het is gebruikelijk. Deze
stelt ons in staat om eenvoudig de functie te verwijzen in het kader van de koptekst waaraan we werken. Die uitleg is waarschijnlijk een beetje verwarrend, maar de
precieze redenering overschrijdt de reikwijdte van dit artikel. Het punt van de functie findSortKey bepaalt welke kolom we sorteren, we kunnen dit doen
omdat we weten dat het element waarop ze hebben geklikt dezelfde index is in de tabel voor alle kolommen die we zullen vergelijken. Bijvoorbeeld als ze op de derde kop klikken, wij
willen kijken naar de derde kolom van elke rij om te vergelijken met welke volgorde de rijen moeten worden geplaatst. Nadat we deze functie hebben verklaard, bepalen we vervolgens de sorteervolgorde, oplopend
of aflopend. Dit wordt gedaan door te zoeken naar de klassenaam 'gesorteerde asc' in de tabelkop als die er is, we weten dat deze momenteel is gesorteerd als oplopend en
we moeten afdalen, gebruik anders de standaard van oplopend. Dit zorgt voor het geval waar het afloopt en we moeten het opnieuw laten stijgen.
Dit stukje code geeft 1 of -1 terug, we zullen later uitleggen waarom.
... var findSortKey = function ($ cell) return $ cell.find ('. Sort-key'). Text (). ToUpperCase () + "+ $ cell.text (). ToUpperCase ();; var sortDirection = $ (this) .is ('. gesorteerde-asc')? -1: 1; ... Nu willen we die specifieke kolom uit elke rij halen en in een array plaatsen, dit gebeurt met de jQuery-methode van
get () die de rijen neemt en deze in een array plaatst die de sort () -functie kan begrijpen. Omdat de stroom
selector was de tafelkop we moeten een stap terug doen naar de DOM tree 3 plaatsen om tafel> tbody> tr> td te vinden. Lijkt een beetje ingewikkeld, maar in werkelijkheid is het eenvoudig. Na
dat we door alle rijen lopen die we net hebben gevonden en de kolom vinden die we willen gebruiken bij het sorteren. Dit wordt gedaan door te controleren of de index (het aantal plaatsen
beginnend bij 0 uit de eerste kolom in de tabel) is gelijk aan de index van de aangeklikte header. Dit wordt dan doorgegeven aan de findSortKey-functie, zodat we kunnen
stel vervolgens een aangepast attribuut in, sortkey genaamd, dat de kolomkop bevat waarlangs we sorteren en de tekst van de huidige kolom die we bekijken beide die zijn
ingesteld op hoofdletters, dus het type is niet hoofdlettergevoelig. Op deze manier stroomlijnen we de sortering zodat we sneller kunnen reageren op grote hoeveelheden gegevens.
... // voor het sorteren van var $ rows = $ (this) .parent (). Parent (). Parent (). Find ('tbody tr'). Get (); // loop door alle rijen en vind $ .each ($ rijen, functie (index, rij) row.sortKey = findSortKey ($ (rij) .children ('td'). eq (column));); ... Hierna komt de eigenlijke sorteer () functie waar ik het over heb gehad. Dit wordt aangeroepen in de reeks rijen die we hebben gemaakt met get (). De enige parameter die we doorgeven is de
functie willen we het sorteren bepalen. Die functie ontvangt twee attributen om te vergelijken en geeft 1 terug als de eerste groter is, -1 als de tweede groot is, en 0
als ze gelijk zijn. Dit is waar de variabele sortDirection in het spel komt omdat de manier waarop het werkt, is dat we er 1 of -1 op instellen en vervolgens de variabele vermenigvuldigen
1 of -1 de functie zou moeten terugkeren door sortDirection, om het stijgende / dalende effect te bereiken dat we verlangen.
... // vergelijk en sorteer de rijen alfabetisch $ rows.sort (functie (a, b) if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) sortDirection retourneren; retourneer 0; ); ...
Het volgende stukje code voegt eenvoudig elke rij uit de nu gesorteerde array toe aan de DOM-structuur. Dit wordt gedaan met de append-functie die leuk is omdat het
kopieert de rij niet en plaatst deze aan het einde, maar verwijdert deze daadwerkelijk van de huidige plaats in de DOM en plaatsen waar we het vertellen, in dit geval aan het einde van de rij.
tafel. Nadat het dit voor elk element in de array heeft gedaan, zal het elke rij naar zijn nieuwe plaats hebben verplaatst. Ook om een beetje opruimactie te doen verwijderen we de sortkey
kenmerk dat we eerder hebben ingesteld.
... // voeg de rijen in de juiste volgorde toe aan de onderkant van de tabel $ .each ($ rijen, functie (index, rij) $ ('tbody'). Append (rij); row.sortKey = null;) ; ... We gaan nu naar de opruimingsfase van onze functie sinds al het zware werk is gedaan. Vervolgens pakken we alle cellen in de tabel op, verwijderen deze
slepende gesorteerde attributen in de klassenverklaringen en filtert vervolgens alle kolommen behalve de kolommen uit die dezelfde index zijn als onze gesorteerde koptekst en past de 'gesorteerde' toe
klasse voor hen. Dit is leuk voor CSS-targeting als we bijvoorbeeld de kolom willen maken die we sorteren op een andere kleur, dan kunnen we deze CSS declareren:
... gesorteerd achtergrondkleur: groen; ...
Het laatste wat we doen is alle 'vreemde' CSS-verklaringen verwijderen en de Zebra-rijen opnieuw toepassen, net als in het filtergedeelte.
... $ ('. Visible td'). RemoveClass ('odd'); zebraRows ('. visible: even td', 'odd'); ... Dat is hoe we heel eenvoudig sorteren. Het is belangrijk om te weten dat dit alleen items alfabetisch of numeriek sorteert en niet werkt met datums of valuta
bijvoorbeeld. Dat vereist een meer gespecialiseerde afhandeling die onze doelen van eenvoudige tafelmanipulatie te boven gaat.
In dit artikel hebben we geleerd hoe we onze eigen tabelmanipulatiecode kunnen rollen met behulp van jQuery. Dit is
erg handig voor zowel de gebruiker als voor ons. De gebruiker krijgt de verwachte besturingselementen voor het sorteren en filteren van de gegevens en we hebben code die zowel klein als gemakkelijk is
begrijpen. Omdat we dit zelf hebben geschreven, kunnen we het nu op onze eigen manier uitbreiden. Onze methode is geweldig voor eenvoudige manipulatie, maar als u de gootsteen nodig heeft, raad ik u aan de
Data Tables-plug-in voor jQuery. Ik wil graag alle vragen in de comments of op Twitter beantwoorden
(@Noahendrix). Bedankt voor het lezen!
