Telerik UI for ASP. NET MVC擁有使用JavaScript和HTML5構(gòu)建網(wǎng)站和移動應(yīng)用所需的70+UI部件，來滿足開發(fā)者的各種需求，提供無語倫比的開發(fā)性能和用戶體驗(yàn)。它主要是針對專業(yè)級的 ASP.NET開發(fā)，通過該產(chǎn)品的強(qiáng)大功能，開發(fā)者可以開發(fā)出功能豐富、適應(yīng)標(biāo)準(zhǔn)廣泛的響應(yīng)式應(yīng)用程序。

在上文中（點(diǎn)擊這里回顧>>），我們講解了如何實(shí)現(xiàn)自定義網(wǎng)格過濾功能的第一步，本文將繼續(xù)講解如何配置過濾等。

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

配置過濾

如果自定義篩選的第一步是添加可篩選元素，那么第二步是在模式部分中指定數(shù)據(jù)類型。

由于在模式部分中將LastDelivery屬性聲明為日期，Grid在LastDelivery列上提供了一個日歷控件，讓用戶選擇要篩選的數(shù)據(jù)。類似地，通過將InStock屬性聲明為布爾值，用戶可以在InStock列的頂部獲得兩個單選按鈕，用于篩選行。最后TotalQuantity被標(biāo)記為一個數(shù)字，該列得到一個用于選擇數(shù)值的微調(diào)器。

由于模式設(shè)置，沒格列上選擇比較操作符的篩選菜單都配置為匹配列顯示的屬性的數(shù)據(jù)類型：

認(rèn)情況下，網(wǎng)格在服務(wù)器上進(jìn)行所有過濾。如果想確保你的用戶總是在查看最新的數(shù)據(jù)，或者如果想利用服務(wù)器上更快的處理速度，這是非常好的選擇。但在本示例中，是在初始獲取之后緩存數(shù)據(jù)，并且只有少量產(chǎn)品要顯示，所以不需要服務(wù)器端過濾的額外功能。

因此在本示例中，關(guān)閉服務(wù)器端過濾(除了初始數(shù)據(jù)獲取)并在用戶過濾網(wǎng)格行時消除對服務(wù)器的重復(fù)訪問是有意義的。這不僅會給用戶更好/更快的體驗(yàn)，還會減少對服務(wù)器端資源的需求。要實(shí)現(xiàn)客戶端過濾，只需要將server-operation屬性添加到網(wǎng)格的數(shù)據(jù)源標(biāo)記中，并將其設(shè)置為false：

<datasource type="DataSourceTagHelperType.Ajax" server-operation="false">

關(guān)注用戶需求

通常，用戶想要做的只是找到其列與特定值匹配的行(對于包含字符串值的列尤其如此)，如果是這樣的話，這個UI可能更有意義：

實(shí)現(xiàn)這個過濾UI只需要兩個步驟，首先需要更新網(wǎng)格上的可過濾元素，使用菜單(而不是行)過濾：

<filterable enabled="true" mode="menu">

其次，需要在希望提供這種簡化體驗(yàn)的地方展開列元素，并為這些列提供它們自己的可過濾元素。在這些列的可過濾元素中，只需要將可過濾元素的multi屬性設(shè)置為true，就像這樣：

<column field="ProductName" title="Name" width="240">
<filterable multi="true"/>
</column>

現(xiàn)在，對于包含字符串?dāng)?shù)據(jù)的大多數(shù)列，您可能已經(jīng)為用戶提供了他們想要的篩選體驗(yàn)。這確實(shí)假設(shè)列具有合理數(shù)量的惟一值，因此選項(xiàng)列表本身不會過多。對布爾列進(jìn)行這種更改也是一個很好的選擇，用戶最多只能在三個值(true, false，“is empty”)之間進(jìn)行選擇，并且永遠(yuǎn)不會有太多的選項(xiàng)列表。

處理日期和數(shù)字

然而對于日期和數(shù)字列，用戶可能需要更多選項(xiàng)——他們不僅希望通過精確匹配進(jìn)行篩選，還希望對日期在某個特定日期之前或之后的行進(jìn)行篩選，或者對大于或小于某個值的數(shù)字進(jìn)行篩選。

