Step-by-Step: DevExtreme Cara Menetapkan Opsi yang Dipilih Grup Radio

DevExtreme oleh DevExpress adalah perpustakaan yang penuh dengan komponen UI yang siap digunakan untuk aplikasi web. Ini bekerja dengan sudut, bereaksi, vue, dan bahkan jQuery. Salah satu widget populernya adalah RadioGroup , yang memungkinkan pengguna memilih satu opsi dari daftar.

Dalam bentuk, halaman pengaturan, atau dasbor, RadioGroup membantu memandu pengguna hanya memilih satu jawaban. Misalnya, Anda mungkin membiarkan mereka memilih antara "rencana bulanan" dan "rencana tahunan." Untuk membuat aplikasi terasa lancar, pengembang sering ingin menetapkan pilihan default atau memilih nilai. Di situlah nilai properti dalam RadioGroup masuk.

Apa itu Radiogroup Devextreme?

Widget RadioGroup adalah kontrol input yang sederhana namun kuat. Dibutuhkan sumber data (seperti daftar array atau json) dan menunjukkan tombol radio untuk setiap item. Pengguna kemudian dapat mengklik untuk memilih satu. Tidak seperti grup kotak centang , di mana banyak item dapat dipetik, RadioGroup hanya memungkinkan satu pilihan dalam satu waktu.

Pengembang biasanya peduli tentang dua hal: apa item yang dipilih dan bagaimana mengaturnya dengan benar. Widget melacak pilihan saat ini melalui properti nilai . Saat Anda mengubah properti ini, pembaruan item yang dipilih. Ini bekerja di semua kerangka kerja - Angular, React, Vue, dan JQuery - karena widget mengikuti API yang sama.

Tetapkan nilai yang dipilih secara default dalam RadioGroup

Menetapkan nilai yang dipilih default dilakukan melalui opsi nilai saat menginisialisasi widget. Anda memberikan nilai yang cocok dengan salah satu item di DataSource , dan item itu muncul sebagai yang telah dipilih sebelumnya.

Berikut contoh sederhana menggunakan JavaScript polos dengan JSON DataSource:

$ ("#RadioGoupContainer"). DXRadioGoup ({
Item: ["Dasar", "Standar", "Premium"],
Nilai: "Standar" // Default Dipilih
});

Dalam contoh ini, opsi "standar" sudah akan dipilih saat halaman dimuat. Ini berguna ketika Anda ingin memandu pengguna ke pilihan yang paling umum atau direkomendasikan.

Anda juga dapat mengikat objek, bukan string biasa. Misalnya:

Di sini, properti ValueExpr dan DisplayExpr memastikan widget mengetahui bidang mana yang akan digunakan untuk nilai dan bidang mana yang akan ditampilkan kepada pengguna.

Mengubah item yang dipilih secara terprogram

Terkadang Anda tidak ingin radiografi hanya menunjukkan nilai default. Anda mungkin perlu mengubah opsi yang dipilih nanti, mungkin setelah pengguna menyelesaikan langkah lain dalam formulir Anda atau ketika data kembali dari API.

Di DevExtreme, ini dilakukan dengan memperbarui properti nilai dari RadioGroup. Jika Anda membuat widget dengan jQuery, Anda dapat menghubungi opsi () untuk mengubahnya saat runtime.

Contoh:

Ketika opsi ("nilai", ...) panggilan berjalan, RadioGroup langsung menyoroti "premium." Ini berfungsi dalam sudut, bereaksi, dan vue juga - dalam kerangka kerja itu, Anda biasanya mengikat nilainya untuk menyatakan atau variabel. Ketika status itu berubah, item yang dipilih memperbarui secara otomatis.

Pendekatan ini bermanfaat untuk formulir di mana seleksi tergantung pada input lainnya. Misalnya, jika pengguna memilih "Akun Bisnis," Anda mungkin secara otomatis mengatur RadioGroup ke "Rencana Tahunan" alih -alih "Rencana Bulanan."

Menangani acara yang dimaksudkan

Menetapkan nilai adalah salah satu sisi cerita. Menangkap interaksi pengguna adalah yang lain. Acara OnValueChanged di DevExtreme memungkinkan Anda bereaksi setiap kali pengguna mengubah pilihan mereka.

