ทีละขั้นตอน: devextreme วิธีการตั้งค่าตัวเลือกกลุ่มวิทยุที่เลือก

DevExtreme โดย DevExpress เป็นไลบรารีที่เต็มไปด้วยส่วนประกอบ UI ที่พร้อมใช้งานสำหรับเว็บแอพ มันทำงานกับเชิงมุม, ตอบสนอง, vue และแม้แต่ jQuery หนึ่งในวิดเจ็ตยอดนิยมของมันคือ Radiogroup ซึ่งช่วยให้ผู้ใช้เลือกหนึ่งตัวเลือกจากรายการ

ในรูปแบบหน้าการตั้งค่าหรือแดชบอร์ดการแผ่รังสีช่วยแนะนำผู้ใช้ในการเลือกคำตอบเดียวเท่านั้น ตัวอย่างเช่นคุณอาจปล่อยให้พวกเขาเลือกระหว่าง“ แผนรายเดือน” และ“ แผนรายปี” เพื่อให้แอปรู้สึกราบรื่นนักพัฒนามักต้องการตั้งค่าตัวเลือกเริ่มต้นหรือเลือกค่าล่วงหน้า นั่นคือที่ที่ คุณสมบัติมูลค่า ใน Radiogroup เข้ามา

RADIOGROUP ของ DevExtreme คืออะไร?

วิดเจ็ตรังสี เป็นตัวควบคุมอินพุตที่เรียบง่าย แต่ทรงพลัง ต้องใช้ DataSource (เช่นรายการอาร์เรย์หรือ JSON) และแสดงปุ่มตัวเลือกสำหรับแต่ละรายการ จากนั้นผู้ใช้สามารถคลิกเพื่อเลือกหนึ่ง ซึ่งแตกต่างจาก checkboxgroup ที่สามารถเลือกหลายรายการได้ Radiogroup อนุญาตให้มีตัวเลือกเดียวในแต่ละครั้ง

นักพัฒนามักจะใส่ใจสองสิ่ง: รายการที่เลือก คืออะไรและจะตั้งค่าได้อย่างไร วิดเจ็ตติดตามตัวเลือกปัจจุบันผ่าน คุณสมบัติมูลค่า เมื่อคุณเปลี่ยนคุณสมบัตินี้การอัปเดตรายการที่เลือก สิ่งนี้ใช้งานได้ในทุกเฟรมเวิร์ก - Angular, React, Vue และ JQuery - เนื่องจากวิดเจ็ตติดตาม API เดียวกัน

ตั้งค่าเริ่มต้นที่เลือกในการแผ่รังสี

การตั้งค่าค่าเริ่มต้นที่เลือกจะทำผ่านตัวเลือก ค่า เมื่อเริ่มต้นวิดเจ็ต คุณผ่านค่าที่ตรงกับหนึ่งในรายการใน แหล่งข้อมูล และรายการนั้นแสดงให้เห็นว่าเป็นที่เลือกไว้ล่วงหน้า

นี่คือตัวอย่างง่ายๆโดยใช้ JavaScript ธรรมดากับ DataSource JSON:

