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

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

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

Kendo UI R3 2022正式版下載

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

我們的案例研究應(yīng)用程序相對(duì)簡(jiǎn)單：有一個(gè)顯示客戶列表和國(guó)家下拉列表的Grid，當(dāng)用戶從下拉列表中選擇一個(gè)國(guó)家時(shí)，代碼將更新Grid來(lái)只顯示該國(guó)家的客戶。同時(shí)還將添加一個(gè)復(fù)選框，允許用戶根據(jù)客戶是否加入公司的忠誠(chéng)度計(jì)劃來(lái)選擇客戶，下面是UI的樣子：

定義UI

這個(gè)網(wǎng)格顯示的Customer類有六個(gè)屬性，然而對(duì)于這個(gè)案例研究，只對(duì)國(guó)家和inLoyaltyProgram屬性感興趣：

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

定義下拉列表和復(fù)選框的標(biāo)記看起來(lái)像這樣：

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)"/>

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

還需要兩個(gè)客戶數(shù)組，第一個(gè)數(shù)組是客戶的“完整/未過(guò)濾”數(shù)組(可能從某些Web服務(wù)獲取)，但是我們將Grid綁定到第二個(gè)名為selectCustomers的數(shù)組，該數(shù)組顯示當(dāng)前選定的客戶。最初我們是希望兩個(gè)數(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列表。同時(shí)還定義了Grid中的每一列，以便可以將每一列綁定到公司的一個(gè)屬性，控制列中的數(shù)據(jù)格式，在列的頂部設(shè)置標(biāo)題，并指定列的寬度。

所有的Grid標(biāo)記看起來(lái)像這樣：

<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>

過(guò)濾的基礎(chǔ)設(shè)施

要過(guò)濾一個(gè)網(wǎng)格，需要一個(gè)CompositeFilterDescriptor，它包含0個(gè)或多個(gè)FilterDescriptors(如果CompositeFilterDescriptor沒(méi)有FilterDescriptors，那么沒(méi)有行被“過(guò)濾掉”)。我們需要導(dǎo)入這兩個(gè)類，因?yàn)樯院筮€需要filterBy函數(shù)，所以也將導(dǎo)入它:

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

FilterDescriptor有三個(gè)屬性對(duì)這個(gè)案例研究很重要：

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

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

這兩個(gè)FilterDescriptor屬性的聲明如下：

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

現(xiàn)在在過(guò)濾器函數(shù)中，只是從傳遞給函數(shù)的事件中檢索當(dāng)前值，并在適當(dāng)?shù)腇ilterDescriptor中設(shè)置value屬性。這對(duì)于下拉列表來(lái)說(shuō)非常簡(jiǎn)單，因為下拉列表的選擇事件只是傳遞當(dāng)前在下拉列表中選擇的值：

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

對(duì)于復(fù)選框來(lái)說(shuō)有點(diǎn)復(fù)雜，因?yàn)樵摵瘮?shù)傳遞的是一個(gè)Event對(duì)象。然而，可以將事件對(duì)象的目標(biāo)屬性轉(zhuǎn)換為HtmlInput對(duì)象，然后檢索元素的checked屬性來(lái)設(shè)置FieldDescriptor的value屬性：

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

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

用戶體驗(yàn)中斷

我們只給了用戶篩選客戶是否在忠誠(chéng)度計(jì)劃中的功能——用戶不能篩選不在計(jì)劃中的客戶，這是因?yàn)樵谟脩艚缑嬷惺褂昧艘粋€(gè)復(fù)選框來(lái)控制這個(gè)過(guò)濾選項(xiàng)。

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

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

過(guò)濾客戶

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

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

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

當(dāng)Filters條件中確實(shí)有多個(gè)項(xiàng)時(shí)，必須將CompositeFilterDescriptor的邏輯屬性設(shè)置為" and "或" or "，以指示如何組合過(guò)濾器。當(dāng)使用兩個(gè)過(guò)濾器時(shí)，希望它們是“and”一起的，所以在CompositeFilterDescriptor中已經(jīng)將邏輯屬性設(shè)置為“and”。

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

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

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ù)組過(guò)濾到Grid所綁定的selectCustomers數(shù)組中。為此，使用前面導(dǎo)入的filterBy函數(shù)，傳遞完整的customers數(shù)組和CompositeFilterDescriptor，使用調(diào)用filterBy的結(jié)果來(lái)設(shè)置Grid綁定到的數(shù)組的代碼如下所示：

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

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