第3部分：带有自定义筛选器或搜索功能的JQGrid和MVC演示

第1部分和第2部分：ASP.NET MVC-4、Entity Framework和JQGrid演示，带有简单的待办事项列表Web应用程序

• https://codeproject.org.cn/Articles/801895/Asp-Net-MVC-Entity-Framework-and-JQGrid-Demo-wit

第3部分：带有自定义筛选器或搜索功能的JQGrid和MVC演示

概述

让我们看看如何在“待办事项列表JQGrid MVC示例应用程序”中实现自定义筛选器或搜索功能。

源代码

您可以从 https://jqgridsearchfilter.codeplex.com 下载源代码。

JQGrid中的搜索功能可以通过两种方式实现

1. 客户端搜索功能（JQGrid内置功能）。

   视频：https://www.youtube.com/watch?v=5w2ycpN2jss

2. 服务器端搜索功能（自定义筛选器）

   视频：https://www.youtube.com/watch?v=gPMwsC1PBFA

1. 客户端搜索功能（JQGrid内置功能）

要实现客户端的JQGrid内置搜索功能，需要执行2个步骤。

步骤1：将“loadonce”属性添加到JQGrid并将它设置为true。

步骤2：在navGrid方法中将“search”属性设置为true。

注意：使用此方法的缺点是分页功能将被禁用，因为“loadonce”属性设置为true。因此，我们需要一次加载所有记录。并且搜索功能将由客户端的JQGrid本身执行。

2. 服务器端搜索功能（自定义筛选器）

• 将“TodoList.js”文件中的“loadonce”属性设置为false。
• 打开TodoList“Index.cshtml”页面并添加所需的筛选器。

  

  

• 添加了3个字段，即任务名称、严重程度和目标日期作为筛选器。
• 添加了一个搜索按钮来筛选数据。
• 在所有3个字段中添加了一个名为“filterItem”的类。
• 打开“TodoList.js”页面。
• 在Document.Ready Function()中添加一个jquery点击功能，以将筛选器值发布到控制器并重新加载JQGrid。

  

• 打开“TodoListController”并添加其他必需的筛选器参数。
• 还使用Linq查询处理Searchfunctionality，基于收到的参数中的值进行条件判断。

  

• 因此，最终我们在服务器端实现了自定义搜索功能。