Pas cu pas: DevExtreme Cum se setează opțiunea selectată în grupul radio
Publicat: 2025-08-20DeVExtreme by Devexpress este o bibliotecă plină de componente UI gata de utilizare pentru aplicații web. Funcționează cu unghiular, React, Vue și chiar JQuery. Unul dintre widget -urile sale populare este RadioGroup , care permite utilizatorilor să aleagă o opțiune dintr -o listă.
În formulare, pagini de setări sau tablouri de bord, RadioGroup ajută utilizatorii să aleagă un singur răspuns. De exemplu, s -ar putea să le lăsați să aleagă între „Planul lunar” și „Planul anual”. Pentru a face aplicația să se simtă lină, dezvoltatorii doresc adesea să stabilească o alegere implicită sau să preseleze o valoare. Acolo vine proprietatea valorică din RadioGroup.
Ce este un radiogrup DeVExtreme?
Widgetul RadioGroup este un control de intrare simplu, dar puternic. Este nevoie de o sursă de date (cum ar fi o listă sau o listă JSON) și arată butoane radio pentru fiecare articol. Utilizatorii pot face clic apoi pentru a selecta unul. Spre deosebire de un grup de selectare , unde pot fi culese mai multe articole, RadioGroup permite doar o singură alegere simultan.
De obicei, dezvoltatorii le pasă de două lucruri: care este elementul selectat și cum să -l setați corect. Widgetul urmărește alegerea curentă prin proprietatea Value . Când schimbați această proprietate, se actualizează elementul selectat. Acest lucru funcționează pe toate cadrele - unghiular, React, Vue și JQuery - deoarece widgetul urmează aceeași API.
Setați o valoare selectată implicit în RadioGroup
Setarea unei valori selectate implicite se face prin opțiunea Valoare la inițializarea widgetului. Treceți valoarea care se potrivește cu unul dintre elementele din DataSource , iar acel element apare ca preselectat.
Iată un exemplu simplu folosind JavaScript simplu cu o sursă de date JSON:
$ („#RadioGroupContainer”). DxradioGroup ({
Articole: [„Basic”, „Standard”, „Premium”],
Valoare: „Standard” // Selectat implicit
});
În acest exemplu, opțiunea „standard” va fi deja selectată atunci când pagina se încarcă. Acest lucru este util atunci când doriți să ghidați utilizatorii spre cea mai comună sau recomandată alegere.
De asemenea, vă puteți lega de obiecte în loc de șiruri simple. De exemplu:
$ („#RadioGroupContainer”). DxradioGroup ({
Articole: [
{ID: 1, text: „Plan lunar”},
{ID: 2, text: „Plan anual”}
],
Valoare: 2, // selectează în mod implicit „Planul anual”
ValueEexpr: „ID”,
DisplayExpr: „Text”
});
Aici, Proprietățile ValueEXPR și DisplayExpr asigurați -vă că widgetul știe ce câmp să utilizeze pentru valoare și ce câmp să se arate utilizatorului.
Modificați programatic elementul selectat
Uneori nu doriți ca radiogrupul să arate doar o valoare implicită. Este posibil să fie nevoie să schimbați opțiunea selectată mai târziu, poate după ce utilizatorul finalizează un alt pas în formularul dvs. sau când datele revin dintr -o API.
În DeveXtreme, acest lucru se face prin actualizarea proprietății valorice a radiogrupului. Dacă ați creat widget -ul cu JQuery, puteți apela Opțiunea () pentru a -l schimba la Runtime.
Exemplu:
var RadioGroup = $ („#RadioGroupContainer”). DXRADIOGROUP ({
Articole: [„Basic”, „Standard”, „Premium”],
Valoare: „de bază”
}). dxradioGroup („instanță”);// Schimbarea selecției programatic
RadioGroup.Option („Valoare”, „Premium”);
Când apelul opțiunea („Valoare”,…) rulează, radiogrupul evidențiază instantaneu „Premium”. Acest lucru funcționează în unghiular, reacționează și vue - în acele cadre, de obicei legați valoarea la stare sau o variabilă. Când această stare se schimbă, elementul selectat se actualizează automat.
Această abordare este utilă pentru formele în care selecția depinde de alte contribuții. De exemplu, dacă un utilizator alege „cont de afaceri”, puteți seta automat radiogrupul la „plan anual” în loc de „plan lunar”.
Manipularea evenimentului OnvalueChanged
Setarea unei valori este o parte a poveștii. Captarea interacțiunii utilizatorului este cealaltă. Evenimentul OnValueChanged din DeveXtreme vă permite să reacționați ori de câte ori utilizatorul își schimbă selecția.
Iată un exemplu simplu:
$ („#RadioGroupContainer”). DxradioGroup ({
Articole: [„Basic”, „Standard”, „Premium”],
Valoare: „Standard”,
onValueChanged: funcție (e) {
Console.log („Element selectat:” + E.Value);
}
});
Ori de câte ori utilizatorul alege un plan diferit, consola tipărește noua valoare. Acest eveniment este esențial atunci când doriți să actualizați alte părți ale paginii sau să trimiteți selecția înapoi la o bază de date.
În cadre, acest lucru funcționează la fel, dar urmează modelele lor de evenimente. În React, de exemplu, puteți utiliza starea și puteți trece o funcție de gestionare care se declanșează atunci când radiogrupul se schimbă. În Angular sau VUE, vă puteți lega direct cu legarea datelor în două sensuri și puteți utiliza ieșirea evenimentului pentru a urmări modificările.
Gândiți -vă la OnvalueChanged ca la „ascultător”. Conectează acțiunea utilizatorului la logica afacerii dvs. - cum ar fi să arătați un preț diferit, să permiteți un buton sau să reglați câmpurile conexe. Fără acesta, radiogrupul ar afișa doar opțiuni fără a permite restul aplicației dvs. ce a ales utilizatorul.
Exemple specifice cadrului
DeVEXTREME funcționează pe mai multe cadre, iar setarea valorii de radiogrup selectate este aproape aceeași peste tot, dar sintaxa se schimbă puțin.
1. Exemplu unghiular:
În Angular, de obicei legați valoarea la o proprietate componentă.
<DX-RADIO-GROup
[elemente] = ”['de bază', 'standard', 'premium']
[(valoare)] = ”SelectedPlan”>
</dx-radio-grup>
Aici, selectedPlan în fișierele dvs. Typescript controlează ce element este selectat. Dacă schimbați selectedPlan , radiogrupul se actualizează imediat.
2. React Exemplu:
React folosește componente controlate, astfel încât să gestionați selecția cu starea.
const [plan, setPlan] = usestate („standard”);
<DxradioGroup
items = {[„Basic”, „Standard”, „Premium”]}
valoare = {plan}
onValueChanged = {(e) => setPlan (e.Value)}
/>
Când utilizatorul alege un plan diferit, setPlan actualizează starea, iar radiogrupul arată noua selecție.
3. Exemplu vue:
Vue face ușor cu v-model
<DX-RADIO-GROup
: elemente = ”['de bază', 'standard', 'premium']
v-model = ”selectatPlan”>
</dx-radio-grup>
Schimbarea selectedPlan în datele dvs. VUE actualizează instantaneu radiogrupul.
4. Exemplu jQuery:
JQuery este simplu, deoarece creezi doar o instanță și setați valoarea.
$ („#RadioGroupContainer”). DxradioGroup ({
Articole: [„Basic”, „Standard”, „Premium”],
Valoare: „Premium”
});
Depanarea problemelor comune
Chiar și cu widget -uri simple, lucrurile pot merge prost. Iată cele mai frecvente probleme cu care se confruntă dezvoltatorii:
- Valoarea nu se actualizează: Acest lucru se întâmplă de obicei atunci când valoarea pe care o setați nu se potrivește cu
valueExprîn DataSource. De exemplu, dacă data de date foloseșteid, dar încercați să setați textul în schimb, nimic nu se schimbă. - Mai multe radiogrupuri într -o singură formă: dacă utilizați aceleași legare de date pentru două widget -uri, acestea pot interfera între ele. Utilizați întotdeauna legături unice sau stare separată pentru fiecare grup.
- Probleme de styling sau de aspect: Uneori, radiogrupul nu arată chiar în forme sau grile. Asigurați -vă că containerul are suficient spațiu, iar CSS nu depășește stilurile lui DevExtreme.
Majoritatea acestor probleme se referă la valori nepotrivite sau legături lipsă. Verificarea value dvs., valueExpr și dataSource le rezolvă de obicei.
Concluzie
Widgetul de radiogrup din DeveXtreme este un instrument simplu, dar important. Utilizați proprietatea Value pentru a seta o opțiune implicită, „valoare”) pentru a o schimba mai târziu, și onValueChanged pentru a capta acțiuni ale utilizatorului. În Angular, React, Vue sau JQuery, metoda este aceeași - legați corect valoarea și funcționează.
Dacă ceva nu se actualizează, verificați legarea datelor dvs. și asigurați -vă că valoarea se potrivește cu sursa de date. După ce ați configurat -o corect, RadioGroup devine o modalitate lină de a ghida utilizatorii să facă alegerea pe care o doriți.