Menggunakan teknik Gembala Grid untuk memesan data dengan CSS

Gembala baik untuk menjaga kawanan mereka, membawa perintah dan struktur kepada mereka. Walaupun dengan beratus -ratus domba, gembala masih akan memandu mereka kembali ke ladang pada penghujung hari.

Apabila memproses data, pengaturcara sering tidak tahu sama ada data ditapis dengan betul atau disusun. Ia amat menyakitkan apabila melelehkan array dan kemudian memaparkan data pada halaman, kerana ia tidak diketahui di mana setiap elemen diterima. Gembala Grid adalah teknologi yang menggunakan grid CSS dan bukannya JavaScript untuk membantu anda mencari dan menyusun projek ke tempat yang anda mahukan.

Inilah yang akan kita pelajari dalam artikel ini. Teknologi Gembala Grid boleh membawa pesanan dan struktur kepada data yang kami proses, sambil memberi kita pemahaman yang lebih jelas tentang di mana dan bagaimana data digunakan berbanding sebelum ini.

Mari kita dapatkan pemahaman yang lebih mendalam.

Susun menggunakan JavaScript

Kami akan bermula dengan melelehkan pelbagai haiwan ladang yang tidak teratur. Bayangkan lembu dan domba gembira merumput di ladang. Mereka boleh digabungkan secara programatik menggunakan kaedah Array.prototype.sort dan disenaraikan di halaman:

 Biarkan haiwan = [
  {name: 'edna', haiwan: 'lembu'},
  {name: 'liam', haiwan: 'domba'},
  {name: 'fink', haiwan: 'domba'},
  {name: 'Olga', haiwan: 'lembu'},
];
Biarkan sortedAnimals = haiwan.sort ((a, b) => {
  jika (a.animal> b.animal) kembali 1;
  kembali 0;
});
console.log (sortedAnimals);
/* kembali:
  [{name: 'elga', haiwan: 'lembu'},
    {name: 'Olga', haiwan: 'lembu'},
    {name: 'liam', haiwan: 'domba'},
    {name: 'fink', haiwan: 'domba'}]
*/

Ketahui mengenai Gembala Grid

Kaedah Gembala Grid membolehkan penyortiran data tanpa menggunakan JavaScript . Sebaliknya, kami bergantung pada grid CSS untuk melakukan pekerjaan untuk kami.

Strukturnya sama seperti pelbagai objek JavaScript di atas, tetapi diwakili oleh nod DOM.

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

Untuk menguruskan haiwan ini, kita harus mengelilingi mereka di kawasan yang sama, iaitu apa yang kita gunakan<main></main> Sebab untuk elemen itu. Dengan menetapkan display: grid , kami membuat konteks pemformatan grid di mana kita boleh menentukan lajur (atau baris) yang setiap haiwan harus menduduki.

 .sheep {grid-column: 1; }
.cow {grid-column: 2; }

Menggunakan grid-auto-flow: dense , setiap haiwan diatur secara automatik ke lokasi pertama yang tersedia di setiap kawasan yang ditetapkan. Ini juga boleh digunakan dengan beberapa pilihan penyortiran yang berbeza - hanya menentukan lajur lain dan data secara ajaib akan disusun ke dalamnya.

 Utama {
  paparan: grid;
  grid-auto-aliran: ketumpatan;
}

.sheep {grid-column: 1; }
.cow {grid-column: 2; }

Domba Lanjutan

Kami dapat meningkatkan lagi contoh pengurusan kami menggunakan kaunter CSS. Dengan cara ini, kita dapat mengira bilangan haiwan dalam setiap lajur dan -memohon pertanyaan kuantiti yang dicadangkan oleh Heydon Pickering dalam gaya ucapan Lea Verou 2011 yang bersesuaian berdasarkan kuantiti.

Pertanyaan kuantiti bergantung kepada beberapa jenis pemilih untuk mengira kelas-ini bagus untuk :nth-child(An B [of S]?) , Tetapi kini hanya tersedia di safari). Ini bermakna kita perlu menggunakan pemilih :nth-of-type() sebagai penyelesaian.

Kami memerlukan beberapa jenis elemen baru untuk menjadikannya berfungsi. Ini boleh dilakukan oleh komponen web atau dengan menamakan semula unsur HTML kepada nama tersuai. Ini terpakai walaupun unsur -unsur ini tidak dalam spesifikasi HTML, kerana pelayar menggunakan HTMLUnknownElement untuk mewakili tag yang tidak ditentukan, yang menyebabkan mereka berkelakuan sama dengan div . Dokumentasi kini kelihatan seperti ini:

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

Sekarang kita boleh mengakses jenis elemen tersuai kami. Apabila bilangan domba atau lembu adalah sama dengan atau kurang daripada 10, mari kita gunakan latar belakang merah.

 Domba: Nth-last-of-type (n 10),
Domba: nth-last-of-type (n 10) ~ domba,
lembu: nth-last-of-type (n 10),
lembu: nth-last-of-type (n 10) ~ lembu, {
  latar belakang warna: merah;
}

Di samping itu, kaunter hanya boleh dilaksanakan dengan menggunakan counter-reset: countsheep countcow; dan menggunakan pemilih before untuk mencari setiap elemen dan mengira ke atas.

 Domba :: Sebelum {
  Kaunter-Penangkapan: Countsheep;  
  Kandungan: Kaunter (CountSheep); 
}

Di sini kita akan menggunakan VUE untuk menambah dan memadam haiwan secara dinamik, menggunakan peralihan Vue dan dua pilihan penyortiran yang berbeza. Tonton bagaimana haiwan secara semula jadi menduduki lajur yang betul, walaupun anda menambah lebih banyak haiwan dan keluarkan beberapa:

Gembala Grid juga boleh digunakan untuk sebarang data yang tidak teratur:

• Memisahkan dan mengira pengundi dalam tinjauan (mungkin sebagai dua bahagian, dan gambar profil yang sepadan) dan masukkannya dalam masa nyata;
• Kakitangan kumpulan/rakan sekerja berdasarkan kedudukan, umur, ketinggian; dan
• Buat sebarang hierarki

Pengurusan dan kebolehcapaian

grid-auto-flow: dense tidak mengubah struktur DOM grid-ia hanya reorders visual termasuk unsur-unsur. Kesan sampingan dapat dilihat dalam contoh terakhir yang disusun mengikut abjad, kerana bilangan kaunter bercampur bersama. Menukar struktur DOM bukan sahaja akan menjejaskan orang yang menggunakan pembaca skrin, tetapi juga Tab Traversal.

Juga ambil perhatian bahawa struktur dokumen rata mungkin memudaratkan pembaca skrin. Sebaliknya, saya akan merawat grid demo ini sebagai grafik dan memberikan maklumat alternatif teks yang lebih lama.

berakhir!

Sangat pandai untuk melihat bagaimana alat susun atur CSS yang kuat seperti mesh boleh digunakan untuk kes penggunaan di luar keperluan susun atur tradisional dan memasuki kawasan yang mungkin memerlukan bahasa lain pada masa lalu. Dalam kes ini, kita dapat melihat bagaimana kelebihan susun atur grid CSS dan keupayaan pemprosesan data dinamik JavaScript bertindih, dan bagaimana ini memberi kita lebih banyak pilihan - dan kuasa - untuk membengkokkan data yang diberikan seperti yang kita kehendaki.

Atas ialah kandungan terperinci Menggunakan teknik Gembala Grid untuk memesan data dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!