Krok po kroku: devextreme Jak ustawić wybraną opcję grupę radiową

Opublikowany: 2025-08-20

Devextreme autorstwa Devexpress to biblioteka pełna gotowych do użycia komponentów interfejsu użytkownika dla aplikacji internetowych. Działa z Angular, React, Vue, a nawet JQuery. Jednym z jego popularnych widżetów jest radiogrupa , która pozwala użytkownikom wybrać jedną opcję z listy.

W formularzach, stronach lub pulpitach nawigacyjnych, radiogrupa pomaga prowadzić użytkowników do wyboru tylko jednej odpowiedzi. Na przykład możesz pozwolić im wybrać między „planem miesięcznym” a „Planem rocznym”. Aby aplikacja była płynna, programiści często chcą ustawić domyślny wybór lub ustawić wartość. Właśnie tam pojawia się właściwość wartości w radiowroku.

Co to jest radiogrupa devextreme?

Ustaw domyślną wybraną wartość w radiogroupie

Widżet radiowy jest prostym, ale potężnym sterowaniem wejściowym. Wymaga zestawu danych (jak tablica lub lista JSON) i pokazuje przyciski radiowe dla każdego elementu. Użytkownicy mogą następnie kliknąć, aby wybrać jeden. W przeciwieństwie do grupy wyboru , w której można wybrać wiele elementów, radiogrupa umożliwia tylko jeden wybór na raz.

Deweloperzy zwykle dbają o dwie rzeczy: czym jest wybrany element i jak go poprawnie ustawić. Widżet śledzi bieżący wybór za pośrednictwem właściwości wartości . Po zmianie tej właściwości wybrane elementy aktualizują. Działa to we wszystkich ramach - kątowych, react, vue i jQuery - ponieważ widżet podąża za tym samym interfejsem API.

Ustaw domyślną wybraną wartość w radiogroupie

Ustawienie domyślnej wybranej wartości odbywa się za pomocą opcji wartości podczas inicjowania widżetu. Przekazujesz wartość pasującą do jednego z elementów w zestawie danych , a ten element pojawia się jako wstępnie wybrany.

Oto prosty przykład przy użyciu zwykłego JavaScript z zestawem danych JSON:

$ („#RadiogroupContainer”). Dxradiogroup ({{
Pozycje: [„podstawowe”, „standard”, „premium”],
Wartość: „standard” // Wybrany domyślnie
});

W tym przykładzie opcja „standardowa” zostanie już wybrana po załadowaniu strony. Jest to przydatne, gdy chcesz poprowadzić użytkowników do najczęstszego lub zalecanego wyboru.

Możesz także wiązać się z obiektami zamiast zwykłych ciągów. Na przykład:

$ („#RadiogroupContainer”). Dxradiogroup ({{
rzeczy: [
{Id: 1, tekst: „plan miesięczny”},
{Id: 2, tekst: „Plan roczny”}
],],
Wartość: 2, // domyślnie wybiera „roczny plan”
valueExpr: „id”,
DisplayExpr: „tekst”
});

Tutaj właściwości ValueExPR i DisplayExpr upewniają się, że widżet wie, które pole użyć dla wartości i które pole wyświetlić użytkownikowi.

Programowo zmień wybrany element

Czasami nie chcesz, aby radiogrupa po prostu pokazała wartość domyślną. Może być konieczne zmianę wybranej opcji później, być może po tym, jak użytkownik zakończy kolejny krok w formularzu lub po powrocie danych z interfejsu API.

W Devextreme odbywa się to poprzez aktualizację właściwości wartości radiogrupy. Jeśli utworzyłeś widżet z JQuery, możesz wywołać opcję (), aby zmienić go w czasie wykonywania.

Przykład:

var radiogrupa = $ („#radiogroupContainer”). Dxradiogroup ({{
Pozycje: [„podstawowe”, „standard”, „premium”],
Wartość: „podstawowy”
}). dxradiogroup („instancja”);

// Zmień wybór programowo
radiogroup.option („wartość”, „premium”);

Gdy połączenie opcji („Wartość”,…) uruchomi się, radiogrupa natychmiast podkreśla „Premium”. Działa to również w kątowych, reagujących i vue - w tych ramach zwykle wiążysz wartość ze stanem lub zmienną. Gdy ten stan się zmieni, wybrany element aktualizuje się automatycznie.

Takie podejście jest pomocne dla form, w których wybór zależy od innych danych wejściowych. Na przykład, jeśli użytkownik wybierze „konto biznesowe”, możesz automatycznie ustawić radiogrupę na „plan roczny” zamiast „Plan miesięczny”.

Obsługa wydarzenia OnvalueChed

Ustawienie wartości to jedna strona historii. Uchwycenie interakcji użytkownika jest drugim. Zdarzenie onvaluechanged w Devextreme pozwala reagować za każdym razem, gdy użytkownik zmienia swój wybór.

