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í)間專(zhuān)注于主題設(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)格是專(zhuān)門(mén)為 Angular 構(gòu)建和設(shè)計(jì)的，就像他們的 KendoReact Grid 組件是專(zhuān)門(mén)為 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è)您正在查看類(lèi)似于上面數(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ò)專(zhuān)用的篩選行進(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ù)綁定到組件?，F(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è)置邏輯類(lèi)型 (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 非常廣泛，即使是最復(fù)雜的功能也變得非常簡(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)的鍵盤(pá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)文章！