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;// 在初始化時(shí)激活組件export class AppComponent implements OnInit { // 將員工數(shù)據(jù)綁定到組件@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective; // 將網(wǎng)格的數(shù)據(jù)源設(shè)置為員工數(shù)據(jù)文件public gridData: any[] = employees; // 將數(shù)據(jù)源應(yīng)用于Grid 組件視圖public gridView: any[]; public mySelection: string[] = []; public ngOnInit(): void { this.gridView = this.gridData; } // 開(kāi)始處理數(shù)據(jù)public onFilter(inputValue: string): void { this.gridView = process(this.gridData, { filter: { // 設(shè)置邏輯類型(and/or) logic: &quot;or&quot;, // 定義篩選器及其運(yùn)算符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!