Aufbau eines Winkeldatenrasters mit Filterung

Mit der leistungsstarken Komponentenbibliothek von Kendo UI können Sie schnell von der Konzeption zum Erstellen vollständiger Anwendungen wechseln. Es verfügt über über 100 Komponenten, die leicht in Ihre Reakt-, Winkel- oder VUE -Anwendungen integriert werden können. Kendo UI ist tatsächlich eine Sammlung von vier nativen JavaScript -Bibliotheken, die jeweils für das entsprechende Framework erstellt wurden. Darüber hinaus sind diese Komponenten, wie bereits erwähnt, eine extrem Themenanpassung und Sie können ihr Erscheinungsbild so anpassen, wie Sie möchten.

Der wahre Vorteil der Kendo UI ist, dass sie das schwere Heben annimmt . Ein ausgezeichneter Stil ist wichtig, aber was die Kendo-Benutzeroberfläche von anderen Komponenten-Frameworks wirklich unterscheidet, ist die Out-of-the-Box-Funktion.

Zum Beispiel: Datenverarbeitung . Sie müssen nicht viel Zeit damit verbringen, nach dem besten Weg zu suchen, um Ihre Daten an Komponenten zu binden.

Um zu verstehen, wie Kendo UI die Datenverarbeitung vereinfacht, ist es am besten, es tatsächlich zu tun, also ...

Schauen wir uns die Winkelgitterkomponente an

Dies ist die Datengitterkomponente der Kendo UI für Angular. Es enthält viele Daten, oder? Wir sehen eine Liste von Mitarbeitern, die den Namen, die Bilder und andere Informationen jeder Person zeigen.

Wie bei allen Kendo UI -Komponenten handelt es sich nicht um eine einfache Datengitterkomponente, die in mehreren Frameworks üblich ist. Dieses Datengitter ist speziell für Angular gebaut und entwickelt, ebenso wie ihre Kendoreact -Gitterkomponenten speziell für React ausgelegt sind.

Normalerweise ein einfaches<table> Elemente <em>können</em> die Bedürfnisse erfüllen, oder? Die Kendo UI für Angulars Datenraster enthält jedoch viele zusätzliche Funktionen, die die Benutzererfahrung erheblich verbessern können. Sie können sofort feststellen, dass es interaktive Funktionen wie Exportieren von Daten in Excel oder PDF bietet. Es gibt viele andere außergewöhnliche Funktionen, die ansonsten viel Zeit und Mühe in Anspruch nehmen würden.<h3 id="Filter"> Filter</h3> <p> Hier gibt es eine Funktion: Filterung von Datengittern. Angenommen, Sie prüfen eine Liste von Mitarbeitern, die dem oben genannten Datennetzbeispiel ähneln, aber das Unternehmen hat Tausende von Mitarbeitern. Ohne eine Reihe von Funktionen wie Suche, sortierbar und Paging ist es schwierig, eine bestimmte Person zu finden - und das Datennetz von Kendo UI verfügt über diese Funktionen.</p> <p> Benutzer können Daten schnell an ein Winkeldatenraster analysieren. Sie können über eine dedizierte Filterzeile oder durch Klicken auf das Filtermenü über das Filtersymbol im Spalten-Header filtern.</p> <p> Die Dokumentation für die Kendo UI ist ausgezeichnet. Hier erfahren Sie, wie Sie die Komponente schnell zum Laufen bringen können:</p> <h3 id="Importieren-Sie-zunächst-die-Komponente"> Importieren Sie zunächst die Komponente</h3> <p> Hier gibt es keinen Trick: Importieren eines Datenrasters wie beim Importieren einer anderen Komponente:</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="Rufen-Sie-als-nächstes-die-Komponente-an"> Rufen Sie als nächstes die Komponente an</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> Das ist natürlich unvollständig, weil wir als nächstes ...</p> <h3 id="Komponenten-konfigurieren"> Komponenten konfigurieren</h3> <p> Das wichtige Merkmal, das wir aktivieren möchten, ist die Filterung, aber Kendos Winkelraster akzeptiert verschiedene Funktionsparameter, die in einem Sturzbetrieb aktiviert werden können, z. B. Sortieren und Gruppierung, Pagination und Virtualisierung.</p> <p> Filter? Es ist nur möglich, es mit nur einer Codezeile an den Spaltenkopf zu binden.</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="Markieren-Sie-dann-den-Rest-der-Benutzeroberfläche"> Markieren Sie dann den Rest der Benutzeroberfläche</h3> <p> Wir werden hier nicht ausführlich darauf eingehen. Es gibt ein hervorragendes Beispiel dafür, wie in der Dokumentation von Kendo UI aussieht. Dies ist auch ein guter Zeitpunkt, um mit Stilen umzugehen, die in Stilparametern durchgeführt werden. In ähnlicher Weise ist die Themeneinstellung von Kendo UI -Komponenten sehr einfach.</p> <p> Noch bevor wir die tatsächlichen Daten einfügen, haben wir bereits ein gut aussehendes Datenraster!</p> <h3 id="Schließlich-binden-Sie-die-Daten"> Schließlich binden Sie die Daten</h3> <p> Wenn wir Komponenten importieren, haben Sie möglicherweise festgestellt, dass wir gleichzeitig die Daten "Mitarbeiter" importieren. Wir müssen diese Daten an die Komponente binden. Jetzt verstecken sich Leute wie ich in der Ecke und weinen, aber die Kendo UI macht den Prozess zu einfach.</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="Schauen-wir-uns-die-Demo-wieder-an"> Schauen wir uns die Demo wieder an</h3> <p> Solche leistungsstarken Merkmale werden mit minimalem Aufwand erreicht. Die Kendo UI -API ist sehr breit und selbst die komplexesten Funktionen sind sehr einfach.</p> <p> Wir haben noch nicht einmal andere großartige Funktionen von Kendo UI -Komponenten angesprochen. Zum Beispiel Barrierefreiheit. Können Sie sich vorstellen, wie viel gedacht es braucht, um eine solche Komponente leicht zugänglich zu machen? Wie alle anderen leistungsstarken Funktionen, die wir erhalten haben, löst die Kendo UI Barrierefreiheitsprobleme für uns und übernimmt das hohe Anheben der Erstellung einer tastaturfreundlichen UI, die den Standards für WCAG 2.0 Alice, Abschnitt 508 und WAI-Aria entspricht.</p> <p> Beginnen Sie mit Kendo UI Data Grid!</p> </table>

Das obige ist der detaillierte Inhalt vonAufbau eines Winkeldatenrasters mit Filterung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!