【jqGrid for ASP.NET MVC Documentation】.学习笔记.7.搜索过滤数据

1 基础

搜索和过滤功能，是使用确定的条件，查找匹配行数据。jqGrid提供几种搜索模式：

• Search Dialog 单搜索选项
• Search Dialog 多搜索选项
• ToolBar Searching 使用toobar的过滤

默认地，过滤会自动执行。每个 grid column 都有一个叫做 Searchable 的属性，默认为 true。如果设为 false，column 不会显示在 search dialog 和/或 toolbar。可以使用 ToolBarSetting.ShowSearchToolBar 和 ToolBarSetting.ShowSearchButton 属性控制显示搜索选项。

搜索属性和其关联选项，能在 Model 和 Controller 中设置。Controller会覆盖 Model 。

MODEL中：

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using Trirand.Web.Mvc; 6 using System.Web.UI.WebControls; 7 8 namespace JQGridMVCExamples.Models 9 { 10 publicclass OrdersJqGridModel 11 { 12 public OrdersJqGridModel() 13 { 14 OrdersGrid =new JQGrid 15 { 16 Columns =new List<JQGridColumn>() 17 { 18 new JQGridColumn { DataField ="OrderID", 19 Width =50 }, 20 new JQGridColumn { DataField ="OrderDate", 21 Width =100, 22 DataFormatString ="{0:d}" }, 23 new JQGridColumn { DataField ="CustomerID", 24 Width =100 }, 25 new JQGridColumn { DataField ="Freight", 26 Width =75 }, 27 new JQGridColumn { DataField ="ShipName" } 28 }, 29 Width = Unit.Pixel(640) 30 }; 31 32 OrdersGrid.ToolBarSettings.ShowRefreshButton =true; 33 } 34 35 public JQGrid OrdersGrid { get; set; } 36 } 37 }

CONTROLLER中

