Kendo UI for jQuery数据管理使用教程:过滤

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的完整UI库。


Kendo UI for jQuery数据管理使用教程:过滤_第1张图片


默认情况下,Kendo UI Grid过滤功能处于禁用状态。要控制Grid中的过滤,请使用filterable属性。

Grid使您可以实现以下过滤器选项:

  • 标题行过滤

  • 通过复选框过滤

  • 自定义菜单过滤

标题行过滤

要启用网格标题中的过滤器行,请将模式设置为row。结果基于基础列数据的数据类型,网格将在列标题中呈现字符串值、数字输入或日期选择器的文本框进行过滤。您还可以指定默认的过滤器运算符,当用户在过滤器文本框中输入值并从键盘按EnterTab时将应用该默认过滤器。要处理这种情况,请将相应列的cell设置为operator













通过复选框过滤

要在过滤器菜单中呈现复选框列表,请为所需的Grid列设置multi=true,还可以将复选框过滤器与itemTemplate定义结合使用,并自定义将显示的复选框项目。












Client Operations





Server Operations






自定义菜单过滤

您可以为网格过滤器的菜单配置应用通用设置,并在每列中自定义其UI。有关实现自定义菜单筛选的可运行示例演示了如何:

  • 通过设置extra = false来指定单个过滤条件;

  • 将字符串列的过滤器运算符限制为仅、等于和不等于开始;

  • 定义内置的日期选择器用户界面,以过滤网格中的日期时间列;

  • 分别为TitleCity列实例化Kendo UI AutoCompleteDropDownList














公司名称:北京哲想软件有限公司

北京哲想软件官方网站:www.cogitosoft.com

北京哲想软件微信公众平台账号:cogitosoftware

北京哲想软件微博:哲想软件

北京哲想软件邮箱:[email protected]

销售(俞先生)联系方式:+86(010)68421378

微信:18610247936 QQ:368531638


你可能感兴趣的:(Kendo UI for jQuery数据管理使用教程:过滤)