Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求。Kendo UI for Angular是Kendo UI系列商業(yè)產品的最新產品。Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級Angular組件。telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關系。

雖然Kendo UI for Angular網格帶有內置的過濾功能，但開發(fā)者有時需要允許用戶控制過濾器顯示的內容。

在本文中，我們將看到一個現(xiàn)實的示例，如何將過濾集成到應用程序中，以便當用戶與應用程序的UI交付時，代碼可以控制Grid（網格）顯示哪些行。

Kendo UI R3 2022正式版下載

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

我們的案例研究應用程序相對簡單：有一個顯示客戶列表和國家下拉列表的Grid，當用戶從下拉列表中選擇一個國家時，代碼將更新Grid來只顯示該國家的客戶。同時還將添加一個復選框，允許用戶根據(jù)客戶是否加入公司的忠誠度計劃來選擇客戶，下面是UI的樣子：

定義UI

這個網格顯示的Customer類有六個屬性，然而對于這個案例研究，只對國家和inLoyaltyProgram屬性感興趣：

export class Customer
{
constructor(
public id: number,
public country: string,
public inLoyaltyProgram: Boolean,
public custName: string,
public signUpDate: Date | null,
public amountPurchased: number
) { }
}

定義下拉列表和復選框的標記看起來像這樣：

Select Country:
<kendo-dropdownlist
[data]="countries"
defaultItem=”Pick a Country”
(selectionChange)="CountryChange($event)">
</kendo-dropdownlist><br/><br/>
Loyalty Program Only:  
<input type="checkbox" #loyalty kendoCheckBox
(change)="LoyaltyChange($event)"/>

這些組件中的每一個都調用一個函數(shù)，并在用戶更改組件的值時傳遞相關的事件對象。我將把這兩個函數(shù)(CountryChange用于下拉列表，LoyaltyChange用于復選框)稱為“過濾器函數(shù)”。

還需要兩個客戶數(shù)組，第一個數(shù)組是客戶的“完整/未過濾”數(shù)組(可能從某些Web服務獲取)，但是我們將Grid綁定到第二個名為selectCustomers的數(shù)組，該數(shù)組顯示當前選定的客戶。最初我們是希望兩個數(shù)組是相同的，所以我像這樣初始化數(shù)組：

public customers: Customer[];
public selectCustomers: Customer[] = [];

this.customers = [new Customer(1, "Peter Vogel", "USA", new Date(), 3250, true),
…more Customers…
];
this.selectCustomers = this.customers;

最后用kendo-Grid組件定義Grid，并將Grid綁定到selectCustomers列表。同時還定義了Grid中的每一列，以便可以將每一列綁定到公司的一個屬性，控制列中的數(shù)據(jù)格式，在列的頂部設置標題，并指定列的寬度。

所有的Grid標記看起來像這樣：

<kendo-Grid
[kendoGridBinding]="selectCustomers"
[height]="250"
(filterChange)= "this.filterCustomers($event)">
<kendo-Grid-column title="Id" field="id" [width]="50"></kendo-Grid-column>
<kendo-Grid-column title="Name" field="custName" [width]="150"></kendo-Grid-column>
<kendo-Grid-column title="Purchase" field="amountPurchased" [width]="125" format="99,999"></kendo-Grid-column>
<kendo-Grid-column title="Signed Up" field="signUpDate" [width]="200" format="MMM-dd-yyyy"></kendo-Grid-column>
<kendo-Grid-column title="In Program" field="inLoyaltyProgram" [width]="100"></kendo-Grid-column>
</kendo-Grid>

過濾的基礎設施

 要過濾一個網格，需要一個CompositeFilterDescriptor，它包含0個或多個FilterDescriptors(如果CompositeFilterDescriptor沒有FilterDescriptors，那么沒有行被“過濾掉”)。我們需要導入這兩個類，因為稍后還需要filterBy函數(shù)，所以也將導入它:

import { CompositeFilterDescriptor, FilterDescriptor, filterBy }
from "@progress/kendo-data-query";

FilterDescriptor有三個屬性對這個案例研究很重要：

• field：要篩選的屬性名稱
• operator：要使用的比較運算符(例如，eq, neq, gt等)
• value：要比較的值

將兩個filterdescriptor設置為屬性是有意義的，一個用于按客戶篩選，一個用于按忠誠度計劃篩選，這可以將每個FilterDescriptor上的所有屬性設置為一些默認值。這可以簡化后面的代碼：當用戶在下拉列表和復選框中進行更改時，兩個過濾器函數(shù)中唯一需要更改的屬性是每個FilterDescriptor的value屬性。

這兩個FilterDescriptor屬性的聲明如下：

