Telerik ASP.NET MVC拥有使用JavaScript和HTML5构建网站和移动应用所需的70UI部件来满足开发者的各种需求提供无语伦比的开发性能和用户体验。它主要是针对专业级的 ASP.NET开发通过该产品的强大功能开发者可以开发出功能丰富、适应标准广泛的响应式应用程序。在上文中我们讲解了如何实现自定义网格过滤功能的第一步本文将继续讲解如何配置过滤等。​​​​​​​配置过滤如果自定义筛选的第一步是添加可筛选元素那么第二步是在模式部分中指定数据类型。由于在模式部分中将LastDelivery属性声明为日期Grid在LastDelivery列上提供了一个日历控件让用户选择要筛选的数据。类似地通过将InStock属性声明为布尔值用户可以在InStock列的顶部获得两个单选按钮用于筛选行。最后TotalQuantity被标记为一个数字该列得到一个用于选择数值的微调器。由于模式设置没格列上选择比较操作符的筛选菜单都配置为匹配列显示的属性的数据类型认情况下网格在服务器上进行所有过滤。如果想确保你的用户总是在查看最新的数据或者如果想利用服务器上更快的处理速度这是非常好的选择。但在本示例中是在初始获取之后缓存数据并且只有少量产品要显示所以不需要服务器端过滤的额外功能。因此在本示例中关闭服务器端过滤(除了初始数据获取)并在用户过滤网格行时消除对服务器的重复访问是有意义的。这不仅会给用户更好/更快的体验还会减少对服务器端资源的需求。要实现客户端过滤只需要将server-operation属性添加到网格的数据源标记中并将其设置为falsedatasource typeDataSourceTagHelperType.Ajax server-operationfalse关注用户需求通常用户想要做的只是找到其列与特定值匹配的行(对于包含字符串值的列尤其如此)如果是这样的话这个UI可能更有意义实现这个过滤UI只需要两个步骤首先需要更新网格上的可过滤元素使用菜单(而不是行)过滤filterable enabledtrue modemenu其次需要在希望提供这种简化体验的地方展开列元素并为这些列提供它们自己的可过滤元素。在这些列的可过滤元素中只需要将可过滤元素的multi属性设置为true就像这样column fieldProductName titleName width240 filterable multitrue/ /column现在对于包含字符串数据的大多数列您可能已经为用户提供了他们想要的筛选体验。这确实假设列具有合理数量的惟一值因此选项列表本身不会过多。对布尔列进行这种更改也是一个很好的选择用户最多只能在三个值(true, false“is empty”)之间进行选择并且永远不会有太多的选项列表。处理日期和数字然而对于日期和数字列用户可能需要更多选项——他们不仅希望通过精确匹配进行筛选还希望对日期在某个特定日期之前或之后的行进行筛选或者对大于或小于某个值的数字进行筛选。您可以配置Grid来提供这种体验这可能更符合用户的需求要做到这一点只需要将网格的可过滤元素的额外属性设置为falsefilterable enabledtrue extrafalse/如果全局地这样有点极端那么您可以使用每个列的可过滤元素单独配置列。例如这个配置将单独为LastDelivery列打开完整的默认过滤选项column fieldLastDelivery format{0:MMM-dd} titleLast Delivery width150 filterable enabledtrue extratrue/ /column不过在集中过滤和完整过滤体验之间有一个中间地带通过使用operators元素您可以为用户提供他们需要的比较操作符(还可以配置每个操作符显示的文本)。这个示例定义了LastDelivery date列有三个比较运算符——“delivery on”(等于)“delivery before”(小于)和“delivery after”(大于)column fieldLastDelivery format{0:MMM-dd} titleLast Delivery width150 filterable extrafalse operators date eqDeliveries on gtDeliveries after ltDeliveries before / /operators /filterable /column现在用户得到了一组反映他们需求的过滤选项您还可以使用Grid的可过滤元素替代列可过滤元素来全局配置比较操作符例如这将允许为所有日期列配置比较操作符还可以使用operators元素中的相应元素为字符串、数字和枚举配置比较操作符。然后您可以使用列的可过滤元素在必要时覆盖各个列上的这些设置。配置选项列表还有一个步骤可以为用户提供更集中的体验您可以提供一个自定义的选项列表供用户进行比较例如在Total Quantity列中用户可能只对手头数量(QoH)与特定阈值进行比较感兴趣典型的问题可能是这样的“QoH是大于/小于0、100还是200项?”提供比较值列表的第一步是向列的可过滤元素添加filter-ui-handler属性此属性需要指向页面中的一个JavaScript函数该函数将用值加载过滤器的选项列表。在本示例中除了指定用户需要的两个比较操作符外还引用了一个名为quantityOptions的函数该函数将构建QoH阈值列表column fieldTotalQuantity titleQuantity on Hand width150 filterable enabledtrue extrafalse filter-ui-handlerquantityOptions operators number gtQoH greater than ltQoh less than / /operators /filterable /column下一步是编写该函数该函数需要接受一个参数(我将其称为columnFilter)并且已经向该参数添加了一个Kendo UI下拉列表。在该下拉列表的传输部分设置了一个读取操作这次指向Razor Page中名为“Quantity”的处理程序方法。最后使用下拉列表的optionLabel已经指定了一个要在下拉列表中显示的初始选择function quantityOptions(columnFilter) { columnFilter.kendoDropDownList({ dataSource: { transport: { read: Url.Page(/Index,Quantity) } }, optionLabel: -- Select Threshold -- }); }最后一步是在Razor Page的代码隐藏文件中创建相应的方法。下拉列表只发出GET请求所以需要设置一个名为“OnGet”处理程序名称(“OnGetQuantity”的方法。在该方法中只需要返回一个JSON格式的值列表来填充下拉列表代码看起来像这样public JsonResult OnGetQuantity([DataSourceRequest] DataSourceRequest request) { Listint qtys new Listint {0, 100, 200 }; return new JsonResult(qtys.Select(e e).Distinct()); }现在用户得到了这个非常自定义化的(和集中的)UI用于根据手头的数量过滤产品