Inilah contoh sederhana:

Setiap kali pengguna memilih paket yang berbeda, konsol mencetak nilai baru. Acara ini adalah kunci ketika Anda ingin memperbarui bagian lain dari halaman atau mengirim pemilihan kembali ke database.

Dalam kerangka kerja, ini bekerja dengan cara yang sama tetapi mengikuti model acara mereka. Dalam React, misalnya, Anda dapat menggunakan status dan melewati fungsi pawang yang ditembakkan saat radioGroup berubah. Dalam Angular atau Vue, Anda dapat mengikat secara langsung dengan pengikatan data dua arah dan menggunakan output acara untuk melacak perubahan.

Pikirkan OnvalueChanged sebagai "pendengar" Anda. Ini menghubungkan tindakan pengguna ke logika bisnis Anda - seperti menunjukkan harga yang berbeda, memungkinkan tombol, atau menyesuaikan bidang terkait. Tanpa itu, RadioGroup hanya akan menampilkan opsi tanpa memberi tahu sisa aplikasi Anda apa yang dipilih pengguna.

Contoh-contoh khusus kerangka kerja

DevExtreme bekerja di banyak kerangka kerja, dan mengatur nilai radio yang dipilih hampir sama di mana -mana, tetapi sintaks sedikit berubah.

1. Contoh Angular:

Dalam sudut, Anda biasanya mengikat nilainya ke properti komponen.

<DX-Radio-Group
[item] = ”['dasar', 'standar', 'premium']”
[(value)] = "SelectedPlan">
</dx-radio-group>

Di sini, selectedPlan di Kontrol File TypeScript Anda item mana yang dipilih. Jika Anda mengubah selectedPlan , RADIOGROUP segera memperbarui.

2. Contoh Bereaksi:

Bereaksi menggunakan komponen yang terkontrol, sehingga Anda menangani pilihan dengan status.

Ketika pengguna memilih paket yang berbeda, setPlan memperbarui status, dan RadioGroup menunjukkan pilihan baru.

3. Vue Contoh:

Vue memudahkan v-model .

Mengubah selectedPlan di data VUE Anda memperbarui RadioGroup secara instan.

4. Contoh jQuery:

JQuery sederhana karena Anda hanya membuat instance dan mengatur nilainya.

Memecahkan masalah masalah umum

Bahkan dengan widget sederhana, segalanya bisa salah. Berikut adalah masalah yang paling umum yang dihadapi pengembang:

• Nilai Tidak Memperbarui: Ini biasanya terjadi ketika nilai yang Anda tetapkan tidak cocok dengan valueExpr di data data Anda. Misalnya, jika data data Anda menggunakan id , tetapi Anda mencoba mengatur teks sebagai gantinya, tidak ada yang berubah.
• Beberapa RadioGroup dalam satu bentuk: Jika Anda menggunakan pengikatan data yang sama untuk dua widget, mereka dapat saling mengganggu. Selalu gunakan binding unik atau keadaan terpisah untuk setiap kelompok.
• Masalah Styling atau Tata Letak: Terkadang RadioGroup tidak terlihat tepat di dalam bentuk atau kisi. Pastikan wadah memiliki ruang yang cukup dan CSS tidak mengesampingkan gaya Devextreme.

Sebagian besar masalah ini bermuara pada nilai -nilai yang tidak cocok atau binding yang hilang. Memeriksa value Anda, valueExpr , dan dataSource biasanya menyelesaikannya.

Kesimpulan

Widget RadioGroup di DevExtreme adalah alat yang sederhana namun penting. Anda menggunakan properti Value untuk mengatur default, opsi ("nilai") untuk mengubahnya nanti, dan diaktifkan untuk menangkap tindakan pengguna. Dalam sudut, bereaksi, vue, atau jQuery, metodenya sama - mengikat nilainya dengan benar, dan berfungsi.

Jika ada sesuatu yang tidak diperbarui, periksa ikatan data Anda dan pastikan nilainya cocok dengan sumber data Anda. Setelah Anda mengaturnya dengan benar, RadioGoup menjadi cara yang halus untuk memandu pengguna membuat pilihan yang Anda inginkan.