Kendo UI 的強(qiáng)大組件庫(kù)讓您能夠快速?gòu)臉?gòu)思到構(gòu)建完整的應(yīng)用程序。它擁有超過(guò)100 個(gè)組件，可輕鬆集成到您的React、Angular 或Vue 應(yīng)用程序中。 Kendo UI 實(shí)際上是四個(gè)原生JavaScript 庫(kù)的集合，每個(gè)庫(kù)都針對(duì)其相應(yīng)的框架進(jìn)行了構(gòu)建。更重要的是，正如我們之前所述，這些組件具有極高的主題定制性，您可以根據(jù)需要隨意調(diào)整其外觀。

Kendo UI 的真正優(yōu)勢(shì)在於：它承擔(dān)了繁重的工作。出色的樣式固然重要，但真正將Kendo UI 與其他組件框架區(qū)分開(kāi)來(lái)的，是其開(kāi)箱即用的功能。

例如：數(shù)據(jù)處理。您無(wú)需花費(fèi)大量時(shí)間來(lái)尋找將數(shù)據(jù)綁定到組件的最佳方法，Kendo UI 已為您處理好這一切，讓您能夠?qū)⒏鄷r(shí)間專注於主題設(shè)計(jì)和UI 優(yōu)化。

要了解Kendo UI 如何簡(jiǎn)化數(shù)據(jù)處理，最好的方法是實(shí)際操作一下，所以……

讓我們看看Angular Grid 組件

這是Kendo UI for Angular 的數(shù)據(jù)網(wǎng)格組件。其中包含大量數(shù)據(jù)，對(duì)吧？我們看到的是員工列表，顯示了每個(gè)人的姓名、圖像和其他信息。

與所有Kendo UI 組件一樣，它並非一個(gè)簡(jiǎn)單的在多個(gè)框架中通用的數(shù)據(jù)網(wǎng)格組件。此數(shù)據(jù)網(wǎng)格是專門為Angular 構(gòu)建和設(shè)計(jì)的，就像他們的KendoReact Grid 組件是專門為React 設(shè)計(jì)的一樣。

通常情況下，一個(gè)簡(jiǎn)單的<table>元素<em>可能</em>可以滿足需求，對(duì)吧？但是Kendo UI for Angular 的數(shù)據(jù)網(wǎng)格包含許多額外功能，可以顯著提升用戶體驗(yàn)。您可以立即註意到它提供了交互式功能，例如將數(shù)據(jù)導(dǎo)出到Excel 或PDF。還有許多其他非凡的功能，否則需要花費(fèi)大量時(shí)間和精力才能實(shí)現(xiàn)。<h3 id="過(guò)濾">過(guò)濾</h3> <p>這裡有一個(gè)功能：數(shù)據(jù)網(wǎng)格的過(guò)濾。假設(shè)您正在查看類似於上面數(shù)據(jù)網(wǎng)格示例中的員工列表，但該公司的員工數(shù)以千計(jì)。如果沒(méi)有搜索、可排序列和分頁(yè)等一系列功能，則很難找到特定人員——而Kendo UI 的數(shù)據(jù)網(wǎng)格都具備這些功能。</p> <p>用戶可以快速解析綁定到Angular 數(shù)據(jù)網(wǎng)格的數(shù)據(jù)。可以通過(guò)專用的篩選行進(jìn)行篩選，或者通過(guò)單擊列標(biāo)題中的篩選圖標(biāo)彈出的篩選菜單進(jìn)行篩選。</p> <p> Kendo UI 的文檔非常出色。以下是如何快速啟動(dòng)和運(yùn)行該組件：</p> <h3 id="首先-導(dǎo)入組件">首先，導(dǎo)入組件</h3> <p>這裡沒(méi)有技巧——像導(dǎo)入任何其他組件一樣導(dǎo)入數(shù)據(jù)網(wǎng)格：</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="接下來(lái)-調(diào)用組件">接下來(lái)，調(diào)用組件</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>當(dāng)然，這是不完整的，因?yàn)榻酉聛?lái)我們必須……</p> <h3 id="配置組件">配置組件</h3> <p>我們要啟用的關(guān)鍵功能是篩選，但Kendo 的Angular Grid 接受各種功能參數(shù)，可以一舉啟用，例如排序和分組、分頁(yè)和虛擬化等等。</p> <p>篩選？只需一行代碼即可將其綁定到列標(biāo)題。</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="然後-標(biāo)記其餘的UI">然後，標(biāo)記其餘的UI</h3> <p>我們不會(huì)在這裡深入探討。 Kendo UI 的文檔中有一個(gè)關(guān)於外觀的優(yōu)秀示例。這也是處理樣式的好時(shí)機(jī)，樣式是在樣式參數(shù)中完成的。同樣，Kendo UI 組件的主題設(shè)置非常簡(jiǎn)單。</p> <p>甚至在將實(shí)際數(shù)據(jù)插入之前，我們就已經(jīng)擁有了一個(gè)外觀漂亮的數(shù)據(jù)網(wǎng)格！</p> <h3 id="最後-綁定數(shù)據(jù)">最後，綁定數(shù)據(jù)</h3> <p>當(dāng)我們導(dǎo)入組件時(shí)，您可能已經(jīng)註意到我們同時(shí)導(dǎo)入了“employee”數(shù)據(jù)。我們需要將該數(shù)據(jù)綁定到組件。現(xiàn)在，像我這樣的人可能會(huì)躲在角落裡哭泣，但Kendo UI 讓這個(gè)過(guò)程變得過(guò)於簡(jiǎn)單了。</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="讓我們?cè)俅慰纯囱菔?quot;>讓我們?cè)俅慰纯囱菔?lt;/h3> <p>只需付出最少的努力就能獲得如此強(qiáng)大的功能。 Kendo UI API 非常廣泛，即使是最複雜的功能也變得非常簡(jiǎn)單。</p> <p>我們甚至還沒(méi)有涉及到Kendo UI 組件的其他出色功能。例如可訪問(wèn)性。你能想像需要付出多少考慮才能使這樣的組件易於訪問(wèn)嗎？與我們獲得的所有其他強(qiáng)大功能一樣，Kendo UI 也為我們解決了可訪問(wèn)性問(wèn)題，承擔(dān)了創(chuàng)建符合WCAG 2.0 Alice 標(biāo)準(zhǔn)、符合第508 節(jié)和WAI-ARIA 標(biāo)準(zhǔn)的鍵盤友好型UI 的繁重工作。</p> <p>開(kāi)始使用Kendo UI 數(shù)據(jù)網(wǎng)格吧！</p> </table>

以上是通過(guò)過(guò)濾構(gòu)建角度數(shù)據(jù)網(wǎng)格的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！