ขณะนี้มีการควบคุมตารางข้อมูล JavaScript จำนวนมากในตลาดรวมถึงโอเพนซอร์สบุคคลที่สามและผลิตเองและขาย อาจกล่าวได้ว่า FlexGrid ของ Wijmo เป็นตัวควบคุมตารางที่ดีที่สุดในปัจจุบันปรับให้เข้ากับ Angular 2
ข้อกำหนดพื้นฐานของตารางข้อมูลเชิงมุม 2: เล็กกว่าเร็วขึ้นและคุ้นเคยมากขึ้น
ในการใช้แบบฟอร์ม Angular 2 ก่อนอื่นคุณต้องเข้าใจข้อกำหนดพื้นฐานของแบบฟอร์ม FlexGrid เริ่มต้นในปี 1996 เมื่อใช้การควบคุมที่เขียนขึ้นสำหรับ Visual Basic ถูกใช้ใน C ++ ในช่วงหลายปีที่ผ่านมามีการพัฒนาและสมบูรณ์แบบในหลายแพลตฟอร์มโดยเฉพาะแพลตฟอร์ม JavaScript FlexGrid ได้รับการตั้งชื่อเนื่องจากแนวคิดของ Flex และการควบคุมควรมีชุดคุณลักษณะสำคัญที่จำเป็นที่สุดและความสามารถที่ปรับขนาดได้ ฟังก์ชั่นพื้นฐานในตัวเช่น: การเรียงลำดับการจัดกลุ่มการแก้ไขและสิ่งแฟนซีอื่น ๆ สามารถให้ผ่านส่วนขยายเสริม สิ่งนี้จะช่วยให้การควบคุมมีความคล่องตัวและมีประสิทธิภาพในขณะที่ให้ลูกค้าสามารถปรับแต่งได้อย่างลึกซึ้ง
ตัวบ่งชี้ที่สำคัญอีกประการหนึ่งคือประสิทธิภาพ FlexGrid เปรียบเทียบกับผลิตภัณฑ์อื่น ๆ อย่างต่อเนื่องเพื่อให้แน่ใจว่าเราเร็วพอ แนวคิด Flex ทำให้ไฟล์ของเราเล็กพอ (ประมาณ 25K หลังจากการบีบอัด) และเราไม่มีการพึ่งพากรอบอื่น ๆ การปรับปรุงประสิทธิภาพที่สำคัญที่สุดคือผ่านการแสดงผลเสมือนจริง FlexGrid Virtualizes DOM ทั้งหมดวาดเฉพาะเซลล์ที่ต้องเต็มไปด้วยวิวพอร์ต (และบัฟเฟอร์บางตัวเพื่อการเลื่อนที่ราบรื่น) ในแต่ละครั้ง เมื่อตารางเลื่อนเซลล์ (องค์ประกอบ DOM) จะถูกรีไซเคิล การเรนเดอร์เสมือนหมายความว่ากริดสามารถผูกข้อมูลหลายล้านข้อมูลใน 1 วินาที
ในที่สุดหนึ่งในคุณสมบัติที่สำคัญที่สุดคือการดำเนินการที่คุ้นเคย FlexGrid ขึ้นอยู่กับพฤติกรรมการโต้ตอบทั้งหมดใน Excel ซึ่งอาจเป็นวิธีที่ใช้กันมากที่สุดสำหรับผู้ใช้ในการใช้งานกริด ผู้คนต้องการได้รับพฤติกรรมที่แน่นอนเมื่อเลื่อนคลิกโดยเฉพาะอย่างยิ่งเมื่อใช้คำสั่งแป้นพิมพ์ (รวมถึงฟังก์ชั่นคลิปบอร์ด) แทนที่จะคิดค้นตัวเอง เราเลียนแบบ Excel เพื่อให้ผู้ใช้รู้สึกสะดวกสบายในการใช้ตารางของเราและกริดอื่น ๆ อีกมากมายได้ประดิษฐ์พฤติกรรมของตัวเองหรือไม่สนับสนุนพฤติกรรมการเลื่อนและคีย์บอร์ดอย่างเต็มที่ ตัวอย่างเช่นเมื่อคุณเลือกแถวข้อมูลและค้างไว้ลูกศรลงตารางจำนวนมากจะไม่แสดงพฤติกรรมที่คุณคาดหวัง
ใช้ภาษามาร์กอัปเพื่อประกาศการควบคุม UI
ตอนนี้ลองมาดูข้อดีของ FlexGrid ภายใต้ AngularJS ประโยชน์ที่ใหญ่ที่สุดภายใต้ AngularJS คือภาษามาร์กอัปของ FlexGrid: ส่วนประกอบเชิงมุมให้ความสามารถในการประกาศการควบคุมโดยใช้ภาษามาร์กอัป เครื่องหมายประกาศเป็นไปตามรูปแบบการออกแบบ MVVM อย่างดีและเราสามารถกำหนดค่าส่วนประกอบของเราทั้งหมดผ่านมุมมอง (ภาษามาร์กอัป)
FlexGrid รองรับการใช้ภาษามาร์กอัพเชิงมุมเพื่อประกาศ API ที่สมบูรณ์ คุณสามารถใช้ภาษามาร์กอัปเพื่อตั้งค่าคุณสมบัติแนบเหตุการณ์และกำหนดค่าส่วนประกอบย่อย (เช่นคอลัมน์)
นี่คือตัวอย่างที่แสดงให้เห็นถึงวิธีการกำหนดค่า FlexGrid โดยใช้ภาษา Markup Angular2
<wj-flex-grid [itemssource] = "data"> <wj-flex-grid-column [header] = "'ประเทศ'" [การผูก] = "'ประเทศ'" [ความกว้าง] = "'*'"> </wj-flex-grid-column> <wj-flex-grid-column [การเชื่อมโยง] = "'วันที่'"> </wj-flex-grid-column> <wj-flex-grid-column [ส่วนหัว] = "'รายได้'" [การผูก] = "'จำนวน'" [รูปแบบ] = "'n0'"> </wj-flex-grid-column> <wj-flex-grid-column [binding] = "'active'"> </wj-flex-grid-column> </wj-flex-grid>
นี่คือผลลัพธ์ที่เราได้รับจากภาษามาร์กอัปที่เราประกาศ
ส่วนประกอบกริดอื่น ๆ อีกมากมายให้ความสามารถในการประกาศการควบคุมโดยใช้ภาษามาร์กอัปซึ่งส่งผลให้เกิดการกำหนดค่าทั้งหมดที่ต้องทำโดยใช้ JavaScript (ViewModel) สิ่งนี้ทำให้มุมมองและ ViewMode สับสนบังคับให้นักพัฒนาใช้ JavaScript เพื่อเปลี่ยน UI ควบคุม เมื่อทำเช่นนี้คุณจะพลาดประโยชน์ทั้งหมดของการผูกเชิงมุม เราคิดว่าการทำเช่นนั้นเป็นการต่อต้านรูปแบบ ดูความแตกต่างด้านล่าง:
<ag-grid-ng2 #aggrid // รายการที่ผูกไว้กับคุณสมบัติบนคอนโทรลเลอร์ [gridoptions] = "gridoptions"
ด้วยการใช้ส่วนประกอบที่รองรับภาษามาร์กอัปอย่างเต็มที่คุณสามารถรับการสนับสนุนรูปแบบ MVVM เต็มรูปแบบและสร้างแอปพลิเคชันเช่นแพลตฟอร์มการพัฒนาอื่น ๆ (ASP.NET, Java, Silverlight, Flex)
ประกาศเทมเพลตประเภทเซลล์ที่นำกลับมาใช้ใหม่ได้
ในการประกาศสมาชิก FlexGrid ใด ๆ ที่ใช้ภาษามาร์กอัปเรายังให้บริการเทมเพลตเซลล์ เทมเพลตเซลล์เป็นวิธีการประกาศเทมเพลตที่สามารถใช้ซ้ำได้สำหรับเซลล์ประเภทต่าง ๆ เทมเพลตเซลล์รองรับแท็กเชิงมุมที่ถูกต้องใด ๆ รวมถึงนิพจน์ที่ถูกผูกไว้ HTML และส่วนประกอบอื่น ๆ ประเภทเทมเพลตเซลล์ ได้แก่ : Title Cell, Edit Mode Cell, Mode Mode Cell ฯลฯ
ผ่านเทมเพลตเซลล์ FlexGrid เป็นตัวแทนสำหรับการสร้างส่วนประกอบ คุณไม่เพียงสามารถประกาศ FlexGrid ในภาษามาร์กอัป แต่ยังใช้ไวยากรณ์เชิงมุมทั้งหมดในทุกเซลล์ มาดูกันว่าแท็กเทมเพลตเซลล์ FlexGrid มีประสิทธิภาพเพียงใด
<wj-flex-grid [itemsSource] = "data1" [อนุญาตให้] = "false" [deferResizing] = "true"> <เทมเพลต wjflexGridCellTemplate [celltype] = "topleft '" ngif = "CustomToTertflate *ngif = "customrowheader" #cell = "เซลล์"> {{cell.row.index}} </template> <wj-flex-grid-column ส่วนหัว = "ประเทศ" binding = "country"> <template wjflexGridCellTemplate src = "ทรัพยากร/{{item.country}}. png"/> {{item.country}} </template> <เทมเพลต wjflexGridCellTemplate [celltype] = "'groupheader'" ngif = [(ngmodel)] = "cell.row.iscollapsed"/> {{item.name}} ({{item.items.length}} รายการ) </template> </wj-flex-grid-column> <เทมเพลต wjflexGridCellTemplate [CellType] = "'ColumnHeader'" *ngif = "CustomColumnHeader"> <อินพุตประเภท = "ช่องทำเครื่องหมาย" [(ngmodel)] = "uictx.highlightdownloads" /> การดาวน์โหลด < /template> < *ngif = "customCell" #item = "item"> <span [ngstyle] = "{color: uictx.highlightdownloads? (item.downloads> 10,000? [CellType] = "'Group'" *ngif = "CustomGroup" #cell = "cell"> sum = {{cell.value | หมายเลข: '1.0-0'}} </template> </wj-flex-grid-column> </wj-flex-grid>ผลลัพธ์ที่เราประกาศเป็นเทมเพลตเซลล์
เทมเพลตเซลล์ที่ใช้ซ้ำได้ใน Angular2
อีกครั้งเพื่อให้ได้เอฟเฟกต์นี้ในการควบคุมตารางอื่น ๆ คุณต้องแก้ไขไฟล์ JavaScript และเขียนใน ViewModel
อัปเดตการควบคุมโดยอัตโนมัติโดยใช้การเชื่อมโยงข้อมูล
ฉันเชื่อว่าประโยชน์ที่มีประสิทธิผลมากที่สุดของ Angular คือการแสดงออกที่มีผลผูกพันซึ่งช่วยให้การควบคุมที่เราสร้างขึ้นเพื่อตอบสนองต่อการเปลี่ยนแปลงข้อมูลโดยอัตโนมัติทำให้เราจากตัวจัดการเหตุการณ์ที่น่าเบื่อและการดำเนินงาน DOM
คุณสมบัติทั้งหมดของการเชื่อมโยงข้อมูลการสนับสนุน FlexGrid นอกจากนี้เรายังมีการเชื่อมโยงสองทางสำหรับคุณสมบัติบางอย่างที่ต้องมีการเชื่อมข้อมูลสองทาง โดยไม่ต้องเขียนโค้ดใด ๆ คุณสามารถผูกส่วนประกอบเพื่อจัดการเหตุการณ์และโต้ตอบกับข้อมูลโมเดล
การเชื่อมโยงข้อมูลเป็นพลเมืองชั้นหนึ่งในแพลตฟอร์มการพัฒนาใด ๆ (Java, .NET) และ Angular ทำให้ง่ายขึ้นและรองรับทั้งการเชื่อมโยงข้อมูลแบบทางเดียวและแบบสองทาง
TypeScript: 2 วันของการทำงานกับ Angular
การควบคุม FlexGrid และ Wijmo ทั้งหมดจะถูกเขียนเป็น typeScript เรามีประวัติยาวนานที่ทำงานบนแพลตฟอร์ม Microsoft ดังนั้นเมื่อ TypeScript กลายเป็นผู้ใหญ่เรามีความรู้สึกถึงบ้าน TypeScript ให้ประสบการณ์ที่คล้ายคลึงกับการเขียนคลาส C: คลาส, มรดก, การพิมพ์ที่แข็งแกร่ง, การตรวจสอบประเภท, การตรวจสอบข้อผิดพลาดเวลาสร้างและอื่น ๆ มันเป็นตัวเร่งปฏิกิริยาสำหรับเราในการสร้างการควบคุมจาวาสคริปต์ระดับองค์กรเช่นเดียวกับที่เราทำบนแพลตฟอร์มอื่น ๆ เราไม่จำเป็นต้องประนีประนอมใด ๆ ใน API หรือไวยากรณ์
บางทีสิ่งสำคัญที่สุดคือ TypeScript ทำให้เราสามารถสร้างตัวควบคุมที่แท้จริงแทนวิดเจ็ต FlexGrid เป็นคลาสที่สืบทอดมาจากคลาสควบคุมพื้นฐานของเรา เมื่อวิดเจ็ตบังคับให้คุณตั้งค่าแอตทริบิวต์และค่าผ่านโดยใช้ฟังก์ชั่นที่น่าอับอาย FlexGrid จะมี getter และ setter accessors ที่คุณสามารถตั้งค่าได้โดยตรง Wijmo ยังมีรูปแบบเหตุการณ์สำหรับการเพิ่มตัวจัดการ
หากผู้ใช้ของเราเลือกที่จะใช้ TPYEScript เพื่อการพัฒนาพวกเขาจะได้รับพรอมต์อัจฉริยะและคำเตือนใน IDE ที่รองรับและจะมีข้อความแสดงข้อผิดพลาดเมื่อพวกเขาพยายามกำหนดประเภทที่ไม่ถูกต้องให้กับแอตทริบิวต์
คุณสมบัติที่น่าสนใจที่สุดของ TypeScript คือลูกค้าของเราสามารถสืบทอดและขยายการควบคุมของเราซึ่งสอดคล้องกับปรัชญา Flex ของเราทำให้การปรับแต่งการควบคุมของเราง่ายขึ้นและลดข้อผิดพลาด
ในที่สุดเราก็ไปจับมือกับ Angular2 ฉันประหลาดใจที่เห็นการตัดสินใจที่เราทำเมื่อไม่กี่ปีที่ผ่านมาโดยใช้ภาษาของ Microsoft คลาสควบคุมของเราใช้ TypeScript อยู่แล้วดังนั้นจึงสามารถรวมเข้ากับ Angular2 ได้อย่างราบรื่น เราเพียงแค่ขยายพวกเขาและเพิ่มข้อมูลเมตาเพื่อเปิดเผยพวกเขาในส่วนประกอบ Angular2
อย่าเชื่อคำพูดด้านเดียวของฉัน: ลองด้วย
“ เราซื้อ Wijmo และทีมงานของพวกเขาทำงานได้ดีมาก: อินเทอร์เฟซที่สวยงามสถาปัตยกรรมที่มีน้ำใจ; เอกสารที่ได้รับการพัฒนามาอย่างดีติดตามเทคโนโลยีที่เปลี่ยนแปลงไป” BJ Jeong จาก Cisco กล่าว
หากข้อความของฉันไม่โน้มน้าวใจคุณขอแนะนำให้คุณลอง FlexGrid และพิสูจน์ว่าฉันถูกหรือผิด หากฉันผิดและ FlexGrid ถูกควบคุมโดยการควบคุมกริดอื่นคุณสามารถบอกฉันได้ เราไม่เคยหยุดพัฒนาและปรับปรุงเป็นเวลา 20 ปีและเราจะไม่หยุด ดาวน์โหลดตอนนี้เพื่อสัมผัสกับมัน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น