$ (“##radiogroupContainer”). dxRadiogroup ({
รายการ: [“ พื้นฐาน”,“ มาตรฐาน”,“ พรีเมี่ยม”]
ค่า:“ มาตรฐาน” // เลือกเริ่มต้น
-

ในตัวอย่างนี้ตัวเลือก“ มาตรฐาน” จะถูกเลือกแล้วเมื่อหน้าโหลด สิ่งนี้มีประโยชน์เมื่อคุณต้องการแนะนำผู้ใช้ไปยังตัวเลือกที่พบบ่อยที่สุดหรือแนะนำ

นอกจากนี้คุณยังสามารถผูกกับวัตถุแทนสตริงธรรมดา ตัวอย่างเช่น:

ที่นี่คุณสมบัติ ValueEEXPR และ DisplayEXPR ตรวจสอบให้แน่ใจว่าวิดเจ็ตรู้ว่าฟิลด์ใดที่จะใช้สำหรับค่าและฟิลด์ใดที่จะแสดงต่อผู้ใช้

เปลี่ยนรายการที่เลือกโดยทางโปรแกรม

บางครั้งคุณไม่ต้องการให้ Radiogroup แสดงค่าเริ่มต้น คุณอาจต้องเปลี่ยนตัวเลือกที่เลือกในภายหลังบางทีหลังจากที่ผู้ใช้เสร็จสิ้นขั้นตอนอื่นในแบบฟอร์มของคุณหรือเมื่อข้อมูลกลับมาจาก API

ใน DevExtreme สิ่งนี้ทำได้โดยการอัปเดต คุณสมบัติค่า ของ Radiogroup หากคุณสร้างวิดเจ็ตด้วย jQuery คุณสามารถเรียก ตัวเลือก () เพื่อเปลี่ยนได้เมื่อรันไทม์

ตัวอย่าง:

เมื่อ ตัวเลือก (“ ค่า”, …) เรียกใช้งาน Radiogroup จะเน้น“ พรีเมี่ยม” ทันที สิ่งนี้ใช้งานได้ในเชิงมุมปฏิกิริยาและ Vue ด้วย - ในกรอบเหล่านั้นคุณมักจะผูก ค่า เข้ากับสถานะหรือตัวแปร เมื่อสถานะนั้นเปลี่ยนแปลงรายการที่เลือกจะอัปเดตโดยอัตโนมัติ

วิธีการนี้มีประโยชน์สำหรับแบบฟอร์มที่การเลือกขึ้นอยู่กับอินพุตอื่น ๆ ตัวอย่างเช่นหากผู้ใช้เลือก "บัญชีธุรกิจ" คุณอาจตั้งค่าการแผ่รังสีโดยอัตโนมัติเป็น "แผนรายปี" แทนที่จะเป็น "แผนรายเดือน"

จัดการเหตุการณ์ onvalueChanged

การตั้งค่าค่าเป็นด้านหนึ่งของเรื่องราว การจับการโต้ตอบของผู้ใช้เป็นอีก เหตุการณ์ onvalueChanged ใน Devextreme ช่วยให้คุณตอบสนองเมื่อใดก็ตามที่ผู้ใช้เปลี่ยนการเลือก

นี่คือตัวอย่างง่ายๆ:

เมื่อใดก็ตามที่ผู้ใช้เลือกแผนอื่นคอนโซลจะพิมพ์ค่าใหม่ เหตุการณ์นี้เป็นคีย์เมื่อคุณต้องการอัปเดตส่วนอื่น ๆ ของหน้าหรือส่งการเลือกกลับไปยังฐานข้อมูล

ในเฟรมเวิร์กสิ่งนี้ใช้งานได้ในลักษณะเดียวกัน แต่เป็นไปตามโมเดลกิจกรรมของพวกเขา ตัวอย่างเช่นใน React คุณสามารถใช้สถานะและผ่านฟังก์ชั่นตัวจัดการที่ยิงได้เมื่อการเปลี่ยนแปลงของรังสีเปลี่ยนไป ใน Angular หรือ Vue คุณสามารถผูกโดยตรงกับการเชื่อมข้อมูลสองทางและใช้เอาต์พุตเหตุการณ์เพื่อติดตามการเปลี่ยนแปลง

คิดว่า onvalueChanged เป็น "ผู้ฟัง" ของคุณ มันเชื่อมต่อการกระทำของผู้ใช้กับตรรกะทางธุรกิจของคุณ - เช่นการแสดงราคาที่แตกต่างกันเปิดใช้งานปุ่มหรือปรับฟิลด์ที่เกี่ยวข้อง หากไม่มีมันรังสีจะแสดงตัวเลือกโดยไม่ปล่อยให้แอปที่เหลือของคุณรู้ว่าผู้ใช้เลือกอะไร

ตัวอย่างเฉพาะเฟรมเวิร์ก

DevExtreme ทำงานในหลาย ๆ เฟรมเวิร์กและการตั้งค่าค่ารังสีที่เลือกนั้นเกือบจะเหมือนกันทุกที่ แต่ไวยากรณ์เปลี่ยนไปเล็กน้อย

1. ตัวอย่างเชิงมุม:

ในเชิงมุมคุณมักจะผูกค่ากับคุณสมบัติส่วนประกอบ

<DX-Radio-Group
[รายการ] =” ['พื้นฐาน', 'มาตรฐาน', 'พรีเมี่ยม']”
[(ค่า)] =” SelectedPlan”>
</dx-radio-Group>

ที่นี่ selectedPlan ในการควบคุมไฟล์ TypeScript ของคุณเลือกรายการใด หากคุณเปลี่ยน selectedPlan การอัพเดทการแผ่รังสีทันที

2. ตอบสนองตัวอย่าง:

React ใช้ส่วนประกอบที่ควบคุมดังนั้นคุณจึงจัดการกับการเลือกด้วยสถานะ

เมื่อผู้ใช้เลือกแผนอื่น setPlan จะอัปเดตสถานะและ Radiogroup แสดงการเลือกใหม่

3. ตัวอย่าง VUE:

Vue ทำให้ง่ายด้วย v-model

การเปลี่ยน selectedPlan ในข้อมูล VUE ของคุณอัปเดตการแผ่รังสีทันที

4. ตัวอย่าง jQuery:

jQuery นั้นง่ายเพราะคุณเพียงแค่สร้างอินสแตนซ์และตั้งค่า

การแก้ไขปัญหาปัญหาทั่วไป

แม้จะมีวิดเจ็ตง่าย ๆ สิ่งต่าง ๆ ก็ผิดพลาด นี่คือปัญหาที่พบบ่อยที่สุดที่นักพัฒนาเผชิญ:

• ค่าไม่อัปเดต: สิ่งนี้มักจะเกิดขึ้นเมื่อค่าที่คุณตั้งค่าไม่ตรงกับ valueExpr ในแหล่งข้อมูลของคุณ ตัวอย่างเช่นหากแหล่งข้อมูลของคุณใช้ id แต่คุณพยายามตั้งค่าข้อความแทนจะไม่มีอะไรเปลี่ยนแปลง
• การแผ่รังสีหลายรายการในรูปแบบเดียว: หากคุณใช้การเชื่อมข้อมูลเดียวกันสำหรับวิดเจ็ตสองตัวพวกเขาสามารถรบกวนกันและกันได้ ใช้การผูกที่ไม่ซ้ำกันหรือแยกต่างหากสำหรับแต่ละกลุ่ม
• ปัญหาการจัดแต่งทรงผมหรือเค้าโครง: บางครั้งการแผ่รังสีไม่ได้ดูภายในรูปแบบหรือกริด ตรวจสอบให้แน่ใจว่าคอนเทนเนอร์มีพื้นที่เพียงพอและ CSS ไม่ได้เอาชนะสไตล์ของ DevExtreme

ปัญหาเหล่านี้ส่วนใหญ่เกิดขึ้นกับค่าที่ไม่ตรงกันหรือขาดการผูก การตรวจสอบ value ของคุณ valueExpr และ dataSource มักจะแก้ปัญหาได้

บทสรุป

วิดเจ็ตรังสี ใน Devextreme เป็นเครื่องมือที่ง่าย แต่สำคัญ คุณใช้ คุณสมบัติค่า เพื่อตั้งค่า ตัวเลือกเริ่มต้น (“ ค่า”) เพื่อเปลี่ยนแปลงในภายหลังและ onvalueChanged เพื่อจับการกระทำของผู้ใช้ ในเชิงมุม, ปฏิกิริยา, vue หรือ jQuery วิธีการเหมือนกัน - ผูกค่าอย่างถูกต้องและใช้งานได้

หากสิ่งที่ไม่ได้อัปเดตให้ตรวจสอบการเชื่อมโยงข้อมูลของคุณและตรวจสอบให้แน่ใจว่าค่าตรงกับแหล่งข้อมูลของคุณ เมื่อคุณตั้งค่าถูกต้องแล้ว Radiogroup กลายเป็นวิธีที่ราบรื่นในการแนะนำผู้ใช้ในการเลือกที่คุณต้องการ