เลือกใหม่

การตั้งค่าเริ่มต้น

Data source - โมเดลข้อมูลที่จะใช้เพื่อแสดงตัวเลือกแบบเลื่อนลงจาก

Mode - เลือก Multiple รายการเพื่อให้สามารถเลือกได้หลายตัวเลือกจากเมนูแบบเลื่อนลง มิฉะนั้น ควรใช้โหมด Single

การตั้งค่ารูปลักษณ์และความรู้สึก

Label (ไม่บังคับ) เพื่อใช้แสดงป้ายกำกับส่วนประกอบ

ตัว Placeholder (ไม่บังคับ) ที่จะใช้เพื่อแสดงตัวยึดของส่วนประกอบ

Name (บังคับ) - ชื่อของส่วนประกอบ

Size (บังคับ) - ขนาดของส่วนประกอบ ถูกตั้งค่าเป็นค่าเริ่มต้นเมื่อสร้างส่วนประกอบ

Search (บังคับ) - เพื่อให้สามารถค้นหาภายในตัวเลือกแบบเลื่อนลงที่มีอยู่ ถูกปิดโดยปริยาย

Clear icon (จำเป็น) - แสดงไอคอนตัวเลือกที่ชัดเจนหากเปิดใช้งาน ถูกปิดโดยปริยาย

Disabled ใช้งาน (บังคับ) - ทำให้คอมโพเนนต์ถูกปิดใช้งานหากเปิดอยู่ ถูกปิดโดยปริยาย

Visible ได้ (จำเป็น) - ทำให้ส่วนประกอบมองเห็นได้หากเปิดใช้งาน เปิดใช้งานโดยค่าเริ่มต้น

ข้อมูล

Data source - โมเดลข้อมูล ที่ใช้งานอยู่ กำหนดค่าได้เฉพาะเมื่อสร้างส่วนประกอบเท่านั้น

Label - ฟิลด์ โมเดล ข้อมูลที่จะแสดงในตัวเลือกแบบเลื่อนลงเดียว

ทริกเกอร์เวิร์กโฟลว์

• onChange - เริ่มทำงานเมื่อตัวเลือกดร็อปดาวน์เปลี่ยนไป
• onFocus - เริ่มทำงานเมื่อองค์ประกอบ Relselect ถูกโฟกัส
• onBlur - เริ่มทำงานเมื่อองค์ประกอบ Relselect ถูกเบลอ
• onCreate - เริ่มทำงานเมื่อส่วนประกอบถูกสร้างขึ้น
• onShow - เริ่มทำงานเมื่อส่วนประกอบแสดงขึ้น
• onHide - เริ่มทำงานเมื่อส่วนประกอบถูกซ่อน
• onSearch - เริ่มทำงานเมื่อผู้ใช้ค้นหาด้วยตัวเลือกที่มีอยู่
• onOpen - เริ่มทำงานในเมนูแบบเลื่อนลง
• onLoadAll - เริ่มทำงานเมื่อดาวน์โหลดตัวเลือกแบบเลื่อนลงทั้งหมด

การกระทำของคอมโพเนนต์

RelSelect Get Properties

รับคุณสมบัติของส่วนประกอบ

พารามิเตอร์ อินพุต :

• Component Id [string] - ตัวระบุส่วนประกอบของ RelSelect;

พารามิเตอร์ ขา ออก:

• Selected [Data Model type/ Data Model Array type] - ตัวเลือกที่เลือก จะแสดงในกระบวนการทางธุรกิจเมื่อมีการระบุรหัสคอมโพเนนต์เท่านั้น
• Data [Data Model Array type] - อาร์เรย์ขององค์ประกอบ Data Model ที่จะใช้ มีอยู่ในกระบวนการทางธุรกิจเมื่อมีการระบุรหัสคอมโพเนนต์เท่านั้น
• Label [string] - ป้ายกำกับส่วนประกอบ
• ตัว Placeholder [string] - ตัวยึดตำแหน่งส่วนประกอบ
• Allow Clear [boolean] - อนุญาตให้ล้างการเลือกหากเป็นจริง
• Disable [boolean] - ปิดใช้งานส่วนประกอบหากเป็นจริง
• Tooltip [string] - สตริงคำแนะนำเครื่องมือ;
• Required Mark [boolean] - แสดงเครื่องหมายที่จำเป็นหากเป็นจริง
• Debounce (ms) [integer] - หน่วงเวลาเพื่อตรวจสอบความถูกต้องของค่า;
• Validate Icon [boolean ] - ไอคอนที่จะแสดงในการตรวจสอบค่า;
• Validate Status [Status type] - สถานะที่จะแสดงในการตรวจสอบความถูกต้องของค่า;
• Validate Message [string] - ข้อความที่จะแสดงในการตรวจสอบความถูกต้องของค่า

