组件/数据管理/过滤器

过滤器组件概述

面向ASP的Telerik UI。网络核心Ninja image

过滤器是的一部分面向ASP的Telerik UI。网络核心一个专业级的UI库，包含 110+ 组件，用于构建现代和功能丰富的 应用程序。要想尝试一下，注册一个30天的免费试用。

免费下载试用版

Telerik UI过滤器TagHelper和HtmlHelper网络核心are server-side wrappers for the Kendo UI Filter widget. To add the component to your ASP.NET Core app, you can use either.

Filter是一个统一的控件，用于过滤具有数据源。对于没有内置过滤UI但需要提供过滤选项的数据绑定组件(例如ListView、Chart和Scheduler)， Filter的用户界面非常有用。

您可以添加或删除用于筛选数据的字段，并选择筛选器的全局逻辑(例如，和或或)和每个字段的过滤操作符(例如，包含或=）.您可以通过内置按钮或API调用应用过滤。您还可以选择将字段显示给用户的名称本地化过滤器操作符和消息。

用于ASP的UI。网络核心过滤器概述

初始化过滤器

要使用Filter，必须定义一个独立的数据源，并按名称将其传递给过滤器和将使用它的数据绑定控件。

下面的示例演示了如何:

  • 将筛选器绑定到数据源。
  • 在列表视图中显示过滤后的数据。
  • 为字段使用人类可读的名称。
  • 设置初始过滤表达式。
  • 不需要提供字段，因为Filter可以从数据源中提取字段。如果在过滤器设置中不设置字段，实际字段的名称，并不是人类可读的标签，将显示给用户。如果在筛选器设置中设置字段，则它们必须与数据源的模式匹配。
  • 不需要提供初始筛选器表达式。此功能对以下方面很有用恢复以前的状态。
 @(Html.Kendo(). datasource () .Name("dataSource1") . ajax (d=>d。Read(r => r. action ("GetPeople"， "Filter")))) @(Html.Kendo().Filter() . name (" Filter") . mainlogic (FilterCompositionLogicalOperator.And) . expressionpreview() //显示过滤器表达式的文本预览. applybutton() //显示内置的Apply按钮. fields (f => //定义字段不是必须的。否则，它们将从数据源模式中取出。//如果定义了字段，它们的名称和类型必须与数据源定义匹配。{f.Add (p = > p.Name) .Label(“名字”);f.Add (p = > p.a ge) .Label(“年龄”);f.Add (p = > p.IsOnLeave)。标签(“度假”);}) . filterexpression (f =>{//不需要定义初始过滤器表达式。f.Add(p => p. age).IsGreaterThanOrEqualTo(30);f.Add(p => p. name).Contains("Doe"); }) .DataSource("dataSource1") ) @(Html.Kendo().ListView() .Name("listView") .TagName("ul") .DataSource("dataSource1") .ClientTemplateId("itemTemplate") ) 
< kendo-datasource type = " DataSourceTagHelperType。Ajax" name="dataSource1" server-operation="false">       < kendo-grid name="grid"数据源-id="dataSource1">      
使用Kendo.Mvc.Extensions;使用Kendo.Mvc.UI;公开课FilterController: BaseController{公共ActionResult GetPeople ([DataSourceRequest] DataSourceRequest请求){var =新列表< SampleData >(){新SampleData () {Name = " Jane Doe”,= 25岁IsOnLeave = false},新SampleData () {Name =“John Doe”= 33岁IsOnLeave = true},新SampleData () {Name =“约翰·史密斯”= 37岁IsOnLeave = true},新SampleData () {Name =“Nathan Doe”= 42岁IsOnLeave = false}};返回Json (people.ToDataSourceResult(请求));} public ActionResult Index() {return View();}}
公共类SampleData{公共int年龄{get;设置;}公共字符串名称{获取;设置;}公共bool IsOnLeave {get;设置;}}

功能和特性

引用现有实例

要引用现有的Filter实例，请使用jQuery.data ()方法。一旦建立了引用，就使用筛选客户端API控制它的行为。