1 privatevoid SetUpSearchDialogGrid(JQGrid ordersGrid) 2 { 3 // show the search toolbar 4 ordersGrid.ToolBarSettings.ShowSearchButton =true; 5 ordersGrid.Columns.Find(c => c.DataField =="OrderID").Searchable =false; 6 ordersGrid.Columns.Find(c => c.DataField =="OrderDate").Searchable =false; 7 8 JQGridColumn customersColumn = ordersGrid.Columns.Find(c => c.DataField =="CustomerID"); 9 customersColumn.Searchable =true; 10 customersColumn.DataType =typeof(string); 11 12 JQGridColumn freightColumn = ordersGrid.Columns.Find(c => c.DataField =="Freight"); 13 freightColumn.Searchable =true; 14 freightColumn.DataType =typeof(decimal); 15 16 JQGridColumn shipNameColumns = ordersGrid.Columns.Find(c => c.DataField =="ShipName"); 17 shipNameColumns.Searchable =true; 18 shipNameColumns.DataType =typeof(string); 19 }

• 在 Controller 中，我们定义了 SetUpSearchDialogGrid 方法，来设置要搜索的 columns。
• controller 会覆盖 Model 中的设置
• 我们通过使用 ordersGrid.ToolBarSetting.ShowSearchButton=true，来设置ToolBar 的模式
• 一些 columns 能搜索，一些不能
• 你需要定义 columns 的数据类型属性

需要在 默认 action 和 data requested action 中调用设置方法。

1 public ActionResult SearchDialog() 2 { 3 // Get the model (setup) of the grid defined in the /Models folder. 4 var gridModel =new OrdersJqGridModel(); 5 var ordersGrid = gridModel.OrdersGrid; 6 7 // Customize/change some of the default settings for this model 8 // ID is a mandatory field. Must by unique if you have several grids on one page. 9 ordersGrid.ID ="OrdersGrid"; 10 // Setting the DataUrl to an action (method) in the controller is required. 11 // This action will return the data needed by the grid12 ordersGrid.DataUrl = Url.Action("SearchDialog_DataRequested"); 13 14 // customize the default Orders grid model with custom settings 15 // NOTE: you need to call this method in the action that fetches the data as well, 16 // so that the models match17 SetUpSearchDialogGrid(ordersGrid); 18 19 // Pass the custmomized grid model to the View20 return View(gridModel); 21 } 22 23 // This method is called when the grid requests data24 public JsonResult SearchDialog_DataRequested() 25 { 26 // Get both the grid Model and the data Model 27 // The data model in our case is an autogenerated linq2sql database based on Northwind.28 var gridModel =new OrdersJqGridModel(); 29 var northWindModel =new NorthwindDataContext(); 30 31 // customize the default Orders grid model with our custom settings32 SetUpSearchDialogGrid(gridModel.OrdersGrid); 33 34 // return the result of the DataBind method, passing the datasource as a parameter 35 // jqGrid for ASP.NET MVC automatically takes care of paging, sorting, filtering/searching, etc36 return gridModel.OrdersGrid.DataBind(northWindModel.OrdersLarges); 37 }

2 单搜索选项的 Search Dialog

通过设置 ToolBarSetting.ShowSearchButton 为 True，会启用 搜索对话框按钮。

1 privatevoid SetUpSearchDialogGrid(JQGrid ordersGrid) 2 { 3 // show the search toolbar 4 ordersGrid.ToolBarSettings.ShowSearchButton =true; 5 ordersGrid.Columns.Find(c => c.DataField =="OrderID").Searchable =false; 6 ordersGrid.Columns.Find(c => c.DataField =="OrderDate").Searchable =false; 7 8 JQGridColumn customersColumn = ordersGrid.Columns.Find(c => c.DataField =="CustomerID"); 9 customersColumn.Searchable =true; 10 customersColumn.DataType =typeof(string); 11 12 JQGridColumn freightColumn = ordersGrid.Columns.Find(c => c.DataField =="Freight"); 13 freightColumn.Searchable =true; 14 freightColumn.DataType =typeof(decimal); 15 16 JQGridColumn shipNameColumns = ordersGrid.Columns.Find(c => c.DataField =="ShipName"); 17 shipNameColumns.Searchable =true; 18 shipNameColumns.DataType =typeof(string); 19 }

3 多搜索项的 Search Dialog

1 privatevoid SetUpSearchDialogGrid(JQGrid ordersGrid) 2 { 3 // show the search toolbar 4 ordersGrid.ToolBarSettings.ShowSearchButton =true; 5 ordersGrid.SearchDialogSettings.MultipleSearch =true; 6 ordersGrid.Columns.Find(c => c.DataField =="OrderID").Searchable =false; 7 ordersGrid.Columns.Find(c => c.DataField =="OrderDate").Searchable =false; 8 9 JQGridColumn customersColumn = ordersGrid.Columns.Find(c => c.DataField =="CustomerID"); 10 customersColumn.Searchable =true; 11 customersColumn.DataType =typeof(string); 12 13 JQGridColumn freightColumn = ordersGrid.Columns.Find(c => c.DataField =="Freight"); 14 freightColumn.Searchable =true; 15 freightColumn.DataType =typeof(decimal); 16 17 JQGridColumn shipNameColumns = ordersGrid.Columns.Find(c => c.DataField =="ShipName"); 18 shipNameColumns.Searchable =true; 19 shipNameColumns.DataType =typeof(string); 20 }

4 Search ToolBar

搜索工具条功能，是用来在 grid 的顶部 直接显示过滤。设置 ToolBarSetting.ShowSearchToolBar 为 true 启用。

当一个 column 可搜索，你可以选择最终用户怎样编辑它。这是通过 Column.SearchType的属性 和两个不同的选项控制的——TextBox 和 DropDown。

另外，你可以指定最终用户看到的值：Columns 的 EditValues 属性的 name pairs，这对DropDown 很有用。

1 privatevoid SetUpGrid(JQGrid ordersGrid) 2 { 3 // show the search toolbar 4 ordersGrid.ToolBarSettings.ShowSearchToolBar =true; 5 ordersGrid.Columns.Find(c => c.DataField =="OrderID").Searchable =false; 6 ordersGrid.Columns.Find(c => c.DataField =="OrderDate").Searchable =false; 7 8 SetUpCustomerIDSearchDropDown(ordersGrid); 9 SetUpFreightSearchDropDown(ordersGrid); 10 SetShipNameSearchDropDown(ordersGrid); 11 } 12 13 privatevoid SetUpCustomerIDSearchDropDown(JQGrid ordersGrid) 14 { 15 // setup the grid search criteria for the columns16 JQGridColumn customersColumn = ordersGrid.Columns.Find(c => c.DataField =="CustomerID"); 17 customersColumn.Searchable =true; 18 19 // DataType must be set in order to use searching20 customersColumn.DataType =typeof(string); 21 customersColumn.SearchToolBarOperation = SearchOperation.IsEqualTo; 22 customersColumn.SearchType = SearchType.DropDown; 23 24 // Populate the search dropdown only on initial request, in order to optimize performance25 if (ordersGrid.AjaxCallBackMode == AjaxCallBackMode.RequestData) 26 { 27 var northWindModel =new NorthwindDataContext(); 28 var searchList = from customers in northWindModel.Customers 29 select new SelectListItem 30 { 31 Text = customers.CustomerID, 32 Value = customers.CustomerID 33 }; 34 35 customersColumn.SearchList = searchList.ToList<SelectListItem>(); 36 customersColumn.SearchList.Insert(0, new SelectListItem { Text ="All", Value ="" }); 37 } 38 } 39 40 privatevoid SetUpFreightSearchDropDown(JQGrid ordersGrid) 41 { 42 // setup the grid search criteria for the columns43 JQGridColumn freightColumn = ordersGrid.Columns.Find(c => c.DataField =="Freight"); 44 freightColumn.Searchable =true; 45 46 // DataType must be set in order to use searching47 freightColumn.DataType =typeof(decimal); 48 freightColumn.SearchToolBarOperation = SearchOperation.IsGreaterOrEqualTo; 49 freightColumn.SearchType = SearchType.DropDown; 50 51 // Populate the search dropdown only on initial request, in order to optimize performance52 if (ordersGrid.AjaxCallBackMode == AjaxCallBackMode.RequestData) 53 { 54 List<SelectListItem> searchList =new List<SelectListItem>(); 55 searchList.Add(new SelectListItem { Text ="> 10", Value ="10" }); 56 searchList.Add(new SelectListItem { Text ="> 30", Value ="30" }); 57 searchList.Add(new SelectListItem { Text ="> 50", Value ="50" }); 58 searchList.Add(new SelectListItem { Text ="> 100", Value ="100" }); 59 60 freightColumn.SearchList = searchList.ToList<SelectListItem>(); 61 freightColumn.SearchList.Insert(0, new SelectListItem { Text ="All", Value ="" }); 62 } 63 } 64 65 privatevoid SetShipNameSearchDropDown(JQGrid ordersGrid) 66 { 67 JQGridColumn freightColumn = ordersGrid.Columns.Find(c => c.DataField =="ShipName"); 68 freightColumn.Searchable =true; 69 freightColumn.DataType =typeof(string); 70 freightColumn.SearchToolBarOperation = SearchOperation.Contains; 71 freightColumn.SearchType = SearchType.TextBox; 72 }