界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤

这篇具有很好参考价值的文章主要介绍了界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Telerik UI for ASP. NET MVC拥有使用JavaScript和HTML5构建网站和移动应用所需的70+UI部件,来满足开发者的各种需求,提供无语伦比的开发性能和用户体验。它主要是针对专业级的 ASP.NET开发,通过该产品的强大功能,开发者可以开发出功能丰富、适应标准广泛的响应式应用程序。

在上文中(点击这里回顾>>),我们讲解了如何实现自定义网格过滤功能的第一步,本文将继续讲解如何配置过滤等。

获取Telerik UI for ASP. NET MVC R1 2023下载(Q技术交流:726377843)

配置过滤

如果自定义筛选的第一步是添加可筛选元素,那么第二步是在模式部分中指定数据类型。

由于在模式部分中将LastDelivery属性声明为日期,Grid在LastDelivery列上提供了一个日历控件,让用户选择要筛选的数据。类似地,通过将InStock属性声明为布尔值,用户可以在InStock列的顶部获得两个单选按钮,用于筛选行。最后TotalQuantity被标记为一个数字,该列得到一个用于选择数值的微调器。

界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤

由于模式设置,没格列上选择比较操作符的筛选菜单都配置为匹配列显示的属性的数据类型:

界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤

认情况下,网格在服务器上进行所有过滤。如果想确保你的用户总是在查看最新的数据,或者如果想利用服务器上更快的处理速度,这是非常好的选择。但在本示例中,是在初始获取之后缓存数据,并且只有少量产品要显示,所以不需要服务器端过滤的额外功能。

因此在本示例中,关闭服务器端过滤(除了初始数据获取)并在用户过滤网格行时消除对服务器的重复访问是有意义的。这不仅会给用户更好/更快的体验,还会减少对服务器端资源的需求。要实现客户端过滤,只需要将server-operation属性添加到网格的数据源标记中,并将其设置为false:

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

关注用户需求

通常,用户想要做的只是找到其列与特定值匹配的行(对于包含字符串值的列尤其如此),如果是这样的话,这个UI可能更有意义:

界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤

实现这个过滤UI只需要两个步骤,首先需要更新网格上的可过滤元素,使用菜单(而不是行)过滤:

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

其次,需要在希望提供这种简化体验的地方展开列元素,并为这些列提供它们自己的可过滤元素。在这些列的可过滤元素中,只需要将可过滤元素的multi属性设置为true,就像这样:

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

现在,对于包含字符串数据的大多数列,您可能已经为用户提供了他们想要的筛选体验。这确实假设列具有合理数量的惟一值,因此选项列表本身不会过多。对布尔列进行这种更改也是一个很好的选择,用户最多只能在三个值(true, false,“is empty”)之间进行选择,并且永远不会有太多的选项列表。

处理日期和数字

然而对于日期和数字列,用户可能需要更多选项——他们不仅希望通过精确匹配进行筛选,还希望对日期在某个特定日期之前或之后的行进行筛选,或者对大于或小于某个值的数字进行筛选。

您可以配置Grid来提供这种体验,这可能更符合用户的需求:

界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤

要做到这一点,只需要将网格的可过滤元素的额外属性设置为false:

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

如果全局地这样有点极端,那么您可以使用每个列的可过滤元素单独配置列。例如,这个配置将单独为LastDelivery列打开完整的默认过滤选项:

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

不过,在集中过滤和完整过滤体验之间有一个中间地带:通过使用operators元素,您可以为用户提供他们需要的比较操作符(还可以配置每个操作符显示的文本)。

这个示例定义了LastDelivery date列有三个比较运算符——“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>

现在用户得到了一组反映他们需求的过滤选项:

界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤

您还可以使用Grid的可过滤元素替代列可过滤元素来全局配置比较操作符,例如这将允许为所有日期列配置比较操作符,还可以使用operators元素中的相应元素为字符串、数字和枚举配置比较操作符。然后,您可以使用列的可过滤元素在必要时覆盖各个列上的这些设置。

配置选项列表

还有一个步骤可以为用户提供更集中的体验:您可以提供一个自定义的选项列表供用户进行比较,例如在Total Quantity列中,用户可能只对手头数量(QoH)与特定阈值进行比较感兴趣,典型的问题可能是这样的:“QoH是大于/小于0、100还是200项?”

提供比较值列表的第一步是向列的可过滤元素添加filter-ui-handler属性,此属性需要指向页面中的一个JavaScript函数,该函数将用值加载过滤器的选项列表。

在本示例中除了指定用户需要的两个比较操作符外,还引用了一个名为quantityOptions的函数,该函数将构建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>

下一步是编写该函数,该函数需要接受一个参数(我将其称为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)
{
List<int> qtys = new List<int> {0, 100, 200 };
return new JsonResult(qtys.Select(e => e).Distinct());
}

