เลือกใหม่

คลิกเพื่อคัดลอก

เลือกส่วนประกอบเพื่อเลือกค่าจากโมเดลข้อมูล


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

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 Get Properties

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 Set Properties

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] - ข้อความที่จะแสดงในการตรวจสอบความถูกต้องของค่า

RelSelect Get Properties


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

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

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

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

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