คุณสามารถทำได้ด้วยตารางข้อมูล JavaScript?

บทความนี้ได้รับการสนับสนุนอย่างดีจากเพื่อนรักของเราที่ Progress Kendo UI ซึ่งมุ่งมั่นที่จะมอบเครื่องมือที่จำเป็นสำหรับนักพัฒนาในการควบคุมและเชี่ยวชาญด้านวิวัฒนาการทางเทคโนโลยีที่หล่อหลอมสังคมและโลกของเรา ขอขอบคุณ!

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

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

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

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

เพื่อแก้ไขปัญหาเหล่านี้ คุณจะต้องใช้ไลบรารี่ที่ไม่เพียงแต่สร้างมาให้เป็นแบบเนทีฟเท่านั้น แต่ยังรวมเอาส่วนประกอบเสริมต่างๆ เข้าด้วยกันและเน้นที่ประสบการณ์ผู้ใช้และประสิทธิภาพที่ยอดเยี่ยม เพื่อแสดงคุณสมบัติของตารางข้อมูลในอุดมคติ เราจะใช้ Kendo UI Data Grids เป็นตัวอย่าง ตารางข้อมูลเหล่านี้เป็นหนึ่งในส่วนประกอบมากกว่า 100 รายการที่มีอยู่ในชุดไลบรารีที่เรียกว่า Progress Kendo UI บันเดิลประกอบด้วยไลบรารีคอมโพเนนต์สี่ตัวที่สร้างขึ้นสำหรับเฟรมเวิร์กส่วนหน้าหลายส่วน เหล่านี้คือ Kendo UI สำหรับ Angular, KendoReact, Kendo UI สำหรับ Vue และ Kendo UI สำหรับ jQuery ตัวอย่างที่ให้ไว้ตลอดทั้งงานชิ้นนี้จะนำเสนอกริดจากไลบรารีทั้งสี่นี้

การออกแบบที่ตอบสนอง

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

ตารางข้อมูลสมัยใหม่ควรจะสามารถตอบสนองต่อการเปลี่ยนแปลงการวางแนวและแสดงข้อมูลทั้งหมดได้ดีบนทุกขนาดหน้าจอ ตัวอย่างเช่น Kendo UI Data Grids จะปรับขนาดตามขนาดวิวพอร์ตและจำนวนแถวที่รองรับ ตัวอย่างเช่น ใน Angular Grid คุณสามารถกำหนดความสูงและเส้นตารางจะเลื่อนได้หากเนื้อหาบางส่วนไม่พอดี การตั้งค่าความสูงเกี่ยวข้องกับการระบุค่าสำหรับคุณสมบัติ CSS ความสูงของกริดเท่านั้น และต้องแน่ใจว่าองค์ประกอบหลักมีการตั้งค่าความสูงด้วย ไม่จำเป็นต้องมีการกำหนดค่าอื่น คุณสามารถดูวิธีการดำเนินการนี้ในตารางสต็อกตัวอย่างได้ที่นี่

นอกจากนั้น คุณสามารถเลือกสลับการมองเห็นของคอลัมน์ในตารางในขณะที่ยังคงแสดงข้อมูลที่จำเป็นทั้งหมด คุณทำได้โดยการสร้างคอลัมน์ต่างๆ สำหรับช่วงขนาดหน้าจอต่างๆ และใช้คุณสมบัติ media ในคอลัมน์เพื่อตัดสินใจว่าจะแสดงไว้ที่ใด ตัวอย่างเช่น ในตารางข้อมูลเชิงมุมนี้ สำหรับขนาดหน้าจอที่ใหญ่ขึ้น ( media="(min-width: 450px)" ) คอลัมน์จะแสดงแบบเต็มหน้าจอและมีลักษณะดังนี้

อย่างไรก็ตาม คุณสามารถเลือกที่จะซ่อนราคา สินค้าในสต็อก และคอลัมน์ที่เลิกผลิตแล้วบนจอแสดงผลขนาดกลาง ( media="(min-width: 680px)" ) ควรมีลักษณะดังนี้:

บนจอแสดงผลขนาดเล็ก ( media="(max-width: 450px)" ) คุณสามารถสร้างคอลัมน์กำหนดเองเดียวเพื่อแสดงข้อมูลทั้งหมดที่คล้ายกับสิ่งนี้:

Kendo UI Data Grids ยังรองรับตัวระบุอุปกรณ์ Bootstrap 4 เช่น xs, sm, md, lg และ xl แม้ว่าจะใช้งานง่ายกว่า แต่ก็ไม่หลากหลายเท่าที่ควร เนื่องจากจำกัดจำนวนการสืบค้นที่คุณสามารถรวมไว้ได้ ตัวอย่างเช่น ด้วยเบรกพอยต์ของคุณเอง คุณอาจมีบางอย่างเช่น media="(min-width: 500px) and (max-width: 1200px)" ไม่สามารถรวมตัวระบุหลายตัวกับตัวระบุอุปกรณ์ Bootstrap 4

การปฏิบัติตามข้อกำหนดการช่วยสำหรับการเข้าถึง

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