RelSelect Set Properties

ตั้งค่าคุณสมบัติของส่วนประกอบ

พารามิเตอร์ อินพุต :

• Component Id [string] - ตัวระบุส่วนประกอบของ RelSelect ;
• Label [string] - ป้ายกำกับส่วนประกอบ
• ตัว Placeholder [string] - ตัวยึดตำแหน่งส่วนประกอบ
• Allow Clear [boolean] - อนุญาตให้ล้างการเลือกหากเป็นจริง
• Disable [boolean] - ปิดใช้งานส่วนประกอบหากเป็นจริง
• Tooltip [string] - สตริงคำแนะนำเครื่องมือ;
• Required Mark [boolean] - แสดงเครื่องหมายที่จำเป็นหากเป็นจริง
• Debounce (ms) [integer] - หน่วงเวลาเพื่อตรวจสอบความถูกต้องของค่า;
• Validate Icon [boolean] - ไอคอนที่จะแสดงในการตรวจสอบความถูกต้องของค่า;
• Validate Status [Status type] - สถานะที่จะแสดงในการตรวจสอบความถูกต้องของค่า;
• Validate Message [string] - ข้อความที่จะแสดงในการตรวจสอบความถูกต้องของค่า

RelSelect Update Properties

อัพเดตคุณสมบัติของคอมโพเนนต์

พารามิเตอร์ อินพุต :

• Selected [Data Model type/ Data Model Array type] - ตัวเลือกที่เลือก จะแสดงในกระบวนการทางธุรกิจเมื่อมีการระบุ Component ID เท่านั้น
• Data [Data Model Array type] - อาร์เรย์ขององค์ประกอบ Data Model ที่จะใช้ มีอยู่ในกระบวนการทางธุรกิจเมื่อมีการระบุ Component ID เท่านั้น
• Component Id [string] - ตัวระบุส่วนประกอบของ RelSelect ;
• Label [string] - ป้ายกำกับส่วนประกอบ
• ตัว Placeholder [string] - ตัวยึดตำแหน่งส่วนประกอบ
• Allow Clear [boolean] - อนุญาตให้ล้างการเลือกหากเป็นจริง
• Disable [boolean] - ปิดใช้งานส่วนประกอบหากเป็นจริง
• คำแนะนำ Tooltip [string] - สตริงคำแนะนำเครื่องมือ;
• Required Mark [boolean] - แสดงเครื่องหมายที่จำเป็นหากเป็นจริง
• Debounce (ms) [integer] - หน่วงเวลาเพื่อตรวจสอบความถูกต้องของค่า;
• Validate Icon [boolean] - ไอคอนที่จะแสดงในการตรวจสอบความถูกต้องของค่า;
• Validate Status [Status type] - สถานะที่จะแสดงในการตรวจสอบความถูกต้องของค่า;
• Validate Message [string] - ข้อความที่จะแสดงในการตรวจสอบความถูกต้องของค่า

ตัวอย่างการใช้งาน

จำเป็นต้องดาวน์โหลดตัวเลือกแบบหล่นลงจากเซิร์ฟเวอร์เพื่อดู

ตรรกะควรเป็นดังนี้:

1. รับ Data Model Array ( คำขอเซิร์ฟเวอร์ GET ) จากการสร้างส่วนประกอบ RelSelect ( onCreate )

2. อัปเดตข้อมูลแบบเลื่อนลง ( RelSelect Update Properties )