خطوة بخطوة: devextreme كيفية تعيين خيار مجموعة الراديو المحددة

DeVextreme by DeVexPress هي مكتبة مليئة بمكونات واجهة المستخدم جاهزة للاستخدام لتطبيقات الويب. إنه يعمل مع Angular ، React ، Vue ، وحتى jQuery. واحدة من المصادر الشهيرة هي مجموعة Radiogroup ، والتي تتيح للمستخدمين اختيار خيار واحد من القائمة.

في النماذج أو صفحات الإعدادات أو لوحات المعلومات ، تساعد Radiogroup للمستخدمين على اختيار إجابة واحدة فقط. على سبيل المثال ، قد تسمح لهم بالاختيار بين "الخطة الشهرية" و "الخطة السنوية". لجعل التطبيق يشعر بسلاسة ، غالبًا ما يرغب المطورون في تعيين خيار افتراضي أو تمثيل قيمة مسبقًا. هذا هو المكان الذي تأتي فيه خاصية القيمة في Radiogroup.

ما هو devextreme radiogroup؟

عنصر واجهة المستخدم Radiogroup هو التحكم في الإدخال بسيط ولكنه قوي. يستغرق مصدر بيانات (مثل قائمة صفيف أو JSON) ويعرض أزرار الراديو لكل عنصر. يمكن للمستخدمين بعد ذلك النقر لتحديد واحد. على عكس مجموعة الاختيار ، حيث يمكن اختيار عناصر متعددة ، فإن Radiogroup تسمح فقط باختيار واحد في وقت واحد.

عادة ما يهتم المطورين بأمرين: ما هو العنصر المحدد وكيفية تعيينه بشكل صحيح. تتبع القطعة الاختيار الحالي من خلال خاصية القيمة . عند تغيير هذه الخاصية ، يتم تحديثات العنصر المحدد. يعمل هذا عبر جميع الأطر - Angular ، React ، Vue ، و JQuery - لأن القطعة تتبع واجهة برمجة التطبيقات نفسها.

قم بتعيين قيمة محددة افتراضية في Radiogroup

يتم تعيين القيمة المحددة الافتراضية من خلال خيار القيمة عند تهيئة القطعة. تقوم بتمرير القيمة التي تتطابق مع أحد العناصر الموجودة في مصدر البيانات ، وهذا العنصر يظهر على أنه تم تحديده مسبقًا.

إليك مثالًا بسيطًا باستخدام JavaScript العادي مع DataSource JSON:

$ ("#radiogroupcontainer"). dxRadiogroup ({
العناصر: ["Basic" ، "Standard" ، "Premium"] ،
القيمة: "قياسي" // الافتراضي المحدد
}) ؛

في هذا المثال ، سيتم بالفعل تحديد الخيار "القياسي" عند تحميل الصفحة. هذا مفيد عندما تريد توجيه المستخدمين إلى الاختيار الأكثر شيوعًا أو الموصى به.

يمكنك أيضًا ربط الكائنات بدلاً من السلاسل العادية. على سبيل المثال:

هنا ، تتأكد خصائص ValueExpr و DisplayExpr من أن عنصر واجهة المستخدم يعرف الحقل الذي يجب استخدامه للقيمة وحقله الذي سيتم عرضه على المستخدم.

قم بتغيير العنصر المحدد بشكل برمجي

في بعض الأحيان ، لا تريد أن تظهر مجموعة Radiogroup فقط قيمة افتراضية. قد تحتاج إلى تغيير الخيار المحدد لاحقًا ، ربما بعد أن يكمل المستخدم خطوة أخرى في النموذج الخاص بك أو عندما تعود البيانات من واجهة برمجة التطبيقات.

في devextreme ، يتم ذلك عن طريق تحديث خاصية القيمة لمجموعة Radiogroup. إذا قمت بإنشاء عنصر واجهة مستخدم مع jQuery ، فيمكنك الاتصال على الخيار () لتغييره في وقت التشغيل.

مثال:

عندما يتم تشغيل الخيار ("القيمة" ، ...) ، يبرز مجموعة Radiogroup على الفور "Premium". يعمل هذا في Angular و React و Vue أيضًا - في تلك الأطر ، عادةً ما تربط القيمة بالحالة أو المتغير. عندما تتغير هذه الحالة ، يتم تحديث العنصر المحدد تلقائيًا.

هذا النهج مفيد للنماذج التي يعتمد فيها الاختيار على مدخلات أخرى. على سبيل المثال ، إذا اختار المستخدم "حساب الأعمال" ، فيمكنك تعيين Radiogroup تلقائيًا على "الخطة السنوية" بدلاً من "الخطة الشهرية".

التعامل مع الحدث onvaluechanged

