단계별 : DeVexTreme 라디오 그룹 선택한 옵션을 설정하는 방법

DeVexTreme의 DeVexPress는 웹 앱에 대한 즉시 사용 가능한 UI 구성 요소로 가득 찬 라이브러리입니다. 각도, 반응, vue 및 jQuery와 함께 작동합니다. 인기있는 위젯 중 하나는 Radiogroup 으로, 사용자는 목록에서 하나의 옵션을 선택할 수 있습니다.

양식, 설정 페이지 또는 대시 보드에서 Radiogroup은 사용자가 하나의 답변 만 선택할 수 있도록 도와줍니다. 예를 들어,“월간 계획”과“연간 계획”을 선택할 수 있습니다. 앱을 매끄럽게 만들기 위해 개발자는 종종 기본 선택을 설정하거나 값을 사전 선택하려고합니다. 그것이 방사선 그룹의 값 속성이 들어 오는 곳입니다.

DeVexTreme 방사선이란 무엇입니까?

Radiogroup 위젯 은 간단하지만 강력한 입력 컨트롤입니다. 데이터 소스 (배열 또는 JSON 목록과 같은)가 필요하고 각 항목에 대한 라디오 버튼을 보여줍니다. 그런 다음 사용자는 클릭하여 하나를 선택할 수 있습니다. 여러 항목을 선택할 수있는 CheckBoxGroup 과 달리 방사선 그룹은 한 번에 단일 선택 만 허용합니다.

개발자는 일반적으로 선택된 항목 의 내용과 올바르게 설정하는 방법입니다. 위젯은 값 속성을 통해 현재 선택을 추적합니다. 이 속성을 변경하면 선택한 항목이 업데이트됩니다. 위젯이 동일한 API를 따르기 때문에 각 프레임 워크 (Angular, React, Vue 및 JQuery)에서 작동합니다.

Radiogroup에서 기본 선택한 값을 설정하십시오

위젯을 초기화 할 때 값 옵션을 통해 기본 선택한 값을 설정합니다. 데이터 소스 의 항목 중 하나와 일치하는 값을 전달하고 해당 항목은 미리 선택된 것으로 나타납니다.

다음은 JSON DataSource와 함께 일반 JavaScript를 사용하는 간단한 예입니다.

