通過過濾構建角度數據網格

Kendo UI 的強大組件庫讓您能夠快速從構思到構建完整的應用程序。它擁有超過100 個組件，可輕鬆集成到您的React、Angular 或Vue 應用程序中。 Kendo UI 實際上是四個原生JavaScript 庫的集合，每個庫都針對其相應的框架進行了構建。更重要的是，正如我們之前所述，這些組件具有極高的主題定制性，您可以根據需要隨意調整其外觀。

Kendo UI 的真正優勢在於：它承擔了繁重的工作。出色的樣式固然重要，但真正將Kendo UI 與其他組件框架區分開來的，是其開箱即用的功能。

例如：數據處理。您無需花費大量時間來尋找將數據綁定到組件的最佳方法，Kendo UI 已為您處理好這一切，讓您能夠將更多時間專注於主題設計和UI 優化。

要了解Kendo UI 如何簡化數據處理，最好的方法是實際操作一下，所以……

讓我們看看Angular Grid 組件

這是Kendo UI for Angular 的數據網格組件。其中包含大量數據，對吧？我們看到的是員工列表，顯示了每個人的姓名、圖像和其他信息。

與所有Kendo UI 組件一樣，它並非一個簡單的在多個框架中通用的數據網格組件。此數據網格是專門為Angular 構建和設計的，就像他們的KendoReact Grid 組件是專門為React 設計的一樣。

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

以上是通過過濾構建角度數據網格的詳細內容。更多資訊請關注PHP中文網其他相關文章！