Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫。

 

 

默認(rèn)情況下，Kendo UI Grid過濾功能處于禁用狀態(tài)。要控制Grid中的過濾，請使用filterable屬性。

Grid使您可以實現(xiàn)以下過濾器選項：

• 標(biāo)題行過濾

• 通過復(fù)選框過濾

• 自定義菜單過濾

 

標(biāo)題行過濾

要啟用網(wǎng)格標(biāo)題中的過濾器行，請將模式設(shè)置為row。結(jié)果基于基礎(chǔ)列數(shù)據(jù)的數(shù)據(jù)類型，網(wǎng)格將在列標(biāo)題中呈現(xiàn)字符串值、數(shù)字輸入或日期選擇器的文本框進(jìn)行過濾。您還可以指定默認(rèn)的過濾器運算符，當(dāng)用戶在過濾器文本框中輸入值并從鍵盤按Enter或Tab時將應(yīng)用該默認(rèn)過濾器。要處理這種情況，請將相應(yīng)列的cell設(shè)置為operator。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

通過復(fù)選框過濾

要在過濾器菜單中呈現(xiàn)復(fù)選框列表，請為所需的Grid列設(shè)置multi=true，還可以將復(fù)選框過濾器與itemTemplate定義結(jié)合使用，并自定義將顯示的復(fù)選框項目。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

自定義菜單過濾

您可以為網(wǎng)格過濾器的菜單配置應(yīng)用通用設(shè)置，并在每列中自定義其UI。有關(guān)實現(xiàn)自定義菜單篩選的可運行示例演示了如何：

• 通過設(shè)置extra = false來指定單個過濾條件；

• 將字符串列的過濾器運算符限制為僅、等于和不等于開始；

• 定義內(nèi)置的日期選擇器用戶界面，以過濾網(wǎng)格中的日期時間列；

• 分別為Title和City列實例化Kendo UI AutoComplete和DropDownList。