Kendo UI Data Grids จัดลำดับความสำคัญโดยรองรับมาตรฐานการช่วยสำหรับการเข้าถึงหลัก เช่น WAI-ARIA, Section 508 และ WCAG 2.1 ตัวอย่างเช่น KendoReact ปฏิบัติตามมาตรฐานมาตรา 508 โดยตรวจสอบให้แน่ใจว่าส่วนประกอบส่วนใหญ่สามารถเข้าถึงได้อย่างสมบูรณ์และรองรับการนำทางด้วยแป้นพิมพ์ เป็นไปตามแนวทางการเข้าถึงคีย์บอร์ดของ WCAG โดยการทำให้กริดและคีย์บอร์ดของส่วนประกอบที่ฝังอยู่ทั้งหมดสามารถทำงานได้ เป็นผลให้ React Grid บรรลุระดับความสอดคล้อง WCAG สูงสุดของ AAA ในฐานะที่เป็นส่วนประกอบเว็บ KendoReact Data Grid ตอบสนองข้อกำหนด WAI-RAI เพื่อให้แน่ใจว่าผู้ใช้ที่มีความพิการสามารถโต้ตอบกับมันได้อย่างเพียงพอบนหน้าเว็บ ตัวอย่างเช่น ในตารางข้อมูล React นี้ คุณสามารถนำทางไปยังส่วนประกอบและแถวต่างๆ ได้โดยใช้แป้นพิมพ์

การเลื่อนเสมือน

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

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

Kendo UI รองรับการเลื่อนเสมือนสำหรับข้อมูลทั้งในเครื่องและจากระยะไกล ตัวอย่างเช่น ใน Kendo UI สำหรับ jQuery Grid คุณเปิดใช้งานโดยการตั้งค่าคุณสมบัติ scrollable.virtual ของกริดให้เป็นจริง โดยการตั้งค่านี้ กริดจะโหลดเฉพาะจำนวนรายการที่ระบุโดยคุณสมบัติ pageSize ของแหล่งข้อมูลกริดเท่านั้น คุณสามารถดูวิธีการทำงานนี้ในตารางข้อมูล jQuery ซึ่งใช้ข้อมูลในเครื่อง

 <!DOCTYPE html> <html> <head>...</head> <body> ... <div></div> <script> var dataSource = new kendo.data.DataSource({ pageSize: 20, ... }); $("#grid").kendoGrid({ dataSource: dataSource, scrollable: { virtual: true }, ... }); </script> </body> </html>

การตั้งค่าเดียวกันนี้จะใช้ได้กับข้อมูลระยะไกลตามที่เห็นในตารางข้อมูล jQuery นี้ นอกจากนี้ คุณสามารถใช้การตั้งค่าที่คล้ายกันเพื่อจำลองคอลัมน์ของกริดได้ ถ้าเรกคอร์ดมีคุณสมบัติหลายอย่างที่อาจมีค่าใช้จ่ายสูงในการแสดงผลทั้งหมดในครั้งเดียว ต้องตั้งค่าคุณสมบัติ scrollable.virtual เป็นจริง อย่างไรก็ตาม คอลัมน์การจำลองเสมือนไม่ได้ขึ้นอยู่ pageSize คุณสมบัติขนาดหน้า ตัวอย่างนี้แสดงให้เห็นถึงคุณลักษณะนี้

การส่งออก PDF และ Excel

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

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

Kendo UI Data Grids ให้การส่งออกข้อมูลจากกริดในสองรูปแบบ: PDF และ Excel ตัวอย่างเช่น ใน Kendo UI สำหรับ Vue Data Grid ในการประมวลผลการส่งออก PDF คุณจะใช้องค์ประกอบ GridPDFExport ด้วยวิธีการ save คุณจะต้องส่งข้อมูลที่คุณต้องการรวมไว้ในการส่งออก PDF ข้อมูลสามารถแบ่งหน้าหรือทั้งชุดได้

 <template> <button @click="exportPDF">Export PDF</button> <pdfexport ref="gridPdfExport"> <Grid :data-items="items"></Grid> </pdfexport> </template> <script> import { GridPdfExport } from '@progress/kendo-vue-pdf'; import { Grid } from '@progress/kendo-vue-grid'; export default { components: { 'Grid': Grid, 'pdfexport': GridPdfExport }, data: function () { return { products: [], ... }; }, methods: { exportPDF: function() { (this.$refs.gridPdfExport).save(this.products); }, ... }, ... }; </script>

คอมโพเนนต์ GridPDFExport ช่วยให้คุณสามารถระบุขนาดหน้าสำหรับการส่งออก ระยะขอบของหน้า วิธีการปรับขนาดตารางบนหน้า ฯลฯ ซึ่งมีประโยชน์สำหรับการปรับแต่งกริดที่ใหญ่ขึ้นเพื่อให้พอดีกับหน้า PDF คุณจะส่งต่อสิ่งเหล่านี้เป็นคุณสมบัติไปยังส่วนประกอบ นี่คือตัวอย่าง:

 <pdfexport ref="exportPDF" :margin="'2cm'" :paper-size="'a4'" :scale="0.5"> <Grid :data-items="products"></Grid> </pdfexport>

