ส่วนประกอบสำหรับตัวเลือก

แทนที่จะใช้ ID ใน URL คุณสามารถสร้างการกรองโดยใช้คอมโพเนนต์ Select พิเศษที่สามารถเลือกประเทศจากรายการได้ ก่อนหน้านี้ เราได้ใช้องค์ประกอบ Relselect ไปแล้ว และตรรกะของการทำงานก็คล้ายกันมาก แต่ต้องขอบคุณ Select ที่เราไม่เพียงแต่เสนอตัวเลือกจากประเทศที่มีทั้งหมดเท่านั้น แต่ยังเพิ่มตัวเลือกของเราเองได้อีกด้วย

Select ส่วนประกอบ

ลองดูที่การตั้งค่า Select ตัวเลือกที่จะกำหนดเมืองจากประเทศที่ควรอยู่ในตารางและความสามารถในการแสดงเมืองที่มีอยู่ทั้งหมดโดยทั่วไปได้ถูกเพิ่มเข้ามา

เมื่อสร้างส่วนประกอบ Select จะต้องเต็มไปด้วยตัวเลือกที่จะทำการเลือก ในการทำเช่นนี้ เช่นเดียวกับใน Relselect คุณต้องได้รับรายชื่อประเทศทั่วไป แต่เราจะไม่ส่งรายการนี้ไปที่ Select โดยตรง แต่จะแปลงให้เป็นตัวเลือกที่มี ซึ่งแต่ละรายการจะแสดงเป็นโมเดล Select Option ดังนั้นเราจึงประกาศอาร์เรย์ Select Options เป็นตัวแปรและกรอกข้อมูลที่จำเป็นในลูป

ในตัวอย่างนี้ ช่อง Select Options ที่จำเป็นสำหรับเราคือ Label (ข้อความของตัวเลือกที่เสนอ) และ Value (ตัวระบุที่เป็นตัวเลข) ตั้งค่าเหล่านี้เป็นชื่อของประเทศและ ID ของประเทศนั้น

เมื่อการวนซ้ำเสร็จสิ้น เราควรสร้างและเพิ่มอีกหนึ่งตัวเลือกที่จะแสดงเมืองที่มีอยู่ทั้งหมดโดยไม่ต้องกรองตามประเทศ มาตั้งค่า Label = World และ Value = 0 กัน

เมื่อคุณเลือกตัวเลือกใดๆ ทริกเกอร์ Select onChange จะเริ่มทำงาน ลองใช้เพื่อค้นหาตัวเลือกที่เลือกและเขียนไปยังตัวแปรส่วนกลางใหม่ Country selected ในกรณีนี้ จำเป็นต้องตรวจสอบเพิ่มเติม และหากเลือกตัวเลือกสุดท้าย (เมืองที่มีทั้งหมด) ค่าของตัวแปรนี้ควรตั้งค่าเป็นว่าง ( null )

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

ตอนนี้เราสามารถเลือกเมืองที่จะแสดงในตาราง

ส่วนประกอบ Dropdown

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

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

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

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

สำหรับองค์ประกอบตารางที่ซ้ำกัน Component ID ประกอบด้วยสองส่วน โดยคั่นด้วยเครื่องหมาย "-" ส่วนแรกคือรหัสส่วนประกอบมาตรฐาน แต่ส่วนที่สองเป็นเพียง ID ของเร็กคอร์ด การเพิ่มเข้าไปทำให้ตัวระบุของส่วนประกอบที่ซ้ำกันไม่ซ้ำกัน

รู้อย่างนี้แล้วเราก็ต้องได้รับ ID นี้ ดังนั้นเราจะแบ่งสตริงออกเป็นส่วน ๆ ( Split string ) และค้นหาค่าของส่วนที่สอง ( index = 1 )

ในขั้นตอนต่อไป เราต้องค้นหาว่าตัวเลือกใดถูกเลือก

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

ขณะนี้การลบบันทึกออกจากฐานข้อมูลได้รับการปกป้องจากการคลิกโดยไม่ตั้งใจ