jqgrid--search

jqgrid学习---------搜索

表格中的所有列都可以作为搜索条件。

所用到的语言包文件

· $.jgrid = { 

· ... 

·    search : { 

·      caption: "Search...", 

·      Find: "Find", 

·      Reset: "Reset", 

·      odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'], 

·      groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ], 

·      matchText: " match", 

·      rulesText: " rules" 

·    }

colModel 设置

可选参数	类型	说明	默认值
search	boolean	是否是搜索列	true
stype	string	搜索类型，text类型或者select类型	text
searchoptions	object	对搜索条件进行一些设置

searchoptions 参数

属性	类型	说明
dataUrl	string	只有当搜索类型为select才起效
buildSelect	function	只有当dataUrl设置时此参数才起效，通过一个function来构建下拉框
dataInit	function	初始化时调用，用法：dataInit: function(elem) {do something}通常用在日期的选择上. Example:dataInit : function (elem) {$(elem).datepicker();}
dataEvents	array	事件列表，用法：dataEvents: [{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }},{ type: 'keypress', fn: function(e) { console.log('keypress'); } }]
attr	object	设置属性值。attr : { title: “Some title” }
searchhidden	boolean	默认情况下，隐藏值不是搜索列。为了使隐藏值可以作为搜索列则将此设为true
sopt	array	此参数只用到单列搜索上，说明搜索条件。可用值： ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']意思为['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain']
defaultValue	string	默认值
value	mixed	只用在搜索类型为select下。可以是string或者object，如果为string则格式为value:label，且以“；”结尾；如果为object格式为editoptions:{value:{1:'One';2:'Two'}}

· jQuery("#grid_id").jqGrid({ 

· ... 

·    colModel: [  

·       ...  

·       {name:'price', index:'price', width:60, search:true, stype:'text', searchoptions:{dataInit:datePick, attr:{title:'Select Date'}} }, 

·       ... 

·    ] 

· ... 

· }); 

· datePick = function(elem) 

· { 

·    jQuery(elem).datepicker(); 

· }

需要说明的：
所有的搜索都是使用url来到服务器端查询数据。 
当执行搜索时会用查询数据填充postData array 
发送到服务器端搜索字符串的名称为_search 
当点击刷新按钮时不会使用搜索条件 
每个搜索方法都有自己的数据清空方法

一、Jqgrid学习 -------搜索工具栏

搜索工具栏只是在列标题下面构造一个输入框。且使用表格的url进行搜索记录，发到服务器端数据格式为name:value，而且是附加在postData(请求的数据)之后。

jQuery("#grid_id").filterToolbar(options); 

new api：

jQuery("#grid_id").jqGrid('filterToolbar',options); 

options：参数

可选参数	类型	描述	默认值
autosearch	boolean	查询规则，如果是text类型则是当按下回车键才去执行查询；如果是select类型的查询则当值改变时就去执行查询	true
beforeSearch	function	执行查询之前触发此事件	null
afterSearch	function	查询完成后触发事件	null
beforeClear	function	清空查询条件值时触发事件	null
afterClear	function	清空查询条件后触发事件	null

searchOnEnter           boolean           搜索规则，为true则看autosearch属性，为false当输入时则立即执行搜索    true

stringResult                boolean           决定怎样发送数据，为false则按key=value的格式，为true则发送一个filters对象    false  如：

[javascript] view plain copy

1. filters =   
2.    {  
3.     "groupOp":"OR",  
4.     "rules":[{"field":"a.id","op":"eq","data":"1"}],  
5.     "groups":[  
6.          {  
7.              "groupOp":"AND",  
8.              "rules":[{"field":"a.id","op":"eq","data":"2"}],  
9.              "groups":[...]  
10.          }  
11.      ]  
12. }  

groupOp                  string                  当stringResult为true时有效，决定查询组合的操作符，可选AND、OR          默认：AND 。如上图

方法：

方法	描述
triggerToolbar	执行查询时调用此方法
clearToolbar	当清空查询条件值时触发此函数
toggleToolbar	Toggeles工具栏

注意： 这三种方法在new api无效

二、Jqgrid学习 -------自定义搜索(和工具栏搜索类似)

<div id="mysearch"></div>

jQuery("#mysearch").filterGrid('#grid_id',options);

options：参数