您可以配置Grid來提供這種體驗(yàn)，這可能更符合用戶的需求：

要做到這一點(diǎn)，只需要將網(wǎng)格的可過濾元素的額外屬性設(shè)置為false：

<filterable enabled="true" extra="false"/>

如果全局地這樣有點(diǎn)極端，那么您可以使用每個列的可過濾元素單獨(dú)配置列。例如，這個配置將單獨(dú)為LastDelivery列打開完整的默認(rèn)過濾選項(xiàng)：

<column field="LastDelivery" format="{0:MMM-dd}" title="Last Delivery" width="150" >
<filterable enabled="true" extra="true"/>
</column>

不過，在集中過濾和完整過濾體驗(yàn)之間有一個中間地帶：通過使用operators元素，您可以為用戶提供他們需要的比較操作符(還可以配置每個操作符顯示的文本)。

這個示例定義了LastDelivery date列有三個比較運(yùn)算符——“delivery on”(等于)，“delivery before”(小于)和“delivery after”(大于)：

<column field="LastDelivery" format="{0:MMM-dd}" title="Last Delivery" width="150" >
<filterable extra="false" >
<operators>
<date eq="Deliveries on"
gt="Deliveries after"
lt="Deliveries before" />
</operators>
</filterable>
</column>

現(xiàn)在用戶得到了一組反映他們需求的過濾選項(xiàng)：

您還可以使用Grid的可過濾元素替代列可過濾元素來全局配置比較操作符，例如這將允許為所有日期列配置比較操作符，還可以使用operators元素中的相應(yīng)元素為字符串、數(shù)字和枚舉配置比較操作符。然后，您可以使用列的可過濾元素在必要時覆蓋各個列上的這些設(shè)置。

配置選項(xiàng)列表

還有一個步驟可以為用戶提供更集中的體驗(yàn)：您可以提供一個自定義的選項(xiàng)列表供用戶進(jìn)行比較，例如在Total Quantity列中，用戶可能只對手頭數(shù)量(QoH)與特定閾值進(jìn)行比較感興趣，典型的問題可能是這樣的：“QoH是大于/小于0、100還是200項(xiàng)?”

提供比較值列表的第一步是向列的可過濾元素添加filter-ui-handler屬性，此屬性需要指向頁面中的一個JavaScript函數(shù)，該函數(shù)將用值加載過濾器的選項(xiàng)列表。

在本示例中除了指定用戶需要的兩個比較操作符外，還引用了一個名為quantityOptions的函數(shù)，該函數(shù)將構(gòu)建QoH閾值列表：

<column field="TotalQuantity" title="Quantity on Hand" width="150">
<filterable enabled="true" extra="false" filter-ui-handler="quantityOptions">
<operators>
<number gt="QoH greater than"
lt="Qoh less than" />
</operators>
</filterable>
</column>

下一步是編寫該函數(shù)，該函數(shù)需要接受一個參數(shù)(我將其稱為columnFilter)，并且已經(jīng)向該參數(shù)添加了一個Kendo UI下拉列表。在該下拉列表的傳輸部分，設(shè)置了一個讀取操作，這次指向Razor Page中名為“Quantity”的處理程序方法。最后，使用下拉列表的optionLabel，已經(jīng)指定了一個要在下拉列表中顯示的初始選擇：

function quantityOptions(columnFilter) {
columnFilter.kendoDropDownList({
dataSource: {
transport: {
read: "@Url.Page("/Index","Quantity")"
}
},
optionLabel: "-- Select Threshold --"
});
}

最后一步是在Razor Page的代碼隱藏文件中創(chuàng)建相應(yīng)的方法。下拉列表只發(fā)出GET請求，所以需要設(shè)置一個名為“OnGet”+處理程序名稱(“OnGetQuantity”）的方法。在該方法中，只需要返回一個JSON格式的值列表來填充下拉列表，代碼看起來像這樣：

public JsonResult OnGetQuantity([DataSourceRequest] DataSourceRequest request)
{
List<int> qtys = new List<int> {0, 100, 200 };
return new JsonResult(qtys.Select(e => e).Distinct());
}

現(xiàn)在用戶得到了這個非常自定義化的(和集中的)UI，用于根據(jù)手頭的數(shù)量過濾產(chǎn)品：