Verwenden der Grid Shepherd -Technik, um Daten mit CSS zu bestellen

Hirten sind gut darin, sich um ihre Herden zu kümmern und sie zu bestellen und zu strukturieren. Selbst mit Hunderten von Schafen würden die Hirten sie am Ende des Tages wieder zur Farm zurückfahren.

Bei der Verarbeitung von Daten wissen Programmierer häufig nicht, ob die Daten korrekt filtriert oder sortiert sind. Es ist besonders schmerzhaft, wenn es über das Array iteriert und dann Daten auf der Seite angezeigt wird, da nicht bekannt ist, wo jedes Element empfangen wird. Grid Shepherd ist eine Technologie, die CSS -Netz anstelle von JavaScript verwendet, um Projekte dort zu finden und zu sortieren, wo Sie möchten.

Das werden wir in diesem Artikel untersuchen. Die Grid Shepherd -Technologie kann Ordnung und Struktur in die von uns verarbeiteten Daten bringen und gleichzeitig ein klareres Verständnis dafür geben, wo und wie Daten verwendet werden als je zuvor.

Lassen Sie uns ein tieferes Verständnis bekommen.

Sortieren Sie mit JavaScript

Wir werden zunächst über eine ungeordnete Auswahl an Nutztieren anfangen. Stellen Sie sich Kühe und Schafe vor, die glücklich auf den Feldern weideten. Sie können programmgesteuert mit der Methode Array.prototype.sort kombiniert und auf der Seite aufgeführt:

 Tiere lassen = [
  {Name: 'edna', Tier: 'Cow'},
  {Name: 'Liam', Tier: 'Schaf'},
  {Name: 'Fink', Tier: 'Schaf'},
  {Name: 'Olga', Tier: 'Cow'},
];
lass sortEdArimals = tiere.sort ((a, b) => {
  if (a.animal> B.Animal) Rückkehr 1;
  Rückkehr 0;
});
console.log (sortedanimals);
/* zurückkehren:
  [{Name: 'Elga', Tier: 'Cow'},
    {Name: 'Olga', Tier: 'Cow'},
    {Name: 'Liam', Tier: 'Schaf'},
    {Name: 'Fink', Tier: 'Schaf'}]
*/

Erfahren Sie mehr über Grid Shepherd

Die Grid Shepherd -Methode ermöglicht die Sortierung von Daten ohne JavaScript . Stattdessen verlassen wir uns auf CSS -Netz, um den Job für uns zu erledigen.

Die Struktur ist genau das gleiche wie das javaScript -Objektarray oben, wird jedoch durch einen DOM -Knoten dargestellt.

<main><div> Edna</div>
  <div>Liam</div>
  <div>Jenn</div>
  <div>Fink</div>
</main>

Um diese Tiere zu verwalten, müssen wir sie in einem Gemeinschaftsbereich umgeben, was wir verwenden<main></main> Der Grund für das Element. Durch das Einstellen display: grid erstellen wir einen Kontext der Netzformatierung, in dem wir die Spalten (oder Zeilen) definieren können, die jedes Tier besetzen sollte.

 .Sheep {Grid-Säule: 1; }
.Cow {Grid-Säule: 2; }

Mit der Dichte von grid-auto-flow: dense wird jedes Tier automatisch an den ersten verfügbaren Standort in jedem definierten Bereich angeordnet. Dies kann auch mit einer beliebigen Anzahl verschiedener Sortieroptionen verwendet werden - definieren Sie einfach eine andere Spalte und die Daten werden auf magische Weise in sie sortiert.

 hauptsächlich {
  Anzeige: Grid;
  Grid-Auto-Flow: Dichte;
}

.Sheep {Grid-Säule: 1; }
.Cow {Grid-Säule: 2; }

Fortgeschrittene Schafe

Wir können unsere Managementbeispiele mit CSS -Zähler weiter verbessern. Auf diese Weise können wir die Anzahl der Tiere in jeder Spalte berechnen und - die von Heydon Pickering in Lea Verous Rede 2011 vorgeschlagen - im Stil der Menge, die auf der Menge vorgeschlagen wurden.

