Komponen untuk opsi

Alih-alih menggunakan ID di URL, Anda dapat memilih untuk membuat pemfilteran menggunakan komponen Select khusus dengan kemampuan untuk memilih negara dari daftar. Sebelumnya, kami telah menggunakan komponen Relselect , dan logika kerjanya sangat mirip, tetapi berkat Select , kami tidak hanya dapat menawarkan pilihan dari semua negara yang tersedia tetapi juga menambahkan opsi kami sendiri.

Select komponen

Mari kita lihat pengaturan Select , pilihan yang akan menentukan kota mana dari negara mana yang harus ada di tabel, dan kemampuan untuk menampilkan semua kota yang tersedia, secara umum, telah ditambahkan.

Saat membuat komponen Select , itu harus diisi dengan opsi dari mana pemilihan akan dilakukan. Untuk melakukan ini, seperti di Relselect , Anda perlu mendapatkan daftar umum negara. Tapi kemudian kami tidak mengirimkan daftar ini ke Select secara langsung tetapi mengubahnya menjadi opsi yang tersedia, yang masing-masing direpresentasikan sebagai model Select Option . Oleh karena itu, kami mendeklarasikan array Select Options sebagai variabel dan mengisinya dengan data yang diperlukan dalam satu lingkaran.

Dalam contoh ini, bidang Select Options yang penting bagi kami adalah Label (teks dari opsi yang diusulkan) dan Value (pengidentifikasi numeriknya). Tetapkan nilai-nilai ini ke nama negara dan ID-nya.

Ketika loop selesai, kita harus membuat dan menambahkan satu opsi lagi yang akan menampilkan semua kota yang tersedia tanpa memfilter menurut negara. Mari kita atur Label = World dan Value = 0 .

Saat Anda memilih opsi apa pun, pemicu Select onChange akan diaktifkan. Mari kita gunakan untuk mengetahui opsi yang dipilih dan menulisnya ke variabel global baru Country selected . Dalam hal ini, perlu untuk melakukan pemeriksaan tambahan, dan jika opsi terakhir (semua kota yang tersedia) dipilih, maka nilai variabel ini harus disetel ke kosong ( null ).

Tindakan terakhir dari proses bisnis ini adalah mulai mengklik tombol Refresh , yang menyegarkan data dalam tabel. Proses bisnisnya juga perlu sedikit diubah untuk memperhitungkan munculnya variabel baru.

Sekarang kita dapat memilih kota mana dari negara mana yang harus ditampilkan dalam tabel.

Komponen Dropdown

Dan akhirnya, mari kita lihat komponen lain yang memungkinkan Anda memilih opsi yang berbeda - Dropdown . Perbedaan utamanya adalah bahwa memilih opsi tertentu harus segera memicu beberapa tindakan daripada hanya mengingat opsi yang dipilih. Itu bisa disebut tombol dengan fungsionalitas yang diperluas.

Sebagai contoh, mari kita gunakan Dropdown sebagai pengganti tombol hapus negara di tabel. Sekarang itu tidak akan segera menghapus entri dalam database tetapi akan memanggil opsi tambahan di mana Anda dapat mengkonfirmasi penghapusan atau membatalkannya.

Mari kita mulai dengan konfigurasi umum komponen. Mari kita pilih tampilannya dan opsi yang tersedia.

Selanjutnya, kita akan membuat proses bisnis itu sendiri. Dan tindakan pertama di dalamnya adalah menentukan catatan yang diklik Dropdown . Untuk tombol biasa, nilai ini diteruskan sebagai Record ID , tetapi dalam kasus ini, Dropdown itu sendiri tidak akan ditekan, tetapi komponen turunannya dengan opsi yang diinginkan. Oleh karena itu, mendapatkan ID entri sedikit lebih rumit.

Untuk elemen tabel berulang, Component ID terdiri dari dua bagian, dipisahkan oleh tanda “-”. Bagian pertama adalah ID komponen standar. Tetapi bagian kedua hanyalah ID catatan, penambahan yang membuat pengidentifikasi komponen berulang menjadi unik.

Mengetahui hal ini, kita hanya perlu mendapatkan ID ini. Oleh karena itu, kita akan membagi string menjadi beberapa bagian ( Split string ) dan mengetahui nilai bagian kedua ( index = 1 )

Sebagai langkah selanjutnya kita perlu mencari tahu opsi apa yang dipilih.

Jika ini memang opsi untuk mengonfirmasi penghapusan, maka jalankan perintah yang sesuai. Jika tidak, Anda tidak dapat melakukan apa pun karena beberapa tindakan tidak diperlukan.

Sekarang menghapus catatan dari database dilindungi dari klik yang tidak disengaja.