Construire une grille de données angulaires avec filtrage

La puissante bibliothèque de composants de Kendo UI vous permet de passer rapidement de la conception à la construction d'applications complètes. Il dispose de plus de 100 composants qui peuvent être facilement intégrés dans vos applications React, Angular ou Vue. Kendo UI est en fait une collection de quatre bibliothèques JavaScript natives, chacune construite pour son cadre correspondant. De plus, comme nous l'avons mentionné plus tôt, ces composants sont une personnalisation extrêmement du thème et vous pouvez ajuster leur apparence comme vous le souhaitez.

Le véritable avantage de l'interface utilisateur de Kendo est qu'il prend le travail lourd . Un excellent style est important, mais ce qui distingue vraiment l'interface utilisateur de Kendo des autres cadres de composants, c'est sa fonctionnalité prête à l'emploi.

Par exemple: traitement des données . Vous n'avez pas à passer beaucoup de temps à chercher la meilleure façon de lier vos données aux composants, Kendo UI a tout géré pour vous, vous permettant de passer plus de temps à vous concentrer sur la conception du thème et l'optimisation de l'interface utilisateur.

Pour comprendre comment l'interface utilisateur de Kendo simplifie le traitement des données, la meilleure façon est de le faire, donc ...

Jetons un coup d'œil à la composante de la grille angulaire

Il s'agit du composant de réseau de données de Kendo UI pour Angular. Il contient beaucoup de données, non? Ce que nous voyons, c'est une liste d'employés montrant le nom, les images et les autres informations de chaque personne.

Comme tous les composants de l'interface utilisateur Kendo, ce n'est pas un composant de grille de données simple qui est courant sur plusieurs cadres. Cette grille de données est spécialement construite et conçue pour Angular, tout comme leurs composants de grille Kendoreact sont spécialement conçus pour réagir.

Habituellement, un simple<table> Les éléments <em>peuvent</em> satisfaire les besoins, non? Mais l'interface utilisateur de Kendo pour la grille de données d'Angular contient de nombreuses fonctionnalités supplémentaires qui peuvent améliorer considérablement l'expérience utilisateur. Vous pouvez immédiatement remarquer qu'il fournit des fonctionnalités interactives telles que l'exportation de données vers Excel ou PDF. Il existe de nombreuses autres fonctionnalités extraordinaires qui autrement prendraient beaucoup de temps et d'efforts à réaliser.<h3 id="filtre"> filtre</h3> <p> Il existe une fonction ici: filtrage des grilles de données. Supposons que vous envisagez une liste d'employés similaires à l'exemple de réseau de données ci-dessus, mais l'entreprise compte des milliers d'employés. Sans une gamme de fonctionnalités telles que la recherche, la triable et la pagination, il est difficile de trouver une personne spécifique - et la grille de données de l'interface utilisateur de Kendo a ces capacités.</p> <p> Les utilisateurs peuvent rapidement analyser les données liées à une grille de données angulaires. Vous pouvez filtrer via une ligne de filtre dédiée, ou en cliquant sur le menu Filtre Forf-Up à partir de l'icône de filtre dans l'en-tête de la colonne.</p> <p> La documentation de Kendo UI est excellente. Voici comment faire fonctionner le composant rapidement:</p> <h3 id="Tout-d-abord-importez-le-composant"> Tout d'abord, importez le composant</h3> <p> Il n'y a pas d'astuce ici - l'importation d'une grille de données comme l'importation d'un autre composant:</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;import { Component, OnInit, ViewChild } from '@angular/core'; import { DataBindingDirective } from '@progress/kendo-angular-grid'; import { process } from '@progress/kendo-data-query'; import { employees } from './employees'; import { images } from './images';&lt;/code&gt;</pre> <h3 id="Ensuite-appelez-le-composant"> Ensuite, appelez le composant</h3> <pre class="brush:php;toolbar:false"> &lt;code&gt;@Component({ selector: 'my-app', template: `&lt;kendo-grid&gt; // ...&lt;/kendo-grid&gt; ` })&lt;/code&gt;</pre> <p> Bien sûr, c'est incomplet car ensuite nous devons ...</p> <h3 id="Configurer-les-composants"> Configurer les composants</h3> <p> La caractéristique clé que nous voulons activer est le filtrage, mais la grille angulaire de Kendo accepte divers paramètres fonctionnels qui peuvent être activés en un seul coup, tels que le tri et le regroupement, la pagination et la virtualisation.</p> <p> filtre? Il est seulement possible de le lier à l'en-tête de colonne avec une seule ligne de code.</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;@Component({ selector: 'my-app', template: `&lt;kendo-grid filter=&quot;&quot; kendogridselectby=&quot;id&quot; true=&quot;&quot;&gt; // etc.&lt;/kendo-grid&gt; ` })&lt;/code&gt;</pre> <h3 id="Ensuite-marquez-le-reste-de-l-interface-utilisateur"> Ensuite, marquez le reste de l'interface utilisateur</h3> <p> Nous n'y allons pas en profondeur ici. Il y a un excellent exemple de ce à quoi ressemble la documentation de Kendo UI. C'est aussi le bon moment pour gérer les styles, qui sont faits dans les paramètres de style. De même, le réglage du thème des composants de l'interface utilisateur de Kendo est très simple.</p> <p> Même avant d'insérer les données réelles, nous avons déjà une jolie grille de données!</p> <h3 id="Enfin-liez-les-données"> Enfin, liez les données</h3> <p> Lorsque nous importons des composants, vous avez peut-être remarqué que nous importons les données "employés" en même temps. Nous devons lier ces données au composant. Maintenant, des gens comme moi se cachent peut-être dans le coin et pleurent, mais Kendo UI rend le processus trop simple.</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;// 在初始化时激活组件export class AppComponent implements OnInit { // 将员工数据绑定到组件@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective; // 将网格的数据源设置为员工数据文件public gridData: any[] = employees; // 将数据源应用于Grid 组件视图public gridView: any[]; public mySelection: string[] = []; public ngOnInit(): void { this.gridView = this.gridData; } // 开始处理数据public onFilter(inputValue: string): void { this.gridView = process(this.gridData, { filter: { // 设置逻辑类型(and/or) logic: &quot;or&quot;, // 定义筛选器及其运算符filters: [ { field: 'full_name', operator: 'contains', value: inputValue }, { field: 'job_title', operator: 'contains', value: inputValue }, { field: 'budget', operator: 'contains', value: inputValue }, { field: 'phone', operator: 'contains', value: inputValue }, { field: 'address', operator: 'contains', value: inputValue } ], } }).data; this.dataBinding.skip = 0; } // ... }&lt;/code&gt;</pre> <h3 id="Jetons-un-coup-d-œil-à-la-démo"> Jetons un coup d'œil à la démo</h3> <p> De telles fonctionnalités puissantes sont obtenues avec un minimum d'effort. L'API Kendo UI est très large, et même les fonctionnalités les plus complexes sont très simples.</p> <p> Nous n'avons même pas encore abordé d'autres grandes fonctionnalités des composants de l'interface utilisateur de Kendo. Par exemple, l'accessibilité. Pouvez-vous imaginer à quel point il faut pour rendre un tel composant facile d'accès? Comme toutes les autres fonctionnalités puissantes que nous avons obtenues, Kendo UI résout les problèmes d'accessibilité pour nous, prenant le travail lourd de la création d'une interface utilisateur conviviale pour le clavier conforme aux normes WCAG 2.0 Alice, Section 508 et Wai-Aria.</p> <p> Commencez avec Kendo UI Data Grid!</p> </table>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!