$ ( "#radiogroupcontainer"). dxradiogroup ({{
항목 : [ "기본", "표준", "프리미엄"],
값 : "표준"// 기본값을 선택했습니다
});

이 예에서는 페이지가로드 될 때 "표준"옵션이 이미 선택됩니다. 이것은 사용자를 가장 일반적이거나 권장되는 선택으로 안내하려는 경우 유용합니다.

일반 문자열 대신 물체에 바인딩 할 수도 있습니다. 예를 들어:

여기서 ValueExpr 및 DisplayExpr 속성은 위젯이 값에 사용할 필드와 사용자에게 표시 할 필드를 알고 있는지 확인합니다.

프로그래밍 방식으로 선택한 항목을 변경합니다

때로는 방사선이 기본값을 표시하는 것을 원하지 않습니다. 선택한 옵션을 나중에 변경해야 할 수도 있습니다. 아마도 사용자가 양식의 다른 단계를 완료 한 후 또는 데이터가 API에서 돌아올 때를 변경해야 할 수도 있습니다.

DeVexTreme에서는 Radiogroup의 값 속성을 업데이트하여 수행됩니다. jQuery로 위젯을 만든 경우 옵션 ()을 호출하여 런타임에 변경할 수 있습니다.

예:

옵션 ( "value",…) 호출이 실행되면 방사선이 즉시 "프리미엄"을 강조합니다. 이것은 각도, 반응 및 vue에서도 작동합니다. 해당 프레임 워크에서는 일반적으로 값을 상태 또는 변수에 바인딩합니다. 해당 상태가 변경되면 선택한 항목이 자동으로 업데이트됩니다.

이 접근법은 선택이 다른 입력에 의존하는 형태에 도움이됩니다. 예를 들어, 사용자가 "비즈니스 계정"을 선택하면 "월간 계획"대신 방사선 그룹을 "연간 계획"으로 자동 설정할 수 있습니다.

onvaluechanged 이벤트 처리

가치를 설정하는 것은 이야기의 한쪽입니다. 사용자 상호 작용 캡처는 다른 것입니다. DevexTreme의 OnValueChanged 이벤트를 사용하면 사용자가 선택을 변경할 때마다 반응 할 수 있습니다.

간단한 예는 다음과 같습니다.

사용자가 다른 계획을 선택할 때마다 콘솔은 새로운 값을 인쇄합니다. 이 이벤트는 페이지의 다른 부분을 업데이트하거나 선택을 데이터베이스로 다시 보내려면 핵심입니다.

프레임 워크에서 이것은 같은 방식으로 작동하지만 이벤트 모델을 따릅니다. 예를 들어 React에서는 상태를 사용하고 방사선 그룹이 변경 될 때 발사되는 핸들러 기능을 전달할 수 있습니다. Angular 또는 VUE에서는 양방향 데이터 바인딩으로 직접 바인딩하고 이벤트 출력을 사용하여 변경 사항을 추적 할 수 있습니다.

onvaluechanged 를 당신의 "청취자"로 생각하십시오. 다른 가격 표시, 버튼 활성화 또는 관련 필드 조정과 같은 비즈니스 로직에 사용자 작업을 연결합니다. 그것 없이는 방사선 그룹이 앱의 나머지 부분에 사용자가 무엇을 선택했는지 알리지 않고 옵션 만 표시합니다.

프레임 워크 별 예제

DeVexTreme은 많은 프레임 워크에서 작동하며 선택한 방사선 값을 설정하는 것은 거의 모든 곳에서 거의 동일하지만 구문은 약간 변경됩니다.

1. 각도 예 :

각도에서는 일반적으로 값을 구성 요소 속성에 바인딩합니다.

<dx-radio-group
[항목] = "[ '기본', '표준', '프리미엄']”””
[(value)] = "selectedPlan">
</dx-radio-group>

여기에서는 TypeScript 파일 컨트롤에서 selectedPlan 항목이 선택된 항목을 선택하십시오. selectedPlan 변경하면 방사선이 즉시 업데이트됩니다.

2. 반응 예 :

React는 제어 된 구성 요소를 사용하므로 상태로 선택을 처리합니다.

사용자가 다른 계획을 선택하면 setPlan 상태를 업데이트하며 방사선이 새로운 선택을 보여줍니다.

3. vue 예 :

Vue는 v-model 로 쉽게 만듭니다.

VUE 데이터에서 selectedPlan 변경하면 방사선 그룹이 즉시 업데이트됩니다.

4. jQuery 예 :

jQuery는 인스턴스를 생성하고 값을 설정하기 때문에 간단합니다.

일반적인 문제 문제 해결

간단한 위젯이 있더라도 상황이 잘못 될 수 있습니다. 개발자가 직면 한 가장 일반적인 문제는 다음과 같습니다.

• 업데이트되지 않음 : 이는 일반적으로 설정 한 값이 데이터 소스의 valueExpr 과 일치하지 않을 때 발생합니다. 예를 들어, DataSource가 id 사용하지만 대신 텍스트를 설정하려고하면 아무것도 변경되지 않습니다.
• 한 형태의 여러 방사선 그룹 : 두 위젯에 동일한 데이터 바인딩을 사용하는 경우 서로를 방해 할 수 있습니다. 항상 각 그룹에 대해 고유 한 바인딩 또는 별도의 상태를 사용하십시오.
• 스타일링 또는 레이아웃 문제 : 때로는 방사선이 형태 나 그리드 내부에서 바로 보이지 않습니다. 컨테이너에 충분한 공간이 있고 CSS가 DevexTreme의 스타일을 무시하지 않도록하십시오.

이러한 문제의 대부분은 불일치 한 값 또는 누락 된 바인딩으로 이어집니다. 귀하의 value , valueExpr 및 dataSource 확인하면 일반적으로이를 해결합니다.

결론

DeVexTreme의 Radiogroup 위젯은 간단하지만 중요한 도구입니다. 값 속성을 사용하여 기본값, 옵션 ( "값")을 설정하여 나중에 변경하고 사용자 작업을 캡처하기 위해 OnValueChanged . 각도, 반응, vue 또는 jQuery 에서이 방법은 동일합니다. 값을 올바르게 바인딩하면 작동합니다.

업데이트되지 않으면 데이터 바인딩을 확인하고 값이 데이터 소스와 일치하는지 확인하십시오. 올바르게 설정하면 Radiogroup은 사용자가 원하는 선택을하도록 안내하는 원활한 방법이됩니다.