7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Mensortir Nilai-Nilai Dengan Javascript

Scroll to top
Read Time: 12 mins

Indonesian (Bahasa Indonesia) translation by Amar Shaleh (you can also view the original English article)

List dan table sering dikaitkan cara terbaik untuk menampilkan data di web; tetapi Anda tidak perlu khawatir tentang mensortir informasi itu secara manual. Dalam tutorial hari ini, Anda akan membuat sebuah plugin jQuery yang akan menempatkan semua bebek Anda dalam baris dengan mudah dengan JavaScript!


Kata pengantar

Jadi, bagaimana tepatnya penyortiran itu bekerja di JavaScript? Itu tidak terlalu rumit: objek array memiliki sort metode. Jika Anda tidak tidak memasukan parameter apapun, itu akan mengkonversi objek dalam array ke string, mengurutkan mereka pseudo-alphabetically, dan mengembalikan mereka. Biasanya, ini mengerikan; Pertimbangkan penyortiran angka 0 - 10 berdasarkan abjad. Anda akan mendapatkan ini: [0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9]. Untungnya, kami dapat melewati fungsi sort metode. Bahwa fungsi ith harus mengambil dua parameter (dua item dapat dibandingkan): lalu, itu akan mengembalikan 0 jika mereka sama, angka negatif jika parameter pertama diutamakan, atau sejumlah positif parameter kedua harus datang pertama. Jadi nomor adalah benar-benar hal yang paling sederhana untuk disortir secara "manual":

Jelas, ini akan mengembalikan 0 jika angka-angkanya sama, jika nomor negatif a harus pertama, dan sejumlah positif nomor b harus menjadi yang pertama.

Kita akan melihat menyortir beberapa jenis data, beberapa dalam berbagai format; Tapi ini semua akan jauh lebih berguna jika kita bungkus dalam sebuah plugin jQuery, jadi mari kita mulai dengan menyiapkan shell itu!

Plugin Shell

You still can't crate a jQuery PluginYou still can't crate a jQuery PluginYou still can't crate a jQuery Plugin

Jika Anda tidak akrab dengan menulis plugin jQuery, Siahkan cek Jeffrey Way Screencast "Anda masih tidak dapat membuat jQuery Plugin?" Hal itu akan membuat Anda sampai dengan kecepatan dalam waktu singkat jika Anda merasa nyaman dengan jQuery! (pengakuan yang benar: saya belum benar-benar pernah menulis sebuah plugin sampai aku membuat yang satu ini).

Kami akan mengatur plugin kami, yang disebut datasort, dengan cara ini: kami akan memasukan sebuah array item untuk disortir; kita dapat menetapkan empat parameter.

  • datatype (jenis data untuk disortir)
  • sortElement (anak elemen yang Anda inginkan untuk disorting, jika diinginkan)
  • sortAttr (atribut yang Anda inginkan untuk disorting, jika diinginkan)
  • reverse(arah yang harus disortir)

Jadi panggilan-lengkap untuk plugin kami mungkin terlihat seperti ini:

Berikut adalah plugin shell:

Jadi di sini adalah bagaimana ia akan bekerja: kami akan mengatur semua variabel pada awal. Kemudian, jika datatype parameter string, kita akan menemukan semacam fungsi yang sesuai di datatypes objek dan mengurutkannya; Jika datatype parameter adalah fungsi, kami akan menyortir dengan itu. Akhirnya, jika pengaturan reverse diatur ke benar, kita akan membalikkan urutan item yang diurutkan (karena jQuery objek tidak asli JavaScript array, fungsi reverse tidak bekerja pada mereka; sehingga kita dapat menggunakan $.makeArray() untuk mengubahnya menjadi satu; kemudian, setelah itu dibalikan, Re-jquery-fy itu!).

Meletakkan sedikit lebih dasar

Pada tingkat paling rendah, Anda dapat mengurutkan hampir semua jenis data dalam satu atau dua cara: kami akan memanggil mereka menurut abjad dan numerik. Mari kita membuat kedua fungsi sebagai properti objek dasar Anda.

Cukup sederhana, ya? Cukup menormalkan dua nilai, membandingkan dan kembalikan. Bagian rumit adalah parsing data yang kita inginkan untuk mengirim ke fungsi-fungsi ini; Itulah apa yang akan kita lakukan sekarang. Namun, ada satu hal lagi.