现在用户得到了这个非常自定义化的(和集中的)UI,用于根据手头的数量过滤产品:

界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤

  文章来源地址https://www.toymoban.com/news/detail-412168.html

到了这里,关于界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【ASP.NET MVC】使用动软(五)(13)

    前文完成的用户登录后的首页如下:     后续账单管理、人员管理等功能页面都有 相同的头部,左边和下边, 唯一不同的右边内容部分,所以要解决重复设计的问题。 在Views上右键添加新建项,选择布局页,名称可改: 拷贝相同的头部、左边、下边的HTML到布局页,需要加

    2024年02月14日
    浏览(44)
  • 【ASP.NET MVC】使用动软(三)(11)

    上文中提到,动软提供了数据库的基本操作功能,但是往往需要添加新的功能来解决实际问题,比如GetModel,通过id去查对象:  这个功能就需要进行改进:往往程序中获取的是实体的其他属性,比如用户登录的时提供账号名和密码,需要根据账户名(唯一)去获取数据库中的

    2024年02月14日
    浏览(41)
  • 【ASP.NET MVC】使用动软(一)(9)

    前文为解决数据库操作设计的  TestMysql  类,仅简单地封装了一个Query函数,代码如下: 很显然,一个函数去解决所有数据库中所有表的描述、操作,肯定是远远不够,即使完成系统功能也会使代码非常复杂。因此需要封装更多的功能。 ORM 是 Object Relational Mapping 的缩写。意

    2024年02月14日
    浏览(37)
  • 【ASP.NET MVC】使用动软(二)(10)

    按前文添加动态到工程 双击动软 完成新建数据库服务器后 ,需要关闭重新打开 选择简单三层,注意保存位置 注意切换数据库: 生成后拷贝五个文件夹到工程目录 注意目录结构: 添加四个项目到原来的工程: 右键项目-》添加-》现有的项目,一个个添加到工程: 添加引用

    2024年02月14日
    浏览(34)
  • 【ASP.NET MVC】使用动软(四)(12)

    需解决的问题: 网站登录往往需要用户名+密码验证,为避免重复验证,一般采用Cookie 、Session等技术来保持用户的登录状态: Session是在服务端保存的一个数据结构,用来跟踪用户的状态,这个数据可以保存在集群、数据库、文件中; Cookie是客户端保存用户信息的一种机制,

    2024年02月14日
    浏览(41)
  • Asp.Net MVC 使用Log4Net

    在 ASP.NET MVC 中使用 Log4net 需要进行一些配置和代码集成。下面是在 ASP.NET MVC 中使用 Log4net 的步骤: 打开 NuGet 包管理器控制台,并运行以下命令来安装 Log4net: 在你的 ASP.NET MVC 项目中,创建一个名为 log4net.config 的文件(或者其他名称,只要后缀是 .config 即可),用于配置

    2024年02月15日
    浏览(31)
  • 界面组件DevExpress ASP.NET Core v23.2 - 拥有全新的主题样式

    DevExpress ASP.NET Core Controls使用强大的混合方法,结合现代企业Web开发工具所期望的所有功能。该套件通过ASP.NET Razor标记和服务器端ASP.NET Core Web API的生产力和简便性,提供客户端JavaScript的性能和灵活性。ThemeBuilder工具和集成的Material Design、通用主题集可以让您提供现代化的用

    2024年01月19日
    浏览(40)
  • ASP.NET Core MVC 使用 JWT 的示例

    创建一个 ASP.NET Core MVC 项目。 添加 NuGet 包: Microsoft.AspNetCore.Authentication.JwtBearer:用于支持 JWT 的身份验证。 System.IdentityModel.Tokens.Jwt:用于生成和验证 JWT。 在 Startup.cs 文件中做如下修改: 请注意,在上述代码中,您需要将以下参数替换为实际的值: \\\"your_issuer\\\" :发行者的标

    2024年02月13日
    浏览(40)
  • 界面控件DevExpress ASP.NET Data Grid组件 - 可快速处理各类型数据!(一)

    由DevExpress开发的快速且功能完整的ASP.NET Web Forms的Data Grid组件,从全面的数据塑造和数据过滤选项到十多个集成数据编辑器,该套件提供了帮助用户构建极佳数据所需的一些,没有限制! P.S :DevExpress ASP.NET Web Forms Controls拥有针对Web表单(包括报表)的110+种UI控件,可利用轻

    2024年01月23日
    浏览(39)
  • 界面组件DevExpress ASP.NET Core v23.1新版亮点 - 增强的数据可视化

    DevExpress ASP.NET Core Controls使用强大的混合方法,结合现代企业Web开发工具所期望的所有功能。该套件通过ASP.NET Razor标记和服务器端ASP.NET Core Web API的生产力和简便性,提供客户端JavaScript的性能和灵活性。ThemeBuilder工具和集成的Material Design、通用主题集可以让您提供现代化的用

    2024年02月13日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包