Es gibt jetzt eine große Anzahl von JavaScript-Datentabellenkontrollen auf dem Markt, einschließlich Open-Source-Drittanbieter und selbstproduzierter und verkauft. Es kann gesagt werden, dass Wijmos FlexGrid die beste Tabellenkontrolle ist, die derzeit an Angular 2 angepasst ist.
Angular 2 Datentabelle Grundlegende Anforderungen: kleiner, schneller und vertrauter.
Um Angular 2 -Formulare zu verwenden, müssen Sie zunächst die grundlegenden Anforderungen der Formulare verstehen. FlexGrid begann 1996, als Kontrollen für Visual Basic in C ++ verwendet wurden. Im Laufe der Jahre hat es sich auf mehreren Plattformen entwickelt und wurde perfektioniert, insbesondere auf der JavaScript -Plattform. FlexGrid wird aufgrund des Konzepts von Flex benannt, und die Steuerungen sollten die am häufigsten benötigten Schlüsselfunktionssätze und skalierbaren Funktionen enthalten. Eingebaute grundlegende Funktionen wie: Sortieren, Gruppierung, Bearbeitung und andere ausgefallene Dinge können durch optionale Erweiterungen bereitgestellt werden. Dadurch wird die Bedienelemente optimiert und effizient gehalten und den Kunden die Möglichkeit ermöglicht, tief anzupassen.
Ein weiterer wichtiger Indikator ist die Leistung. FlexGrid vergleicht ständig mit anderen Produkten, um sicherzustellen, dass wir schnell genug sind. Das Flex -Konzept macht unsere Dateien klein genug (ca. 25.000 nach Komprimierung) und wir haben keine Abhängigkeiten von anderen Frameworks. Die bedeutendste Leistungsverbesserung ist die virtuelle Darstellung. FlexGrid virtualisiert alle DOM und zeichnet nur Zellen, die mit Ansichten (und einigen Puffern zum glatten Scrollen) gleichzeitig gefüllt werden müssen. Wenn die Tabelle gescrollt ist, werden die Zellen (DOM -Elemente) recycelt. Virtuelles Rendering bedeutet, dass Grid Millionen von Daten in 1 Sekunde binden kann.
Schließlich ist eines der wichtigsten Merkmale vertraute Operationen. FlexGrid basiert auf allen Interaktionsverhalten in Excel, was für Benutzer am häufigsten verwendet wird, um das Netz zu betreiben. Die Leute möchten beim Scrollen und Klicken eindeutig Verhalten erhalten, insbesondere wenn sie Tastaturbefehle (einschließlich Zwischenablagefunktionen) verwenden, anstatt uns selbst zu erfinden. Wir haben Excel imitiert, damit die Benutzer sich wohl fühlen, wenn wir unsere Tabellen verwenden, und überraschenderweise haben viele andere Netze ihr eigenes Verhalten erfunden oder unterstützen das Scrollen- und Tastaturverhalten nicht vollständig. Wenn Sie beispielsweise eine Datenreihe auswählen und den Abwärtspfeil halten, werden viele Tabellen nicht das von Ihnen erwartete Verhalten angezeigt.
Verwenden Sie die Markup -Sprache, um UI -Kontrollen zu deklarieren
Schauen wir uns nun die Vorteile von Flexgrid unter AngularJs an. Der größte Vorteil unter AngularJS ist die Markup -Sprache von Flexgrid: Winkelkomponenten bieten die Möglichkeit, Kontrollen mithilfe der Markup -Sprache zu deklarieren. Deklarationsmarkierungen folgen dem MVVM -Designmuster gut und wir können unsere Komponenten vollständig über die Sichtweise (Markup -Sprache) konfigurieren.
FlexGrid unterstützt die Verwendung einer Winkel -Markup -Sprache, um eine vollständige API zu deklarieren. Sie können die Markup -Sprache verwenden, um Eigenschaften festzulegen, Ereignisse anzuhängen und Unterkomponenten (z. B. Spalten) zu konfigurieren.
Hier ist ein Beispiel, das zeigt, wie man FlexGrid mithilfe der Angular2 -Markup -Sprache konfiguriert.
<wj-flex-grid [itemSoursource] = "data"> <wj-flex-grid-säule <wj-flex-grid-säule [header] = "'revenue'" [bindung] = "'seng'" [format] = "'n0'"> </wj-flex-grid-column> <wj-flex-grid-column [header] = "active '" [bindung]
Hier sind die Ergebnisse, die wir aus der von uns deklarierten Markup -Sprache erzielt haben.
Viele andere Gitterkomponenten bieten nur die Möglichkeit, ein Steuerelement unter Verwendung von Markup -Sprache zu deklarieren, was zu allen Konfigurationen führt, die mit JavaScript (ViewModel) erfolgen müssen. Dadurch verwechselt die Ansicht und das ViewMode und zwingen Entwickler, JavaScript zu verwenden, um die Kontroll -Benutzeroberfläche zu ändern. Wenn Sie dies tun, werden Sie alle Vorteile der Winkelbindung verpassen. Wir denken, dass dies ein Anti-Muster ist. Siehe den Unterschied unten:
<Ag-Grid-Ng2 #AGGrid // Elemente, die an Eigenschaften auf dem Controller gebunden sind
Durch die Verwendung von Komponenten, die Markup -Sprachen vollständig unterstützen, können Sie wie andere Entwicklungsplattformen (ASP.NET, Java, Silverlight, Flex) die vollständige MVVM -Musterunterstützung und das Erstellen von Anwendungen erhalten.
Deklarieren Sie wiederverwendbare Zelltypvorlagen
Um alle FlexGrid -Mitglieder mit der Markup -Sprache zu deklarieren, stellen wir auch Zellvorlagen bereit. Zellvorlagen sind eine Möglichkeit, wiederverwendbare Vorlagen für verschiedene Zellenarten zu deklarieren. Zellvorlagen unterstützen alle gültigen Winkel -Tags, einschließlich gebundener Ausdrücke, HTML und anderen Komponenten. Zu den Zellvorlagentypen gehören: Titelzelle, Bearbeitungsmoduszelle, Normalmoduszelle usw.
Durch Zellvorlagen bietet FlexGrid eine Darstellung zum Erstellen von Komponenten. Sie können nicht nur FlexGrid in der Markup -Sprache deklarieren, sondern auch die gesamte Winkelsyntax in jeder Zelle verwenden. Mal sehen, wie leistungsfähig das FlexGrid Cell -Template -Tag ist.
<wj-flex-grid [itemsSource] = "data1" [erlaubt es. *ngif = "customRowheader" #cell = "cell"> {{cell.row.index}} </template> <wj-flex-grid-column Header = "Country" Binding = "Country"> <template wjflexgridcattemplate [cellType] = "cell '" *ngif = " #" #" #" #" #" #" #" #" #" #" #" #" #" #" #" #" #" #" oder /> {{item.name}} ({{item.items.length}} items) </template> </wj-flex-grid-column> <wj-flex-Grid-Column Header [CellType] = "'Columnheader'" *ngif = "CustomColumnHeader"> <Eingabe -Typ = "Kontrollkästchen" [(ngmodel)] [ngStyle] = "{color: uictx.highlightdownloads? (item.downloads> 10000? 'grün': 'rot'): '}" style = "font-weight: 700"> {{{item.downloads}} </span> </template> <template #cell = "cell"> sum = {{cell.Value | Nummer: '1.0-0'}} </template> </wj-flex-grid-säule> </wj-flex-grid>Die Ergebnisse, die wir als Zellvorlagen deklariert haben
Wiederverwendbare Zellvorlagen in Angular2
Um diesen Effekt in anderen Tabellenkontrollen zu erzielen, müssen Sie die JavaScript -Datei bearbeiten und in das ViewModel schreiben.
Aktualisieren Sie die Steuerelemente automatisch mithilfe der Datenbindung.
Ich glaube, der produktivste Vorteil von Angular ist der Bindungsausdruck, mit dem die von uns erstellten Steuerelemente automatisch auf Datenänderungen reagieren und uns von mühsamen Ereignishandlern und DOM -Operationen befreien können.
Alle Eigenschaften von FlexGrid unterstützen Datenbindung. Darüber hinaus bieten wir eine Zwei-Wege-Bindung für einige Eigenschaften, die eine Zwei-Wege-Datenbindung erfordern. Ohne Code zu schreiben, können Sie Komponenten für Ereignisse binden und mit den Modelldaten interagieren.
Die Datenbindung ist ein erstklassiger Bürger auf jeder Entwicklungsplattform (Java, .NET) und Angular macht es einfacher und unterstützt sowohl Einweg- als auch Zwei-Wege-Datenbindung.
Typuskript: 2 Tage Arbeit mit Angular.
FlexGrid und alle WiJMO -Steuerelemente sind in TypeScript geschrieben. Wir haben eine ziemlich lange Geschichte, die auf der Microsoft -Plattform arbeitet. Wenn Typscript ausgereift wird, haben wir ein Gefühl von Zuhause. TypeScript bietet uns eine ähnliche Erfahrung wie das Schreiben von C#: Klassen, Vererbung, starke Tippen, Typprüfungen, Fehlerprüfungen für Erstellung und mehr. Es ist der Katalysator für uns, JavaScript-Steuerelemente für Unternehmen zu erstellen.
Vielleicht am wichtigsten ist, dass TypeScript uns die Möglichkeit gibt, echte Steuerelemente anstelle von Widgets zu erstellen. FlexGrid als Klasse erbt aus unserer Basiskontrollkurs. Wenn Widgets Sie dazu zwingen, ein Attribut zu setzen und Werte mit peinlichen Funktionen zu übergeben, verfügt FlexGrid über Gettter- und Setter -Accessors, die Sie direkt festlegen können. WIJMO enthält auch ein Ereignismodell zum einfachen Hinzufügen von Handlern.
Wenn unsere Benutzer TPyescript für die Entwicklung verwenden, erhalten sie in den unterstützten IDEs intelligente Eingabeaufforderungen und Warnungen. Wenn sie versuchen, einem Attribut einen falschen Typ zuzuweisen.
Das attraktivste Merkmal von TypeScript ist, dass unsere Kunden unsere Steuerelemente erben und erweitern können, was mit unserer Flex -Philosophie übereinstimmt, die Kontrollanpassung vereinfacht und Fehler verringert.
Schließlich gehen wir Hand in Hand mit Angular2. Ich war überrascht, eine Entscheidung zu sehen, die wir vor einigen Jahren mit Microsofts Sprache getroffen haben. Unsere Kontrollklasse verwendet bereits TypeScript, sodass sie nahtlos mit Angular2 kombiniert werden kann. Wir haben sie einfach erweitert und Metadaten hinzugefügt, um sie in Angular2 -Komponenten freizulegen.
Glauben Sie meinen einseitigen Worten nicht: Versuchen Sie es auch
"Wir haben Wijmo gekauft und ihr Team haben großartige Arbeit geleistet: schöne Schnittstelle; nachdenkliche Architektur; gut entwickelte Dokumentation; mit der sich ändernden Technologie Schritt halten", sagte BJ Jeong von Cisco.
Wenn mein Text Sie nicht überzeugt, ermutigen Sie Sie, Flexgrid zu versuchen und mir richtig oder falsch zu beweisen. Wenn ich mich irre und FlexGrid von einer anderen Netzkontrolle geschlagen wird, können Sie es mir sagen. Wir haben seit 20 Jahren nie aufgehört, uns zu entwickeln und zu verbessern, und wir werden nie aufhören. Laden Sie jetzt herunter, um es zu erleben.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.