Ketika menyortir item-item dalam array, kita mungkin tidak ingin untuk mengurutkan hanya dengan teks dari elemen itu sendiri. Parameter sortElement dan sortAttr plugin kami adalah untuk tujuan ini. Sebagai contoh, kita mungkin akan ingin untuk mengurutkan baris tabel berdasarkan kolom tertentu dari sel-sel tabel. Dalam hal ini, kita akan menggunakan $('table tr').datasort ({sortElement: 'td.price'}). Atau mungkin kita ingin mengurutkan daftar gambar dengan atribut alt mereka: $('ul li').datasort ({sortElement: 'img', sortAttr: 'alt'}). Karena semua ini, kita perlu menambahkan satu lagi fungsi ke objek dasar:

Mungkin ini terlihat rumit, tetapi tidak. Kita membuat objek jQuery dengan setiap item; Jika sortElement ditetapkan, kita menggunakan metode children() untuk mendapatkan elemen yang tepat. Kemudian, jika sortAttr ditetapkan, kita mendapatkan nilai; Jika tidak, kita mendapatkan elemen teks. Kami telah menetapkan semua ini ke dalam fungsi, dan mengembalikan sebuah objek dengan dua properti; properti ini adalah nilai-nilai yang kita harus memilah dan kirim ke basis pengurutan fungsi yang sesuai.

Ini mungkin tampak seperti banyak pekerjaan persiapan, tapi apa yang kita benar-benar lakukan adalah meng-abstrak kode sebanyak mungkin. Dengan cara ini, mereka akan jauh lebih sedikit kode yang diulangi, karena aksi yang penting telah dibundel sebagai fungsi.

Mensortir Kata-Kata dan Nomor-Nomor

Kami akhirnya berada di sini: bagian yang menyenangkan! Kita akan mulai dengan membangun dua fungsi sederhana untuk objek datatypes kita. Ini akan memasukan nilai sederhana untuk base.extract() dan kemudian memasukan kembali nilai-nilai tersebut ke kelas penyortiran yang sesuai.

Sorter abjad kami harus jelas. Penyortiran nomor sedikit melakukan lebih banyak: sebelum memasukan nilai yang diekstrak, strip keluar tanda dolar di depan. Aku menetapkan regular expression ini secaa simpel, tetapi Anda bisa mengurai banyak format nomor yang berbeda di sini jika Anda ingin menjadi lebih kompleks. Mari kita coba kembangkan plugin dan mencoba; membuat halaman html dasar:

Saya telah menyertakan tabel dan dua daftar (dan saya telah nebata mereka sedikit). Cata panggilan plugin kita: kita menggunakan default datatype untuk tabel, tetapi menyortir oleh sel-sel tabel dengan kelas terakhir; Coba ganti ini ke 'td.first.' Kemudian, kita urutkan daftar secara numerik dan membalikkan salah satu dari mereka. Berikut adalah bukti dari pekerjaan kita:

Sorting Alphabetically and NumericallySorting Alphabetically and NumericallySorting Alphabetically and Numerically

Cukup bagus, tetapi itu nilai-nilainya relatif sederhana; Bagaimana jika kita ingin dapat mengurutkan berbagai format untuk satu jenis?

Penyortiran tanggal

Ada sejumlah cara yang berbeda untuk menulis tanggal, yang membuatnya sangat sulit untuk memilah mereka untuk penyortiran. Namun, kita dapat mencakup sebagian besar dari mereka dengan ini:

Jadi apa yang kita lakukan di sini? Pertama, ini adalah logikanya: jika semua tanggal diformat YYYYMMDD, mereka akan disortir dengan benar dengan menyortir numerik. Parser kita dapat diurutkan dengan format tanggal berikut:

  • YYYY-MM-DD
  • YYYYMMDD
  • DD/MM/YYYY
  • bulan DD, YYYY

Pertama kita mencopot tanda garis, yang akan meninggalkan YYYY-MM-DD siap untuk parsing. Kemudian, kami mengganti setiap nama bulan atau singkatan dengan nilai nomor. Akhirnya, kita harus mengatur ulang angka-angka untuk DD/MM/YYY dan bulan DD, YYYY. Itulah apa yang terakhir dua ekspresi yang di lakukan. Untuk mencoba ini, paste daftar ini ke HTML kita:

Dan memanggilnya dengan ini:

Sorting DatesSorting DatesSorting Dates

Ini adalah parser tanggal yang sempurna? Tidak dengan cara apapun; kita tidak bisa memilah DD/MM/YY, karena tidak ada cara untuk mengetahui abad apa di dalam. Juga, kita tidak bisa mengatakan perbedaan antara DD/MM/YY dan MM/DD/YY, jadi kita hanya perlu memilih salah satu.

Mensortir Waktu