Quantitätsabfragen hängen von einer Art Selektor für das Zählen von Klassen ab-dies ist großartig für :nth-child(An B [of S]?) Pseudo-Klasse-Notation, aber derzeit nur in Safari erhältlich). Dies bedeutet, dass wir den Selektor des :nth-of-type() als Problemumgehung verwenden müssen.

Wir brauchen einige neue Elementtypen, damit es funktioniert. Dies kann durch Webkomponenten oder durch Umbenennen eines HTML -Elements in einen benutzerdefinierten Namen erfolgen. Dies gilt auch dann, wenn diese Elemente nicht in der HTML -Spezifikation enthalten sind, da Browser HTMLUnknownElement verwenden, um undefinierte Tags darzustellen, was dazu führt, dass sie sich sehr ähnlich wie div verhalten. Die Dokumentation sieht jetzt so aus:

<fence><sheep> Lisa</sheep><sheep> Bonnie</sheep><cow> Olaf</cow><sheep> Jenn</sheep></fence>

Jetzt können wir auf unseren benutzerdefinierten Elementtyp zugreifen. Wenn die Anzahl der Schafe oder Kühe gleich oder weniger als 10 ist, wenden wir einen roten Hintergrund an.

 Schafe: N-ten Last des Typs (N 10),
Schafe: N-te Last des Typs (n 10) ~ Schaf, Schaf,
Kuh: N-ten Last des Typs (N 10),
Kuh: N-ten Last des Typs (n 10) ~ Kuh, {{
  Hintergrundfarbe: Rot;
}

Darüber hinaus kann der Zähler einfach mit der Verwendung von counter-reset: countsheep countcow; und verwenden Sie den before Selektor, um jedes Element zu lokalisieren und nach oben zu zählen.

 Schaf :: vor {
  Gegeninkrement: Countsheep;  
  Inhalt: Zähler (countsheep); 
}

Hier werden wir Vue verwenden, um Tiere dynamisch hinzuzufügen und zu löschen, indem wir VUE -Übergänge und zwei verschiedene Sortieroptionen verwenden. Beobachten Sie, wie Tiere natürlich die richtigen Säulen einnehmen, auch wenn Sie mehr Tiere hinzufügen und einige entfernen:

Grid Shepherd kann auch für nicht ordnungsgemäße Daten verwendet werden:

• Trennen und berechnen Sie die Wähler in der Umfrage (möglicherweise als zwei Teile und ihre entsprechenden Profilbilder) und setzen Sie sie in Echtzeit ein.
• Gruppenpersonal/Kollegen basierend auf Position, Alter, Höhe; Und
• Erstellen Sie jede Hierarchie

Verwaltung und Zugänglichkeit

grid-auto-flow: dense ändert die Dom-Struktur des Netzes nicht-sie wird nur visuell enthaltene Elemente ermittelt. Ein Nebeneffekt ist im letzten Beispiel alphabetisch zu erkennen, da die Zählerzahlen zusammengemischt werden. Das Ändern der DOM -Struktur wirkt sich nicht nur aus Personen aus, die Bildschirmleser verwenden, sondern auch die Registerkartentraversal.

Beachten Sie auch, dass eine flache Dokumentstruktur für Bildschirmleser schädlich sein kann. Stattdessen behandelte ich diese Demo -Gitter als Grafik und liefern längere alternative Textinformationen.

Ende!

Es ist sehr clever zu sehen, wie leistungsstarke CSS -Layout -Tools wie Mesh für Anwendungsfälle außerhalb der herkömmlichen Layoutanforderungen verwendet werden können, und Bereiche eingeben, in denen möglicherweise andere Sprachen in der Vergangenheit erforderlich sind. In diesem Fall können wir sehen, wie die Layoutvorteile des CSS -Gitters und die dynamischen Datenverarbeitungsfunktionen der JavaScript -Überschneidung und wie dies uns mehr Möglichkeiten - und die Leistung - gibt, um die gerenderten Daten nach Belieben zu biegen.

Das obige ist der detaillierte Inhalt vonVerwenden der Grid Shepherd -Technik, um Daten mit CSS zu bestellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!