คุณสามารถเลือกปรับแต่งการส่งออกเพิ่มเติมได้โดยใช้เทมเพลต ภายในเทมเพลต คุณสามารถเพิ่มสไตล์ ระบุส่วนหัวและส่วนท้าย เปลี่ยนเลย์เอาต์ของเพจ และเพิ่มองค์ประกอบใหม่ได้ คุณจะใช้ CSS สำหรับการจัดรูปแบบ เมื่อคุณกำหนดค่าเทมเพลตเสร็จแล้ว คุณจะต้องระบุโดยใช้คุณสมบัติ page-template ขององค์ประกอบ GridPDFExport

หากต้องการส่งออกไฟล์ Excel จาก Kendo UI Vue Grid คุณจะต้องใช้คอมโพเนนต์ ExcelExport ด้วยเมธอด saveExcel คุณจะส่งชื่อไฟล์ ข้อมูลกริด คอลัมน์ที่จะแสดง ฯลฯ ไปยังไฟล์นั้น และเรียกใช้เมธอดเพื่อสร้างไฟล์ ตารางข้อมูล Vue นี้เป็นตัวอย่างที่ดีของวิธีการส่งออก Excel ด้วย Kendo UI Vue Grid

คอลัมน์ปักหมุด

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

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

การตั้งค่าคอลัมน์ติดหนึบใน Kendo UI จำเป็นต้องมีการตั้งค่าขั้นต่ำ ตัวอย่างเช่น ใน Kendo UI Vue Grid คุณจะต้องตั้งค่าคุณสมบัติ locked ของคอลัมน์เป็นจริงเพื่อให้ติดหนึบ ในตารางข้อมูล Vue นี้ คอลัมน์ ID และคอลัมน์ที่ยกเลิกจะถูกทำให้ติดหนึบโดยการตั้งค่าคุณสมบัติที่ locked ในตัวอย่างด้านล่าง ID และอายุจะถูกล็อค

 <template> <grid :data-items="people" :columns = "columns"> </grid> </template> <script> import { Grid } from '@progress/kendo-vue-grid'; import { people } from './people' export default { components: { 'grid': Grid }, data: function () { return { people: this.getPeople(), columns: [ { field: 'ID', title: 'ID', locked: true}, { field: 'FirstName', title: 'FirstName' }, { field: 'LastName', title: 'LastName' }, { field: 'Age', title: 'Age', locked: true}, ] }; }, methods: { getPeople() { return people; } } }; </script>

กำลังแก้ไข

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

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

Kendo UI Data Grids ช่วยให้แก้ไขในสองรูปแบบ: แบบอินไลน์และการใช้ป๊อปอัป ด้วยการแก้ไขแบบอินไลน์ ข้อมูลทั้งหมดจะได้รับการแก้ไขภายในกริด เมื่อเซลล์ถูกคลิก เซลล์จะสามารถแก้ไขได้ ในป๊อปอัป แบบฟอร์มป๊อปอัปใช้เพื่อแก้ไขแต่ละรายการทีละรายการ ในตัวอย่าง Kendo UI สำหรับตาราง jQuery การทำให้ตารางแก้ไขได้มีสามขั้นตอน: การตั้งค่าการกำหนดค่าที่แก้ไขได้ของกริด การสร้างแหล่งข้อมูล และการกำหนดค่าการดำเนินการ CRUD บนแหล่งข้อมูล ขั้นตอนไม่กี่ขั้นตอนเหล่านี้ช่วยลดความซับซ้อนที่เกี่ยวข้องกับการตั้งค่าการแก้ไขแบบกลุ่ม การกำหนดค่าการแก้ไขป๊อปอัปทำตามขั้นตอนเดียวกันแต่มีตัวเลือกต่างกันในตอนเริ่มต้น

นอกจากรองรับการแก้ไขแล้ว Kendo UI สำหรับ jQuery Grid ยังเปิดใช้งานการตรวจสอบอินพุต ตัวอย่างเช่น คุณสามารถป้อนข้อมูลที่จำเป็นหรือบังคับใช้ความยาวขั้นต่ำได้ นอกจากนั้น คุณสามารถสร้างการควบคุมอินพุตแบบกำหนดเองได้ การควบคุมการป้อนข้อมูลไม่ได้จำกัดอยู่เพียงช่องข้อความเท่านั้น คุณสามารถใช้รายการดรอปดาวน์ ช่องกาเครื่องหมาย ตัวเลือกวันที่ แถบเลื่อนช่วง ฯลฯ ซึ่งสามารถเป็นได้ทั้งแบบอินไลน์และในป๊อปอัป ในตารางข้อมูล jQuery นี้ ฟิลด์ Category เป็นแบบดรอปดาวน์ การตรวจสอบยังแสดงให้เห็นในตัวอย่างเดียวกัน ฟิลด์ราคาต่อหน่วยมีการตรวจสอบความถูกต้อง เพื่อให้แน่ใจว่าค่าที่น้อยที่สุดคือ 1

ส่วนประกอบเสริม

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

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

บทสรุป

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

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

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