【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 public class 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 private void 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 grid 12 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 match 17 SetUpSearchDialogGrid(ordersGrid); 18 19 // Pass the custmomized grid model to the View 20 return View(gridModel); 21 } 22 23 // This method is called when the grid requests data 24 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 settings 32 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, etc 36 return gridModel.OrdersGrid.DataBind(northWindModel.OrdersLarges); 37 }

2 单搜索选项的 Search Dialog

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

1 private void 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 private void 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 private void 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 private void SetUpCustomerIDSearchDropDown(JQGrid ordersGrid) 14 { 15 // setup the grid search criteria for the columns 16 JQGridColumn customersColumn = ordersGrid.Columns.Find(c => c.DataField == " CustomerID " ); 17 customersColumn.Searchable = true ; 18 19 // DataType must be set in order to use searching 20 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 performance 25 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 private void SetUpFreightSearchDropDown(JQGrid ordersGrid) 41 { 42 // setup the grid search criteria for the columns 43 JQGridColumn freightColumn = ordersGrid.Columns.Find(c => c.DataField == " Freight " ); 44 freightColumn.Searchable = true ; 45 46 // DataType must be set in order to use searching 47 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 performance 52 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 private void 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 }