وضع قيمة هو جانب واحد من القصة. التقاط تفاعل المستخدم هو الآخر. يتيح لك الحدث onvaluechanged في Devextreme أن يتفاعل كلما قام المستخدم بتغيير اختياره.

هذا مثال بسيط:

كلما اختار المستخدم خطة مختلفة ، تقوم وحدة التحكم بطباعة القيمة الجديدة. هذا الحدث هو مفتاح عندما تريد تحديث أجزاء أخرى من الصفحة أو إرسال التحديد مرة أخرى إلى قاعدة بيانات.

في الأطر ، يعمل هذا بنفس الطريقة ولكن يتبع نماذج الأحداث الخاصة بهم. في React ، على سبيل المثال ، يمكنك استخدام الحالة وتمرير وظيفة المعالج التي تطلق النار عندما يتغير مجموعة Radiogroup. في Angular أو Vue ، يمكنك الربط مباشرة بربط البيانات ثنائية الاتجاه واستخدام إخراج الحدث لتتبع التغييرات.

فكر في Onvaluechanged كـ "مستمع". يربط إجراء المستخدم بمنطق عملك - مثل إظهار سعر مختلف ، أو تمكين زر ، أو ضبط الحقول ذات الصلة. بدون ذلك ، ستعرض Radiogroup خيارات فقط دون السماح لبقية التطبيق الخاص بك بمعرفة ما الذي اختاره المستخدم.

أمثلة خاصة بالإطار

يعمل DeVextreme عبر العديد من الأطر ، ويكون ضبط قيمة Radiogroup المحددة كما هو تقريبًا في كل مكان ، لكن بناء الجملة يتغير قليلاً.

1. مثال على الزاوي:

في الزاوي ، عادة ما تربط القيمة بخاصية مكون.

<DX-Radio-Group
[العناصر] = "[" Basic "،" Standard "،" Premium "]"
[(القيمة)] = "SelectionPlan">
</dx-radio-group>

هنا ، selectedPlan في Contrectist Creability TypeScript الذي يتم تحديد العنصر. إذا قمت بتغيير selectedPlan ، يتم تحديثات Radiogroup على الفور.

2.

يستخدم React المكونات التي يتم التحكم فيها ، بحيث تتعامل مع التحديد مع الحالة.

عندما يختار المستخدم خطة مختلفة ، يقوم setPlan بتحديث الحالة ، ويعرض Radiogroup التحديد الجديد.

3. مثال على:

Vue يجعل الأمر سهلاً مع v-model

يقوم تغيير selectedPlan في تحديثات بيانات VUE الخاصة بك إلى تحديثات RadiogRoup على الفور.

4. مثال jQuery:

jQuery بسيط لأنك مجرد إنشاء مثيل وتعيين القيمة.

استكشاف الأخطاء وإصلاحها القضايا المشتركة

حتى مع الحاجيات البسيطة ، يمكن أن تسوء الأمور. فيما يلي المشاكل الأكثر شيوعًا التي يواجهها المطورون:

• لا يتم تحديث القيمة: يحدث هذا عادةً عندما لا تتطابق القيمة التي تقوم بتعيينها مع valueExpr في مصدر البيانات الخاص بك. على سبيل المثال ، إذا كانت بياناتك تستخدم id ، لكنك تحاول تعيين النص بدلاً من ذلك ، لا شيء يتغير.
• مجموعات مشع متعددة في نموذج واحد: إذا كنت تستخدم نفس ربط البيانات لضغط اثنين ، فيمكنها التدخل مع بعضها البعض. استخدم دائمًا روابط فريدة أو حالة منفصلة لكل مجموعة.
• مشاكل التصميم أو التخطيط: في بعض الأحيان لا تنظر مجموعة Radiogroup داخل النماذج أو الشبكات. تأكد من أن الحاوية لديها مساحة كافية وأن CSS لا تتجاوز أنماط Devextreme.

معظم هذه القضايا تعود إلى القيم غير المتطابقة أو الروابط المفقودة. عادةً ما يحلها value و valueExpr و dataSource .

خاتمة

أداة Radiogroup في devextreme هي أداة بسيطة ولكنها مهمة. يمكنك استخدام خاصية Value لتعيين خيار افتراضي وخيار ("قيمة") لتغييره لاحقًا ، و onvaluechanged لالتقاط إجراءات المستخدم. في الزاوي أو التفاعل أو Vue أو jQuery ، تكون الطريقة هي نفسها - ربط القيمة بشكل صحيح ، وهي تعمل.

إذا لم يتم تحديث شيء ما ، فتحقق من ربط البيانات وتأكد من مطابقة القيمة الخاصة بك. بمجرد إعداده بشكل صحيح ، تصبح Radiogroup طريقة سلسة لتوجيه المستخدمين إلى الاختيار الذي تريده.