การใช้ตารางในเว็บแอปพลิเคชัน

Table set properties ตารางและบล็อก Table update properties ถูกใช้เพื่อออกแบบตาราง

เมื่อมองแวบแรก บล็อกทั้งสองนี้ดูเหมือนจะเหมือนกัน ความแตกต่างคือวิธีการทำงาน:

บล็อก Table Set Properties เปลี่ยนการตั้งค่าปัจจุบันอย่างสมบูรณ์ แม้ว่าคุณจะตั้งค่าช่องป้อนข้อมูลเพียงช่องเดียว ช่องทั้งหมดจะเปลี่ยนไป พวกเขาจะว่างเปล่า บล็อก Table Update Properties จะเปลี่ยนเฉพาะเขตข้อมูลที่ระบุ ดังนั้นจึงเป็นทางออกที่ดีหากคุณต้องการเปลี่ยนการตั้งค่าตารางเพียงบางส่วน

มาดูกันว่าจะใช้การตั้งค่าการแสดงผลแบบใดกับตารางได้บ้าง

การตั้งค่าถูกตั้งค่าโดยใช้ฟิลด์อินพุตในบล็อก คุณสมบัติ Table set propertiesTable update properties มีฟิลด์ต่อไปนี้:

• Component ID – กำหนดตารางที่จะใช้การเปลี่ยนแปลง;
• Title ตาราง;
• Style – ปรับขนาดแถวในตาราง
• การ Pagination – รับผิดชอบตารางหลายหน้า สามารถใช้ในตารางที่มีรายการจำนวนมากเพื่อไม่ให้โอเวอร์โหลด
• มี Bordered – เส้นขอบในตาราง
• Visible ได้ – แสดง/ซ่อนตาราง
• Loading – สถานะการโหลด; ตัวเลือกนี้แสดงให้ผู้ใช้เห็นว่ามีการเปลี่ยนแปลงในตาราง

การตั้งค่าต่อไปนี้ใช้ได้เมื่อเปิดใช้งาน pagination เท่านั้น:

• Current page – การเลือกหน้าของตารางที่จะแสดง
• Records for page – จำนวนบันทึกต่อหน้า;
• Total records ทั้งหมด – จำนวนระเบียนทั้งหมดในตาราง

ตัวอย่างการปฏิบัติ

ลองใช้ตารางอย่างง่ายสำหรับโมเดล "งาน"

ข้อมูลถูกโหลดจากฐานข้อมูลลงในตารางโดยใช้ทริกเกอร์ onShow เรามาตั้งค่าการแสดงผลกันก่อน สำหรับสิ่งนี้ ให้ใช้บล็อก Table set properties

ใน Component ID เลือกตารางที่ต้องการ

ใน Title ให้ระบุชื่อตาราง – To Do List.

กำหนด Style - กลาง

เปิดใช้การ Pagination.

เปิดใช้แบบมี Bordered

จำเป็นต้องเปิด Visible ไม่งั้นจะไม่เห็นตาราง

เปิดการ Loading.

ตั้งค่า Current page เป็น 1 เพื่อดูหน้าแรก

Records for page ถูกจำกัดไว้ที่ 5

Total records ถูกกำหนดเป็น 10 เป็นต้น

สามารถบันทึกการตั้งค่าทั้งหมดได้แล้ว

เพิ่มเติมเกี่ยวกับ Loading

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

ดังนั้นจำเป็นต้องมีกระบวนการทางธุรกิจที่จะเปลี่ยนคุณสมบัติของตารางหลังจากโหลดข้อมูล BP เสร็จสิ้น

บล็อกการโหลดข้อมูลลงท้ายด้วยบล็อกการ Table update data และมีทริกเกอร์ onDataUpdate ที่จะทำงานหลังจากอัปเดตตารางแล้ว

กำหนด BP ใหม่ให้กับมัน ใช้บล็อก Table update properties เพื่อเปลี่ยนเพียงหนึ่งฟิลด์และปิดการโหลด

สามารถบันทึกการเปลี่ยนแปลงทั้งหมด และตารางจะแสดงตามต้องการ

ทริกเกอร์ onFilter

มาดูทริกเกอร์ onFilter ให้ละเอียดยิ่งขึ้น ใช้งานได้เฉพาะเมื่อเปิดใช้งานการแบ่งหน้าเมื่อมีการเปลี่ยนผ่านหน้าของตาราง มีฟิลด์เพิ่มเติมสองฟิลด์:

• _limit – ส่งจำนวนของเรกคอร์ดที่แสดงในตารางในขณะที่เรียกเลขหน้า
• _offset – ระบุว่าเรกคอร์ดใดที่จะเริ่มการประมวลผล

มาตั้งค่า BP เพื่อสาธิตวิธีการทำงานของทริกเกอร์ onFilter

ทริกเกอร์ onFilter ทำงานเมื่อมีการเปลี่ยนจากหน้าหนึ่งไปยังอีกหน้าหนึ่งในตารางหลายหน้า (การแบ่งหน้า)

มาดูตารางที่มีสามหน้า แต่ละหน้ามีห้าระเบียน

สร้าง BP ที่จะแสดงข้อมูลจากฟิลด์ onFilter ในอินเทอร์เฟซ

ในการดำเนินการนี้ ให้แปลง _limit และ _offset โดยใช้บล็อก to string และส่งผ่านผลลัพธ์ไปยังบล็อกการ notification

เมื่อเปลี่ยนจากหน้าแรกไปยังหน้าที่สอง ข้อความสองข้อความจะปรากฏขึ้น: _limit - 5 และ _offset - 5 หมายความว่ามี 5 ระเบียนในหน้าก่อนหน้าของตาราง (_limit), และขณะนี้ตารางกำลังประมวลผลระเบียนที่เริ่มต้นด้วย อันดับที่ 5 (_offset) . หากไปที่หน้าที่ 3 จะมีข้อความดังนี้ _limit - 5 (เนื่องจากหน้าที่แล้วมี 5 ระเบียน) และ _offset - 10 (เนื่องจากตารางประมวลผลระเบียนที่เริ่มต้นจาก 10)

ทริกเกอร์ onRowClick และ onRowDoubleClick triggers.

มาดูทริกเกอร์ onRowClick และ onRowDoubleClick ทำงานเมื่อมีการคลิกหรือดับเบิลคลิกที่แถว ทริกเกอร์เหล่านี้มีฟิลด์ Record ID ที่เก็บ ID ของเรกคอร์ดที่คลิก ซึ่งมีประโยชน์สำหรับการสร้างตารางที่เชื่อมโยงและสร้างลำดับชั้น

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

จำเป็นต้องใช้ To string และบล็อก Notification ใน To string ที่ส่งค่าของฟิลด์ Record ID และหลังจากการแปลง ให้ส่งค่าผลลัพธ์ไปยังฟิลด์ Title ของบล็อก Notification