Share
Wenn eine Webseite große Datentabellen anzeigen soll, sollte der Benutzer die Möglichkeit haben, die Daten strukturiert zu sortieren. In diesem Artikel gehe ich auf vier Techniken ein: Hover-Effekte, Zebra-Zeilen, Filtern und Sortieren.
Es gibt einige wichtige Hinweise, die wir ansprechen müssen, bevor Sie unseren Javascript-Code betrachten. Das HTML-Tabellen-Markup wird wie jede andere von Ihnen erstellte Tabelle sein, außer wir
erfordern zwei Tags, die viele Leute weglassen. Der Kopfbereich des Tisches muss eingewickelt sein . Der Körper der
Tabelle, in der alle Daten, die wir anzeigen möchten, aufbewahrt werden müssen
| Vorname | Nachname | Stadt | Zustand |
|---|---|---|---|
| Mannix | Bolton |
Zebra-Zeilen sind sehr gebräuchliche Datenorganisationstechniken, die einfach zu implementieren sind und eine starke Wirkung haben. Zebra rudert herein
Die Essenz wechselt den Stil der geraden und ungeraden Zeilen, um das horizontale Lesen der Daten zu erleichtern. Dies ist sehr wichtig bei
Mehrspaltendaten, damit Benutzer eine Spalte anzeigen und die zugehörigen Daten in derselben Zeile unter anderen Kopfzeilen lesen können. In dem
Beispiele, die ich in diesem Tutorial verwenden werde, habe ich eine Liste von Personen mit vier Eigenschaften: Vorname, Nachname, Ort und
Zustand. Beachten Sie, wie ich die Zeilenfarben abwechselnd sowie die Schriftfarbe verwenden kann, um den Effekt zu maximieren.
Nun zu den eigentlichen Zebra-Reihen. Der erste Startpunkt ist eine externe CSS-Datei, die mit dem Dokument verknüpft ist. Das erste Element zu
Ziel ist die Tabelle.
Tabelle Hintergrundfarbe: Weiß; Breite: 100%;
Das ist ziemlich trivial; Der Tabellenhintergrund soll weiß sein und sich auf 100% der Breite des übergeordneten Elements erstrecken. Als nächstes werden wir zielen
die Zellenelemente
tbody td Hintergrundfarbe: weiß; tbody td.odd Hintergrundfarbe: # 666; Farbe weiß;
Hier richten wir eine Klasse für die "ungeraden" Tabellenzeilen ein, die eine alternative Hintergrundfarbe und Schriftfarbe setzt. Wir haben auch einen Standardstil für alle td festgelegt
Elemente, die inhärent auf die "geraden" Zeilen angewendet werden. Dies ist alles CSS, das benötigt wird. Ich habe dir gesagt, es sei einfach! Lassen Sie uns nun den jQuery-Code betrachten. Das
Die Leistung von jQuery-Selektoren macht dies genauso einfach wie der CSS-Code. Wir müssen nur die Zellen anvisieren und die Funktion addClassName verwenden.
Accentsconagua
$ (document) .ready (function () zebraRows ('tbody tr: ungerade td', 'ungerade');); // verwendet, um alternierende Zeilenstile anzuwenden Funktion zebraRows (Selektor, Klassenname) $ (Selektor) .removeClass (Klassenname) .addClass (Klassenname); Dieser Code ist zwar kurz, muss jedoch einige Punkte berücksichtigen. Beachten Sie zunächst, wie wir die Implementierung in eine Funktion abstrahierten. das ist ideal, wenn wir das ändern
Daten in der Tabelle asynchron, ohne Seitenaktualisierung, dann möchten wir sicherstellen, dass die Zeilen immer noch einen anderen Stil haben. Aus demselben Grund rufen wir auch die
removeClass-Funktion. Wenn eine Zeile anfangs ungerade ist, aber gerade wird, können wir sicher sein, dass die Definition der ungeraden Klasse nicht erhalten bleibt. Das mag jetzt verwirrend erscheinen,
Aber wenn wir uns die Filterung später ansehen, wird dies deutlicher. Um wiederverwendbaren Code zu erhalten, müssen auch der Selektor und der Klassenname übergeben werden
die Funktion - so kann sie in Projekten verwendet werden, die unterschiedliche Klassennamen oder Selektoranforderungen haben (d. h. eine Site, die mehrere Tabellen hat, von denen nur eine vorhanden ist)
die Sie anvisieren möchten). Wenn Sie die ready () - Funktion überprüfen, wird eine jQuery-Funktion ausgeführt, wenn die Seite vorhanden ist
Nach dem Laden wird unser Aufruf von zebraRows () angezeigt. Hier passieren wir den Selektor und den Klassennamen. Der Selektor verwendet eine spezielle jQuery-Syntax
: ungerade, die alle ungeraden Zeilen findet. Dann suchen wir nach allen untergeordneten Elementen der Zeile, die Zellen sind. Dieser Code
ist für jeden, der jQuery bereits verwendet hat, ziemlich einfach, aber die Einfachheit sollte den Code für jeden lesbar machen.
Hinweis: Die Verwendung von jQuery zum Anwenden alternativer Zeilenfarben ist eine einfache Lösung. Sie kann jedoch nicht beeinträchtigt werden, wenn ein Benutzer JavaScript deaktiviert hat. Ich würde
Es wird empfohlen, die ungerade Klasse auf dem Server entweder im PHP-Code oder im statischen HTML-Code anzuwenden, obwohl dies den Rahmen dieses Artikels sprengen würde.
Ein wirklich schöner Effekt für Benutzer ist es, die Zeile hervorzuheben, in der sie sich gerade befinden. Dies ist eine großartige Möglichkeit, bestimmte Daten herauszufiltern, an denen sie interessiert sein könnten
in. Dies ist mit jQuery nicht einfach zu implementieren, aber zunächst ein wenig CSS.
… Td.hovered Hintergrundfarbe: hellblau; Farbe: # 666; …
Dies ist alles CSS, das wir benötigen. Wenn wir den Mauszeiger über eine Zeile bewegen, möchten wir, dass alle Zellen in dieser Zeile einen hellblauen Hintergrund und eine graue Schriftfarbe haben. Das
Mit jQuery ist das genauso einfach.
… $ ('Tbody tr'). Hover (Funktion () $ (this) .find ('td'). AddClass ('hovered');, function () $ (this) .find ('td') ) .removeClass ('hovered'););… Wir verwenden die Funktion hover () in der jQuery-Bibliothek. Dafür gibt es zwei Argumente
Funktionen, die ausgeführt werden sollen, wenn der Mauszeiger darüber bewegt wird bzw. wenn sich der Mauszeiger vom Element entfernt. Wenn sie über einer Reihe schweben, wollen wir alles finden
die Zellen in der Zeile und fügen Sie die schwebende Klasse hinzu. Wenn die Maus das Element verlässt, möchten wir diese Klasse entfernen. Das ist alles, was wir tun müssen
Holen Sie sich den Hover-Effekt, probieren Sie es aus!
Nun das fleischige Zeug - manipuliert tatsächlich die angezeigten Daten. Wenn eine Website verlangt, dass viele Datensätze angezeigt werden, in meinem Beispiel 1000 Zeilen, dann
ist mehr als angemessen, dem Benutzer eine Möglichkeit anzubieten, die Daten zu durchsuchen. Ein besonders effektiver Weg, der in den letzten Jahren im Internet entstanden ist
Die Web2.0 / AJAX-Bewegung filtert. Dies ist auch etwas, was Apple in Anwendungen wie iTunes stark drängt. Das Ziel für uns ist es, den Benutzer zu erlauben
Um eine Suchabfrage in eine Standardtexteingabe einzugeben und die Tabellenzeilen unten live zu filtern, werden nur die Zeilen angezeigt, die übereinstimmenden Text enthalten. Das ist wohl mehr
fortgeschritten sind dann die abwechselnden Zeilenstile, aber aufgrund der integrierten Funktionalität von jQuery ist in der Realität nur minimaler Code erforderlich.
Zuerst schreiben wir eine generische Funktion, die einen Selektor und eine Zeichenkette enthält. Diese Funktion durchsucht dann alle Elemente, die diesem Selektor entsprechen
die Saite. Wenn er die Zeichenfolge findet, zeigt er das Element an und wendet einen sichtbaren Klassennamen für das Element an, andernfalls wird das Element ausgeblendet. Warum bewerben wir uns?
die Klasse des Sichtbaren? Sobald die Elemente sortiert sind, möchten wir die zebraRows-Funktion erneut ausführen, aber wir müssen jQuery anweisen, die ausgeblendeten Zeilen zu ignorieren, und
Die beste Methode, die ich gefunden habe, ist das Anwenden einer Sichtbarkeitsklasse.
Die eigentliche Suche wird von der JavaScript-Funktion mit dem passenden Namen search () ausgeführt. Obwohl dies aufgrund der Funktionsweise des DOMs der Fall ist, wenn die jQuery-Funktion nicht verwendet wird,
Bei text () werden auch alle HTML-Tags in der Tabellenzeile angezeigt, z. B.
// Ergebnisse basierend auf Abfragefunktionsfilter filtern (Selektor, Abfrage) query = $ .trim (query); // Leerraum abschneiden query = query.replace (/ / gi, '|'); // OR für Regex-Abfrage hinzufügen $ (Selektor) .each (Funktion () ($ (this) .text (). search (neue RegExp (Abfrage, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible'); ); Die sechste Zeile ist der Ort, an dem die Magie stattfindet, und erfordert wahrscheinlich ein wenig Erklärung. Ab Zeile 5 sagen wir dem Code, dass er alle Elemente durchlaufen soll
die mit dem Selektor übereinstimmen, d. h. den Zeilen, und dann möchten wir den Code in Zeile 6 unter Verwendung von jedem ausführen. Zeile 6 ist etwas kompliziert, wenn Sie noch nicht mit der Programmierung vertraut sind,
aber es ist ziemlich leicht zu verstehen, wenn wir es aufteilen. Stellen Sie sich vor dem Fragezeichen alles als eine Frage vor, wenn die Antwort auf diese Frage wahr ist
Führen Sie den Code links vom Doppelpunkt aus, jedoch nach dem Fragezeichen. Wenn die Antwort falsch ist, führen Sie den Code nach dem Doppelpunkt aus. Dies ist im Wesentlichen ein Wenn
Aussage, aber in einer knapperen Form, die als ternärer Operator bekannt ist, und würde sich nicht vom Schreiben unterscheiden:
… If ($ (this) .text (). Search (new RegExp (Abfrage, "i")) < 0) $(this).hide().removeClass('visible') else $(this).show().addClass('visible'); … Der Grund, warum wir fragen, ob search () "weniger als null zurückgibt", testen wir diese Bedingung. Theoretisch ist es nicht falsch zu prüfen, ob es (==) -1 zurückgibt, aber in der Praxis ist es sicherer, nur zu versichern
weniger als Null.
In Ordnung, jetzt, da wir eine vollständige Filterfunktion haben, verwenden wir jQuery-Ereignisse, um sie an die Eingabe anzuschließen. Um den Live-Effekt zu erzielen, wünschen wir uns die Veranstaltung, die wir wollen
Achten Sie auf, wenn der Benutzer einen Schlüssel freigibt, während er sich auf das Textfeld konzentriert, das in JavaScript als Keyup bezeichnet wird. Es ist wichtig, dass wir das ID-Attribut von setzen
Eingabe, damit wir es mit jQuery anvisieren können. Zurück in unserer Ready-Funktion müssen wir nach dem Aufruf von zebraRows () Code hinzufügen..
Und der jQuery-Code:
… // setze jede Zeile auf sichtbares $ ('tbody tr'). AddClass ('visible'); $ ('# filter'). keyup (Funktion (Ereignis) // wenn esc gedrückt wird oder nichts eingegeben wird if (event.keyCode == 27 || $ (this) .val () == ") // Wenn esc gedrückt wird, möchten wir den Wert des Suchfelds $ (this) .val ("); löschen. // Wir möchten, dass jede Zeile sichtbar ist. Wenn nichts // eingegeben wird, stimmen alle Zeilen überein. $ ('tbody tr ') .removeClass (' visible '). show (). addClass (' visible '); // Wenn Text vorhanden ist, können wir filter other filter (' tbody tr ', $ (this) .val ()); // Zebra-Zeilen erneut anwenden $ ('. visible td'). removeClass ('odd'); zebraRows ('. visible: odd td', 'odd');… Dieser Code ist bei weitem der komplexeste, den wir bisher gesehen haben, also werden wir ihn Zeile für Zeile durchgehen.
HinweisHinweis: Es empfiehlt sich, CSS zu verwenden, um das Filterfeld auszublenden, und direkt oberhalb des Keyup-Aufrufs, um es anzuzeigen, sodass Benutzer mit deaktiviertem JavaScript dies nicht tun
verwirrt, wenn sie versuchen, die Daten zu sortieren, würde dies folgendermaßen aussehen:
… #Filter display: none; …
application.js
… $ ('# Filter'). Show ();… Wow, das war eine Menge Code. Fühlen Sie sich frei, eine Tee- / Kaffeepause einzulegen, bevor wir mit dem Sortieren beginnen.
Okay alles bereit? Gut, lass uns gehen!
Als letzte Aufgabe erlauben wir die Sortierung der Tabelle nach einer der Spaltenüberschriften. Dies ist eine sehr übliche Praxis, die Benutzer als "Klick zum Sortieren" antizipieren.
Wenn der Benutzer auf eine der Überschriften klickt, möchten wir die Tabelle aufsteigend sortieren. Wenn Sie erneut auf die Überschrift klicken, möchten wir die Spalte absteigend sortieren. Dieser Code ist ziemlich
fortgeschritten und nicht für schwache Nerven. Das ursprüngliche Konzept kam aus
JQuery lernen 1.3. ich
Ich habe es jedoch überarbeitet, um besser auf unsere Bedürfnisse der Einfachheit einzugehen. Wenn Sie jedoch mehr Feinkornkontrolle wünschen, werde ich Sie auf Kapitel 7 des Buches verweisen
Tabellen und jQuery werden ausführlich besprochen.
Bevor wir uns wirklich mit dem eigentlichen Code beschäftigen, ist es wichtig, dass wir das Konzept besprechen, wie wir dieses Problem angehen wollen. Wir werden JavaScript intern verwenden
sort () - Methode, die ein Array aufnehmen und sortieren soll
mit einer vom Code bereitgestellten benutzerdefinierten Funktion. In unserem Fall wollen wir einfach alphabetisch und numerisch sortieren, also werden wir nur die beiden Artikel vergleichen, die es liefert
und zurückgeben, in welcher Reihenfolge die beiden basierend auf diesem Entwurf eingehen sollen. Da wir sowohl aufsteigend als auch absteigend sortieren möchten, verwenden wir zum Anzeigen eine CSS-Klassendeklaration
Wie der aktuelle Status der Sortierung nach dieser Spalte ist, und umgekehrt, falls erforderlich. Sobald wir unser Array in der richtigen Reihenfolge haben, werden wir die Reihenfolge verwenden, um die Zeilen erneut einzufügen
in die Tabelle eins nach dem anderen. Das klingt nach viel, aber aufgrund der rasanten Geschwindigkeit von JavaScript ist es für den Benutzer sehr nahtlos. Alle
Dies ist an das Klickereignis der Spaltenüberschriften in der Tabelle gebunden.
Wie üblich, lassen Sie uns den CSS-Code aus dem Weg räumen, da er am einfachsten ist.
th.ortable color: # 666; Cursor: Zeiger; Textdekoration: Unterstrichen; th.sortable: hover Farbe: schwarz; th.sortiert-asc, th.sortiert-desc Farbe: schwarz;
Alle unsere sortierbaren Header verfügen über eine sortierbare Klasse. Durch den Hover-Modifikator in CSS wird ein Hyperlink für Benutzer emuliert. Wir nutzen auch aus
Die CSS-Klasse, die wir über sort-asc und sort-desc erwähnt haben, damit wir dem Benutzer die aktuelle Spalte anzeigen können, in der die Tabelle sortiert wird. Ich habe es aber nicht aufgenommen
Dies ist ein guter Ort, um Hintergrundbilder von nach oben und unten zeigenden Pfeilen als weiteren visuellen Hinweis für den Benutzer zu platzieren. Nun bewegen wir uns mit dem JavaScript-Code und dem
Komplexität beim Sortieren, dank jQuery einfacher gemacht. Der nachfolgende Code gehört zu der ready () - Funktion, die wir am Anfang gestartet haben. Dies richtig stellen
über dem Ende der Funktion ist am besten.
// Nimm alle Kopfzeilen $ ('thead th'). each (Funktion (Spalte) $ (this) .addClass ('sortable'). click (Funktion () var findSortKey = Funktion ($ cell) return $ cell.find ('. sort-key'). text (). toUpperCase () + "+ $ cell.text (). toUpperCase ();; var sortDirection = $ (this) .is ('. sortiert-asc ')? -1: 1; // Schritt zurück in den Baum und rufe die Zeilen mit den Daten // ab, um var $ rows = $ (this) .parent (). Parent (). Parent (). Find (' tbody.) Zu sortieren tr '). get (); // Durchläuft alle Zeilen und sucht $ .each ($ Zeilen, Funktion (Index, Zeile) row.sortKey = findSortKey ($ (row) .children (' td '). eq (Spalte));); // Die Zeilen alphabetisch vergleichen und sortieren. $ rows.sort (Funktion (a, b) if (a.sortKey.) < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection; 0 zurückgeben; ); // füge die Zeilen in der richtigen Reihenfolge am Ende der Tabelle hinzu. $ .each ($ lines, function (index, row) $ ('tbody'). append (row); row.sortKey = null;); // Identifiziere die Spaltensortierreihenfolge $ ('th'). removeClass ('sortierte-asc sortierte-desc'); var $ sortHead = $ ('th'). filter (': nth-child (' + (Spalte + 1) + ')'); sortDirection == 1? $ sortHead.addClass ('sortiertes-asc'): $ sortHead.addClass ('sortiertes-desc'); // Identifiziere die zu sortierende Spalte nach $ ('td'). removeClass ('Sortiert') .filter (': nth-child (' + (Spalte + 1) + ')') .addClass ('Sortiert') ; $ ('. visible td'). removeClass ('odd'); zebraRows ('. visible: even td', 'odd'); ); ); Woo, das ist viel Code. Lassen Sie uns das in große Teile zerlegen. Beim ersten Code werden alle Header erfasst und durchlaufen. Die erste Sache
Es wird jedoch eine Sortierklasse hinzugefügt, und der Klick bindet.
… // Nimm alle Kopfzeilen $ ('thead th'). Each (Funktion (Spalte) $ (this) .addClass ('sortable'). Click (function () … Beachten Sie, dass dies leicht geändert werden kann, um nur bestimmte Spalten sortieren zu können, indem Sie den Aufruf addClass () entfernen und den Selektor von 'thead th' in ändern
so etwas wie "thead th.sortable". Natürlich müssen Sie manuell angeben, welche Spalten sortiert werden können, indem Sie dem hinzufügen
entsprechende Header im HTML-Code.
Das nächste Codebit ist eine Funktionsdeklaration, die an eine Variable gebunden ist. Für diejenigen, die mit der Programmierung nicht vertraut sind, mag dies etwas komisch erscheinen, aber es ist gängige Praxis. Diese
ermöglicht es uns, die Funktion im Kontext der Kopfzeile, an der wir arbeiten, einfach zu referenzieren. Diese Erklärung ist wahrscheinlich etwas verwirrend, aber die
Präzise Argumentation überschreitet den Rahmen dieses Artikels. Die Funktion findSortKey bestimmt, nach welcher Spalte sortiert werden soll. Wir können dies tun
Da wir wissen, dass das Element, auf das Sie geklickt haben, für alle zu vergleichenden Spalten derselbe Index in der Tabelle ist. Wenn sie zum Beispiel auf den dritten Header klicken, werden wir
Sie möchten sich die dritte Spalte jeder Zeile ansehen, um die Reihenfolge der Zeilen zu vergleichen. Nachdem wir diese Funktion deklariert haben, bestimmen wir die Sortierreihenfolge aufsteigend
oder absteigend. Dies geschieht durch Suchen nach dem Klassennamen 'sortiertes asc' im Tabellenheader, wenn dort bekannt ist, dass er derzeit aufsteigend und sortiert ist
Wir müssen absteigend machen, andernfalls verwenden Sie den Standardwert für aufsteigend. Dies kümmert sich um den Fall, in dem es absteigt, und wir müssen es wieder aufsteigen lassen.
Dieses Codebit gibt 1 oder -1 zurück, wir werden später erklären, warum.
… Var findSortKey = function ($ cell) return $ cell.find ('. Sort-key'). Text (). ToUpperCase () + "+ $ cell.text (). ToUpperCase ();; var sortDirection = $ (this) .is ('. sortiert-asc')? -1: 1;… Jetzt möchten wir diese bestimmte Spalte aus jeder Zeile abrufen und in ein Array einfügen. Dies geschieht mit der jQuery-Methode von
get () nimmt die Zeilen und ordnet sie in ein Array ein, das die sort () - Funktion verstehen kann. Weil der Strom
Selector war der Tischkopf, wir müssen den DOM-Baum 3 Stellen nach oben gehen, um Table> tbody> tr> td zu finden. Scheint ein wenig komplex, aber in Wirklichkeit ist es einfach. Nach dem
dass wir die gerade gefundenen Zeilen durchlaufen und die Spalte finden, die wir beim Sortieren verwenden möchten. Dazu wird geprüft, ob der Index (die Anzahl der Stellen) vorhanden ist
beginnend bei 0 von der ersten Spalte in der Tabelle) ist gleich dem Index des angeklickten Headers. Dies wird dann an die Funktion findSortKey übergeben, damit wir es können
Legen Sie dann ein benutzerdefiniertes Attribut mit dem Namen sortKey fest, das die Spaltenüberschrift enthält, nach der sortiert werden soll, und den Text der aktuellen Spalte, in der beide gesucht werden
auf Großbuchstaben gesetzt, so dass die Sortierung nicht auf Groß- und Kleinschreibung achten Auf diese Weise können wir die Sortierung so rationalisieren, dass sie für große Datenmengen schneller reagiert.
… // zum Sortieren von var $ rows = $ (this) .parent (). Parent (). Parent (). Find ('tbody tr'). Get (); // alle Zeilen durchlaufen und $ .each finden ($ Zeilen, Funktion (Index, Zeile) row.sortKey = findSortKey ($ (row) .children ('td'). eq (column));); … Als nächstes kommt die eigentliche sort () - Funktion, über die ich gerade gesprochen habe. Dies wird für das Array von Zeilen aufgerufen, das wir mit get () erstellt haben. Der einzige Parameter, den wir übergeben, ist der
Funktion wollen wir die Sortierung bestimmen. Diese Funktion empfängt zwei zu vergleichende Attribute und gibt 1 zurück, wenn der erste Wert größer ist, -1, wenn der zweite Wert groß ist, und 0
wenn sie gleich sind An dieser Stelle kommt die sortDirection-Variable ins Spiel, weil sie so eingestellt ist, dass wir 1 oder -1 setzen und dann entweder die Zahl multiplizieren
1 oder -1 sollte die Funktion durch sortDirection zurückkehren, um den gewünschten absteigenden / absteigenden Effekt zu erzielen.
… // vergleiche und sortiere die Zeilen alphabetisch $ rows.sort (Funktion (a, b) if (a.sortKey.) < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection; 0 zurückgeben; );…
Das nächste Code-Bit fügt einfach jede Zeile aus dem nun sortierten Array zurück in die DOM-Struktur. Dies geschieht mit der Append-Funktion, was schön ist
kopiert die Zeile nicht und fügt sie am Ende ein. Sie entfernt sie tatsächlich von der aktuellen Stelle im DOM und platziert sie dort, wo wir sie sagen, in diesem Fall am Ende des
Tabelle. Nachdem dies für jedes Element im Array durchgeführt wurde, hat es jede Zeile an die neue Position verschoben. Um ein wenig zu bereinigen, entfernen wir den sortKey
Attribut, das wir zuvor gesetzt haben.
… // füge die Zeilen in der richtigen Reihenfolge am Ende der Tabelle hinzu. $ .Each ($ row, function (index, row) $ ('tbody'). Append (row); row.sortKey = null;) ;… Wir befinden uns jetzt in der Aufräumungsphase unserer Funktion, da alle schweren Hebevorgänge erledigt sind. Als nächstes packen wir alle Zellen im Tabellenkörper und entfernen alle
verbliebene sortierte Attribute in den Klassendeklarationen, filtern dann alle außer den Spalten heraus, die denselben Index wie unsere sortierte Kopfzeile haben, und wenden die 'Sorted' an.
Klasse für sie. Dies ist für CSS-Targeting hilfreich, wenn wir zum Beispiel die Spalte, in der wir sortieren, nach einer anderen Farbe sortieren möchten, die wir dieses CSS deklarieren könnten:
… Sortiert Hintergrundfarbe: grün; …
Das letzte, was wir tun, ist, alle "ungeraden" CSS-Deklarationen zu entfernen und die Zebra-Zeilen erneut anzuwenden, genau wie im Filterteil.
… $ ('. Visible td'). RemoveClass ('odd'); zebraRows ('. sichtbar: Gerade td', 'ungerade');… So sortieren wir ganz einfach. Es ist wichtig zu beachten, dass Elemente nur alphabetisch oder numerisch sortiert werden und nicht mit Datum oder Währung arbeiten
zum Beispiel. Dies erfordert eine speziellere Handhabung, die über unsere Ziele der einfachen Tabellenmanipulation hinausgeht.
In diesem Artikel haben wir gelernt, wie Sie mit jQuery unseren eigenen Tabellenbearbeitungscode rollen. Das ist
sehr bequem für den benutzer und für uns. Der Benutzer erhält die erwarteten Steuerelemente zum Sortieren und Filtern der Daten, und wir haben Code, der sowohl klein als auch einfach ist
verstehen. Da wir dies selbst geschrieben haben, können wir es jetzt auf unsere Weise erweitern. Unsere Methode eignet sich hervorragend für die einfache Handhabung, aber wenn Sie die Küchenspüle benötigen, empfehle ich einen Blick auf die
Datentabellen-Plugin für jQuery. Ich würde gerne alle Fragen in den Kommentaren oder auf Twitter beantworten
(@noahendrix). Danke fürs Lesen!