Oto prosty przykład:

$ („#RadiogroupContainer”). Dxradiogroup ({{
Pozycje: [„podstawowe”, „standard”, „premium”],
wartość: „standard”,
onValueChanged: funkcja (e) {
console.log („Wybrany element:” + e.value);
}
});

Ilekroć użytkownik wybiera inny plan, konsola drukuje nową wartość. To zdarzenie jest kluczem, gdy chcesz zaktualizować inne części strony lub odesłać wybór z powrotem do bazy danych.

W ramach działa to w ten sam sposób, ale podąża za ich modelami wydarzeń. Na przykład w React możesz użyć stanu i przekazać funkcję obsługi, która strzela, gdy zmieni się radiogrupa. W Angular lub Vue możesz wiązać się bezpośrednio z dwukierunkowym wiązaniem danych i używać wyjścia zdarzenia do śledzenia zmian.

Pomyśl o OnvaluEchanged jako o swoim „słuchaczu”. Łączy działanie użytkownika z logiką biznesową - na przykład wyświetlanie innej ceny, włączenie przycisku lub dostosowanie powiązanych pól. Bez tego radiogrupa wyświetliłaby tylko opcje bez poinformowania reszty aplikacji, co wybrał użytkownik.

Przykłady specyficzne dla ram

Devextreme działa w wielu ramach, a ustawianie wybranej wartości radiogrupy jest prawie tak samo wszędzie, ale składnia nieco się zmienia.

1. Przykład kątowy:

W kątowym zwykle wiąże wartość z właściwością komponentu.

<dx-radio-grupa
[items] = ”[„ podstawowy ”,„ standard ”,„ premium ”]”
[(wartość)] = ”SelectedPlan”>
</dx-radio-grupa>

Tutaj selectedPlan w plikach TypeScript, który element jest wybrany. Jeśli zmieniasz selectedPlan , natychmiastowe aktualizuje radiogrupa.

2. React Przykład:

React używa kontrolowanych komponentów, więc obsługujesz wybór ze stanem.

const [plan, setplan] = usestate („standard”);

<Dxradiogroup
Items = {[„podstawowy”, „standard”, „premium”]}
wartość = {plan}
onValueChanged = {(e) => setplan (e.value)}
/>

Gdy użytkownik wybiera inny plan, setPlan aktualizuje stan, a radiogrupa pokazuje nowy wybór.

3. Przykład Vue:

Vue ułatwia to v-model

<dx-radio-grupa
: items = ”[„ podstawowy ”,„ standard ”,„ premium ”]”
v-Model = ”SelectedPlan”>
</dx-radio-grupa>

Zmiana selectedPlan w danych Vue Aktualizuje natychmiastową grupę radiogrupy.

4. Przykład jQuery:

JQuery jest proste, ponieważ po prostu tworzysz instancję i ustaw wartość.

$ („#RadiogroupContainer”). Dxradiogroup ({{
Pozycje: [„podstawowe”, „standard”, „premium”],
Wartość: „premium”
});

Rozwiązywanie problemów typowych problemów

Nawet w przypadku prostych widżetów rzeczy mogą pójść nie tak. Oto najczęstsze problemy, z jakimi borykają się programiści:

  • Wartość nie aktualizuje: zwykle dzieje się tak, gdy ustawiona wartość nie pasuje valueExpr w Twoim zestawie danych. Na przykład, jeśli Twój zestaw danych używa id , ale zamiast tego próbujesz ustawić tekst, nic się nie zmienia.
  • Wiele radiogrupy w jednej formie: jeśli używasz tego samego wiązania danych dla dwóch widżetów, mogą one zakłócać się ze sobą. Zawsze używaj unikalnych powiązań lub oddzielnego stanu dla każdej grupy.
  • Problemy z stylem lub układem: Czasami radiogrupa nie wygląda w odpowiednich formach ani siatkach. Upewnij się, że pojemnik ma wystarczającą ilość miejsca, a CSS nie nadrzęduje stylów Devextreme.

Większość z tych problemów sprowadza się do niedopasowanych wartości lub brakujących powiązań. Sprawdzanie value , valueExpr i dataSource zwykle je rozwiązuje.

Wniosek

Widżet radiogrupy w Devextreme jest prostym, ale ważnym narzędziem. Używasz właściwości wartości , aby ustawić domyślną opcję („Wartość”) , aby ją później zmienić, i OnValueChanged w celu przechwytywania działań użytkownika. W kątowym, reakcji, vue lub jQuery metoda jest taka sama - poprawnie powiązaj wartość i działa.

Jeśli coś nie aktualizuje, sprawdź wiązanie danych i upewnij się, że wartość pasuje do Twojego zestawu danych. Po odpowiednim skonfigurowaniu Radiogroup staje się gładkim sposobem, aby poprowadzić użytkowników do dokonania pożądanego wyboru.