countryFilter: FilterDescriptor = {field:"country", operator:"eq", value:"Pick a country"};
loyaltyFilter: FilterDescriptor = {field:"inLoyaltyProgram", operator:"eq", value:false};

現(xiàn)在在過濾器函數(shù)中，只是從傳遞給函數(shù)的事件中檢索當前值，并在適當?shù)腇ilterDescriptor中設置value屬性。這對于下拉列表來說非常簡單，因為下拉列表的選擇事件只是傳遞當前在下拉列表中選擇的值：

CountryChange(e:string): void
{
this.countryFilter.value = e;
this.CreateFilter();
}

對于復選框來說有點復雜，因為該函數(shù)傳遞的是一個Event對象。然而，可以將事件對象的目標屬性轉換為HtmlInput對象，然后檢索元素的checked屬性來設置FieldDescriptor的value屬性：

LoyaltyChange(e:Event): void
{
const cbx = e.target as HTMLInputElement;
this.loyaltyFilter.value = cbx.checked;
this.CreateFilter();
}

在每個函數(shù)末尾調用的CreateFilter函數(shù)將兩個FilterDescriptors組裝成一個CompositeFilter，并實際過濾數(shù)據(jù)(您將在接下來的短暫中斷后看到該函數(shù))。

用戶體驗中斷

我們只給了用戶篩選客戶是否在忠誠度計劃中的功能——用戶不能篩選不在計劃中的客戶，這是因為在用戶界面中使用了一個復選框來控制這個過濾選項。

雖然Kendo UI下拉列表有一個“不確定”的狀態(tài)，允許復選框表明它還沒有被觸摸，一旦用戶選中復選框，復選框只在true和false狀態(tài)之間交替。如果我使用false將列表過濾到那些不在忠誠度計劃中的客戶，那么一旦用戶選中復選框，用戶將被限制在使用true查看計劃中的客戶和使用false查看計劃中沒有的客戶之間切換，但不會是所有客戶。

如果想讓用戶可以選擇忠誠度計劃過濾器的三種狀態(tài)(在忠誠度計劃中，不在忠誠度計劃中，并且“不關心忠誠度計劃”)，我們將不得不使用一些其他組件組合(可能是兩個單選按鈕或另一個下拉列表)。

過濾客戶

現(xiàn)在已經構建了FilterDescriptors，將它們組合在CreateFilter方法中。

在CreateFilter函數(shù)中，檢查了兩個FilterConditions中四個可能的值組合，并使用它們來加載CompositeFilterDescriptor的Filters數(shù)組：

• 如果LoyaltyFilter設置為false, CustomerFilter設置為下拉列表的默認值，就不設置任何過濾器。
• 如果LoyaltyFilter設置為true, CustomerFilter設置為某些國家(即，不是默認值)，加載兩個過濾器。
• 對于任何其他組合，只加載具有其值集的篩選器。

當Filters條件中確實有多個項時，必須將CompositeFilterDescriptor的邏輯屬性設置為" and "或" or "，以指示如何組合過濾器。當使用兩個過濾器時，希望它們是“and”一起的，所以在CompositeFilterDescriptor中已經將邏輯屬性設置為“and”。

在只有一個(或沒有)過濾器的情況下，將邏輯屬性設置為什么并不重要——將屬性設置為" and "就可以了。

下面是構建ComponsiteFilterDescriptor的代碼(可能有更復雜的方法，但這個版本的優(yōu)勢是顯而易見的)：

GridFilter:CompositeFilterDescriptor = {filters:[],logic:"and"};
CreateFilter()
{
if (!this.loyaltyFilter.value && this.countryFilter.value == "Pick a country")
{
this.GridFilter.filters = [];
}
if (!this.loyaltyFilter.value && this.countryFilter.value != "Pick a country")
{
this.GridFilter.filters = [this.countryFilter];
}
if (this.loyaltyFilter.value && this.countryFilter.value == "Pick a country")
{
this.GridFilter.filters = [this.loyaltyFilter];
}
if (this.loyaltyFilter.value && this.countryFilter.value != "Pick a country")
{
this.GridFilter.filters = [this.loyaltyFilter, this.countryFilter];
}

在CreateFilter函數(shù)的末尾，終于可以將完整的客戶數(shù)組過濾到Grid所綁定的selectCustomers數(shù)組中。為此，使用前面導入的filterBy函數(shù)，傳遞完整的customers數(shù)組和CompositeFilterDescriptor，使用調用filterBy的結果來設置Grid綁定到的數(shù)組的代碼如下所示：

…
{
this.GridFilter.filters = [this.loyaltyFilter, this.countryFilter];
}
this.selectCustomers = filterBy(this.customers, this.GridFilter);
}

現(xiàn)在，當用戶與應用程序UI的其他部分交互時，代碼將控制Grid顯示的行。