参数	描述	默认值
gridModel	当为ture我们会使用colModel中的属性构造查询条件，所用到的参数：name, index, edittype, editoptions, search.还有一个参数：defval：查询条件的默认值；surl：当edittype:'select'时获取select数据的url，格 式：<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select>	false
gridNames	gridModel为true时起效，设置查询列的名称	false
filterModel	gridModel为false时起效，格式：{label:'LableFild', name: 'colname', stype: 'select', defval: 'default_value', surl: 'someurl', sopt:{optins for the select}}。label：字段显示名称；name：列名；stype：输入框类型，text或者select；surl：获取select数据的地 址，要求的内容为html格式：<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select>；sopt：同editoptions	[]
formtype	定义表单如何被构造，'horizontal' or 'vertical'
autosearch	如果为true:当点击回车键触发查询；当select值变化时触发查询
formclass	可以使用的css	filterform
tableclass	可以使用到table上的css	filtertable
buttonclass	按钮上使用的css	filterbutton
searchButton	搜索按钮	Search
clearButton	清空数据的按钮	Clear
enableSearch	启用禁用搜索按钮	false
enableClear	启用禁用清空按钮	false
beforeSearch	搜索之前触发的事件	null
afterSearch	搜索完成之后触发的事件	null
beforeClear	清空数据之前触发的事件	null
afterClear	清空数据之后触发事件	null
url	搜索数据的url	‘’
marksearched	当为true时，每次查询之后所有查询的列都标记为可查询列	true

 

三、单字段搜索

[javascript] view plain copy

1. <script>  
2. ...   
3. jQuery("#grid_id").searchGrid( options );  
4. ...  
5. </script>  

new api：

[javascript] view plain copy

1. <script>  
2. ...   
3. jQuery("#grid_id").jqGrid('searchGrid', options );  
4. ...  
5. </script>  

在Navigator按钮栏中的查询按钮，默认就是调用这个方法。

 

searchGrid也有很多选项，在language文件（grid.locale-xx.js）中，有关于这些选项的默认值定义。下面介绍一下主要常用的选项：

• afterShowSearch：用于定义每次查询对话框显示之后，要执行的事件函数；
• beforeShowSearch：用于定义每次查询对话框显示之前，要执行的事件函数；
• caption：查询对话框的标题；
• closeAfterSearch：如果设为true，则每次在查询对话框中点击“查询”按钮完成查询后，对话框都会被关闭；默认为false；
• closeAfterReset：如果设为true，则每次在查询对话框中点击“重置”按钮完成查询后，对话框都会被关闭；默认为false；
• closeOnEscape：如果设为true，则当按ESC键的时候，对话框会被关闭；默认为false；
• Find：查询对话框里“查询”按钮上的文本；
• Reset：查询对话框里“重置”按钮上的文本；
• sopt：用来设置通用的查询规则，如['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']；如果为设置，则使用全部规则；
• odata：用来翻译sopt中规则的对应数组；
• onClose：当查询对话框关闭时，将要执行的事件函数。可以返回true或false；如果返回false，则查询对话框不会被关闭。
• onInitializeSearch：当查询对话框创建时，将要执行的事件函数。
• recreateFilter：如果设置为true，则当动态改变colModel的属性时，重建查询并解除时间绑定。
• sField, sOper, sValue：当提交查询请求时，对应着所包含的有关于查询的参数；默认值分别是'searchField'，'searchOper'，'searchString'。
• drag ：boolean 能否拖拽搜索框 ，默认：true
• multipleSearch ：boolean  多字段查询 默认：false
• cloneSearchRowOnAdd ：boolean 当multipleSearch为true时有效 默认：true

注意：在searchGrid方法中设定这些选项，和在navGrid方法的prmSearch参数中设置这些选项（参见上一篇），作用效果是相同的。

即

[javascript] view plain copy

1. var singleCriterionSearch = function() {    
2.     $("#gridTable").jqGrid("searchGrid", {    
3.         caption: "查找",    
4.         Find: "Go!",    
5.         closeAfterSearch: true    
6.     });    
7. };    

等同于

[javascript] view plain copy

1. $("#gridTable").jqGrid("navGrid", "#gridPager", {},{},{},{},    
2.     {   // 与查询相关的prmSearch参数    
3.         caption: "查找",    
4.         Find: "Go!",    
5.         closeAfterSearch: true    
6.     },{});