Il existe désormais un grand nombre de contrôles de table de données JavaScript sur le marché, y compris un tiers open source et autoproduit et vendu. On peut dire que FlexGrid de Wijmo est le meilleur contrôle de table actuellement adapté à Angular 2.
Tableau de données Angular 2 Exigences de base: plus petites, plus rapides et plus familières.
Afin d'utiliser les formulaires Angular 2, vous devez d'abord comprendre les exigences de base des formulaires. Flexgrid a commencé en 1996 lorsque des contrôles écrits pour Visual Basic ont été utilisés en C ++. Au fil des ans, il a évolué et a été perfectionné sur plusieurs plates-formes, en particulier la plate-forme JavaScript. FlexGrid est nommé en raison du concept de flex, et les contrôles doivent contenir les ensembles de fonctionnalités clés les plus nécessaires et les capacités évolutives. Des fonctions de base intégrées telles que: le tri, le regroupement, l'édition et d'autres choses de fantaisie peuvent être fournies par des extensions facultatives. Cela gardera les contrôles rationalisés et efficaces, tout en donnant aux clients la possibilité de personnaliser profondément.
Un autre indicateur important est la performance. FlexGrid se compare constamment avec d'autres produits pour nous assurer que nous sommes assez rapides. Le concept Flex rend nos fichiers suffisamment petits (environ 25k après la compression) et nous n'avons aucune dépendance sur d'autres cadres. L'amélioration des performances la plus significative est par le rendu virtuel. FlexGrid virtualise tous les DOM, dessinant uniquement les cellules qui doivent être remplies de fenêtres (et de certains tampons pour lisser le défilement) à la fois. Lorsque le tableau est défilé, les cellules (éléments DOM) sont recyclées. Le rendu virtuel signifie que la grille peut lier des millions de données en 1 seconde.
Enfin, l'une des fonctionnalités les plus importantes est les opérations familières. FlexGrid est basé sur tous les comportements d'interaction dans Excel, qui peut être le moyen le plus utilisé pour les utilisateurs de faire fonctionner la grille. Les gens veulent obtenir un comportement défini lors de défilement, de clic, en particulier lorsque vous utilisez des commandes de clavier (y compris les fonctions du presse-papiers) plutôt que de nous inventer. Nous avons imité Excel afin que les utilisateurs se sentent à l'aise d'utiliser nos tables, et étonnamment de nombreuses autres grilles ont inventé leur propre comportement ou ne prennent pas entièrement en charge le défilement et le comportement du clavier. Par exemple, lorsque vous sélectionnez une ligne de données et maintenez la flèche vers le bas, de nombreuses tables n'afficheront pas le comportement que vous attendez.
Utilisez le langage de balisage pour déclarer les contrôles d'interface utilisateur
Jetons maintenant un coup d'œil aux avantages de Flexgrid sous AngularJS. Le plus grand avantage en vertu d'AngularJS est le langage de balisage de FlexGrid: les composants angulaires offrent la possibilité de déclarer les contrôles en utilisant le langage de balisage. Les marqueurs de déclaration suivent bien le modèle de conception MVVM et nous pouvons configurer entièrement nos composants via la vue (langage de balisage).
FlexGrid prend en charge l'utilisation du langage de balisage angulaire pour déclarer une API complète. Vous pouvez utiliser le langage de balisage pour définir les propriétés, joindre des événements et configurer les sous-composants (tels que les colonnes).
Voici un exemple qui montre comment configurer FlexGrid à l'aide du langage de balisage Angular2.
<wj-flex-grid [itementsSource] = "data"> <wj-flex-grid-column [en-tête] = "'country'" [liant] = "'country'" [width] = "'*'"> </ wj-flex-grrid-column> <wj-flex-grrid-colmn [headr] = "'date'" [Binding] = "'DATE'"> </ wj-flex-grid-column> <wj-flex-grid-column [en-tête] = "'revenu'" [binding] = "'montant'" [format] = "'n0'"> </ wj-flex-grid-column> <wj-flex-column [header] = "''" actif '" [liaison] = "'active'"> </ wj-flex-grdim-column> </ wj-flex-grid>
Voici les résultats que nous avons obtenus à partir de la langue de balisage que nous avons déclarée.
De nombreux autres composants de grille ne fournissent que la possibilité de déclarer un contrôle en utilisant le langage de balisage, ce qui entraîne toutes les configurations qui doivent être effectuées en utilisant JavaScript (ViewModel). Cela rend la vue et la vue de vue confuse, forçant les développeurs à utiliser JavaScript pour modifier l'interface utilisateur de contrôle. En faisant cela, vous manquerez tous les avantages de la liaison angulaire. Nous pensons que cela est un anti-motif. Voir la différence ci-dessous:
<Ag-grdid-ng2 #aggrid // éléments liés aux propriétés du contrôleur [gridOptions] = "gridOptions" [ColumnDefs] = "ColumnDefs"> </ Ag-Grid-Ng2>
En utilisant des composants qui prennent en charge entièrement les langages de balisage, vous pouvez obtenir une prise en charge complète du modèle MVVM et créer des applications comme d'autres plates-formes de développement (ASP.NET, Java, Silverlight, Flex).
Déclarer les modèles de type cellulaire réutilisables
Pour déclarer tous les membres de FlexGrid utilisant un langage de balisage, nous fournissons également des modèles de cellules. Les modèles cellulaires sont un moyen de déclarer des modèles réutilisables pour différents types de cellules. Les modèles de cellules prennent en charge toutes les balises angulaires valides, y compris les expressions liées, le HTML et d'autres composants. Les types de modèles de cellules comprennent: la cellule de titre, la cellule en mode édition, la cellule en mode normal, etc.
Grâce à des modèles de cellules, FlexGrid fournit une représentation pour la création de composants. Vous pouvez non seulement déclarer FlexGrid dans le langage de balisage, mais également utiliser toute syntaxe angulaire dans chaque cellule. Voyons à quel point la balise de modèle de cellule FlexGrid est puissante.
<wj-flex-grid [itementsSource] = "data1" [permets àorter] = "false" [déférer] = "true"> <template wjflexgridcelltemplate [cellType] = "'topleft'" ngif = "CustomTopleft"> № </ template> <template wjflexgridCellTlemplate * ngif = "CustomRowHeader" # cell = "Cell"> {{cell.row.index}} </ template> <wj-flex-grrid-column header = "country" binding = "country"> <template wjflexgridcelltemplate [celltype] = "'cell' * ngif =" CustomCell "# item =" item "> <iMg src =" # item = "item =" item ">; {item.country}}. png "/> {{item.country}} </ template> <template wjflexgridcelltemplate [CellType] =" 'Groupheader' "* ngif =" CustomGroupHeader "# item =" item "# cell =" cell "> <entrée =" checkbox " [(ngmodel)] = "cell.row.iscollapsed" /> {{item.name}}} ({{item.items.length}}}) </ template> </ wj-flex-grid-column> <wj-flex-grid-colmer = "téléchargements" binding = "téléchargements" [width] = "170" [Aggrate <template wjflexgridcelltemplate [CellType] = "'ColumnHeader'" * ngif = "CustomColumnHeader"> <Input type = "Checkbox" [(ngModel)]] = "uctx.highlightdownloads" /> Téléchargements </ template> # item = "item"> <span [ngstyle] = "{colore: uctx.highlightdownloads? (item.Downloads> 10000? 'Green': 'red'): '}" style = "Font-weight: 700"> {{item.downloads}} </pan> </ template> <template wjflexgrygridCellTemplate * ngif = "CustomGroup" # Cell = "Cell"> sum = {{cell.value | Numéro: '1.0-0'}} </ template> </ wj-flex-grid-column> </ wj-flex-grid>Les résultats que nous avons déclarés comme modèles de cellules
Modèles cellulaires réutilisables dans Angular2
Encore une fois, afin d'atteindre cet effet dans d'autres contrôles de table, vous devez modifier le fichier JavaScript et l'écrire dans ViewModel.
Mettre à jour automatiquement les contrôles à l'aide de la liaison des données.
Je crois que l'avantage le plus productif d'Angular est l'expression de liaison, qui permet aux contrôles que nous créons pour répondre automatiquement aux changements de données, nous libérant des gestionnaires d'événements fastidieux et des opérations DOM.
Toutes les propriétés de la liaison des données de support FlexGrid. De plus, nous fournissons également une liaison bidirectionnelle pour certaines propriétés qui nécessitent une liaison de données bidirectionnelle. Sans écrire de code, vous pouvez lier des composants pour gérer les événements et interagir avec les données du modèle.
La liaison des données est un citoyen de première classe sur n'importe quelle plate-forme de développement (Java, .NET), et Angular le facilite et prend en charge la liaison de données unidirectionnelle et bidirectionnelle.
TypeScript: 2 jours de travail avec Angular.
FlexGrid et tous les contrôles Wijmo sont écrits en dactylographie. Nous avons une histoire assez longue fonctionnant sur la plate-forme Microsoft, donc lorsque TypeScript devient mature, nous avons un sens de la maison. TypeScript nous donne une expérience similaire à l'écriture C #: Classes, héritage, dactylographie solide, vérification de type, vérification des erreurs de construction, etc. C'est le catalyseur pour nous de créer des contrôles JavaScript de qualité d'entreprise, tout comme nous le faisons sur d'autres plateformes, nous n'avons pas besoin de faire de compromis dans l'API ou la syntaxe.
Peut-être plus important encore, TypeScript nous donne la possibilité de créer des contrôles réels au lieu des widgets. FlexGrid en tant que classe hérite de notre classe de contrôle de base. Lorsque les widgets vous obligent à définir un attribut et à passer des valeurs à l'aide de fonctions embarrassantes, FlexGrid a des accessoires Getter et Setter que vous pouvez définir directement. Wijmo comprend également un modèle d'événement pour simplement ajouter des gestionnaires.
Si nos utilisateurs choisissent d'utiliser TPYescript pour le développement, ils obtiendront des invites et des avertissements intelligents dans les IDE pris en charge, et il y aura des messages d'erreur lorsqu'ils essaieront d'attribuer un type incorrect à un attribut.
La caractéristique la plus attrayante de TypeScript est que nos clients peuvent hériter et étendre nos commandes, ce qui est conforme à notre philosophie Flex, simplifiant la personnalisation du contrôle et la réduction des erreurs.
Enfin, nous allons de pair avec Angular2. J'ai été surpris de voir une décision que nous avons prise il y a quelques années, en utilisant la langue de Microsoft. Notre classe de contrôle utilise déjà TypeScript, il peut donc être combiné de manière transparente avec Angular2. Nous les avons simplement étendus et ajouté des métadonnées pour les exposer dans des composants Angular2.
Ne croyez pas mes mots unilatéraux: essayez aussi
«Nous avons acheté Wijmo et leur équipe a fait un excellent travail: belle interface; architecture réfléchie; documentation bien développée; suivre la technologie changeante», a déclaré BJ Jeong de Cisco.
Si mon texte ne vous convainque pas, vous encourage à essayer Flexgrid et à me prouver le bien ou le mal. Si je me trompe et que Flexgrid est battu par un autre contrôle de la grille, vous pouvez me le dire. Nous n'avons jamais cessé de développer et d'améliorer depuis 20 ans, et nous ne nous arrêterons jamais. Téléchargez maintenant pour en faire l'expérience.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.