Mensortir nilai-nilai waktu harus menjadi salah satu nilai-nilai yang paling sulit untuk disortir: kita perlu mampu menerima 12-jam waktu, waktu 24-Jam, dan nilai-nilai dengan atau tanpa tag AM/PM dan detik. Saya pikir sangat mudah untuk menyortir waktu menurut abjad, meskipun dengan semua nomor. Mengapa? Pertimbangkan timestamp ini: 00:15:37 dan 12:15. Yang pertama harus datang pertama, tetapi jika kita mengurutkan mereka oleh nomor mereka akan diurai menjadi fliat, serta akhir berakhir seperti 1537 dan 1215. Sekarang, nilai kedua akan datang pertama. Juga, ketika menyortir menurut abjad, kita tidak harus mengambil tanda titik dua (parseFloat() akan menghambat pada mereka). Jadi di sini adalah bagaimana hal itu dilakukan.

Mari kita pergi melalui ini baris demi baris.

Kita mulai dengan variabel kami: nilai-nilai kita diekstraksi dan regular expression untuk memeriksa PM label.

Selanjutnya, kita akan mulai for loop, pergi melalui masing-masing dari nilai-nilai yang kita pilah; pertama, kita bagi menjadi array pada tanda titik dua. Kami menciptakan cara mudah untuk mendapatkan item terakhir dari array: variabel 'last' kita. Kemudian, kami uji PM regex kita pada item terakhir dalam array kita; Jika itu mengembalikan true, nilai ini memiliki PM tag. Oleh karena itu, kami akan menambahkan 12 untuk item pertama dalam array kita, yang akan menjadi nilai jam; kami melakukan ini karena kami membutuhkan semua nilai-nilai yang akan diformat dalam waktu 24 jam. (Perhatikan bahwa untuk melakukan ini, kita harus mengubahnya ke nomor, tambahkan 12, dan kemudian mengubahnya kembali ke dalam sebuah string). Akhirnya, kami menggunakan PM regex lagi untuk menghapus label dari item terakhir dalam array.

Dalam potongan terakhir ini, kami memeriksa nilai jam untuk dua kondisi: itu kurang dari 10? dan Apakah string memiliki hanya satu karakter? Hal ini penting karena nilai seperti 08 akan mengurai menjadi 8 dan menjadi kurang dari 10; tapi kami berusaha untuk melihat jika kita perlu menambahkan nol du depan. Jika string memiliki hanya satu karakter, maka kita menambahkan nol, sehingga 3 menjadi 03. Ini akan menjaga item dalam urutan!

Sebelum menggabungkan dengan array, kami menghapus label AM. Jadi sekarang ini...

... dapat diurutkan dengan ini...

Dan kita sudah selesai! Lihatlah buah dari pekerjaan kita:

Sorting Time

Nilai-nilai Acak Lebih

Kami mengatur jQuery plugin kita sehingga pengguna dapat memasukan fungsi penyortiran sebagai datatype parameter. Hal ini memungkinkan kita untuk dengan mudah memperpanjang plugin, walaupun kita tidak memiliki akses ke dasar 'kelas' dari panggilan plugin. Kita dapat dengan mudah menulis fungsi untuk menyortir psudeo-rating:

Ini menggunakan regukar expression sederhana yang memungkinkan untuk mengurutkan daftar seperti ini:

Itu adalah sebuah bungkus!

Sekarang kau tahu: penyortiran dalam JavaScript tidak sesulit yang Anda pikirkan. Anda dapat membayangkan ini menjadi berguna untuk menyortir tabel, dengan sesuatu seperti ini:

(Cobalah mengganti kode jQuery untuk tabel dalam contoh pertama dengan ini!)

Tentu saja, kita bisa banyak meningkatkan plugin; sebagai contoh, kita bisa memeriksa atttribute rel untuk datatype jika salah satu tidak diberikan sebagai parameter, dan default untuk alpha jika tidak ada rel. Tapi itu selain penyortiran.

Singkatnya, untuk menyortir dengan JavaScipt, kita mengikuti langkah-langkah berikut:

  1. Menentukan format yang berbeda yang Anda inginkan untuk menyusun.
  2. Memutuskan format yang Anda inginkan untuk disusun.
  3. Mensortir array item dengan metode sort(), memasukan dalam fungsi yang akan mengkonversi dua item ke format yang diinginkan sebelum membandingkan mereka

Memiliki datatype untuk ditambahkan ke plugin kita? Memiliki cara yang lebih baik dari salah satu soring? Mari kita dengarkan di komentar!


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.