jqGrid專題：搜索

jqGrid的搜索還是比較強大的，不過不是很喜歡，按照官方定義，jqGrid的搜索分為4種樣式，

There are four approaches:

• a toolbar searching
• a custom searching
• a single field searching
• a more complex approach involving many fields and conditions - advanced searching

對於搜索的相關樣式在語言包文件中，這是英文包的基本設置，可以根據自己的需要修改這些設置：

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"
   },

 1、Toolbar Search 就是類似在工具欄根據列設定過濾條件來搜索，觸發搜索動作可以自己設置對應的參數。

//搜索
$("#gridDemo").jqGrid("filterToolbar", {
                autoSearch: true,
                beforeSearch: function () {
                    alert("開始搜索之前");
                },
                afterSearch: function () {
                    alert("搜索之后");
                },
                searchOnEnter: true  //回車觸發搜索
});

對於每一列的搜索都可以定義searchrules，下面四個參數是colModel中可以設置的某列的搜索格式：

Option	Type	Description	Default
search	boolean	Determines if the field can be searched.	true
stype	string	Determines the search type of the field. Can be text - also a input element with type text is created and select - a select element is created	text
searchoptions	object	Object which contain definition, events and other properties for the searched field. See below
searchrules	object	Object which contain additional conditions for validating user input

對於searchoptions，可選參數有：

 

Property	Type	Description
dataUrl	string	This option is valid only for the elements of type select - i.e stype:'select'. The option represent the url from where we load the select element. When this option is set the element will be filled with values from the ajax request. The data should be a valid html select element with the desired options. By example the request should contain <select><option value=“1”>One</option> <option value=“2”>Two</option></select>. This is called only once.
buildSelect	function	This option have sense only if the dataUrl parameter is set. In case where the server response can not build the select element you can use your on function to build the select. The function should return a string containing the select and options value(s) as described in dataUrl option. Parameter passed to this function is the server response
dataInit	function	If set this function is called only once when the element is created. To this function we pass the element object. dataInit: function(elem) {  do something  }  Also use this function to attach datepicker, time picker and etc. Example:  dataInit : function (elem) { $(elem).datepicker(); }
dataEvents	array	List of events to apply to the data element; uses $(”#id”).bind(type, [data], fn) to bind events to data element. Should be described like this:  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 is object where we can set valid attributes to the created element. By example:  attr : { title: “Some title” }  Will set a title of the searched element
searchhidden	boolean	By default hidden elements in the grid are not searchable . In order to enable searching when the field is hidden set this option to true
sopt	array	This option is used only in advanced , single and toolbar field searching and determines the operation that is applied to the element. If not set all the available options will be used. When used in toolbar searching the first element is used. All available option are:  ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']  The corresponding texts are in language file and mean the following:  ['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']  Note that the elements in sopt array can be mixed in any order.
defaultValue	string	If not empty set a default value in the search input element.
value	mixed	The option is used only for stype select and defines the select options in the search dialogs. When set for stype select and dataUrl option is not set, the value can be a string or object.  If the option is a string it must contain a set of value:label pairs with the value separated from the label with a colon (:) and ended with(;). The string should not end with a (;)- editoptions:{value:“1:One;2:Two”}.If set as object it should be defined as pair value:name - editoptions:{value:{1:'One',2:'Two'}}

 對於searchrules可選參數有：

Option	Type	Description
required	boolean	(true or false) if set to true, the value will be checked and if empty, an error message will be displayed.
number	boolean	(true or false) if set to true, the value will be checked and if this is not a number, an error message will be displayed.
integer	boolean	(true or false) if set to true, the value will be checked and if this is not a integer, an error message will be displayed.
minValue	number(integer)	if set, the value will be checked and if the value is less than this, an error message will be displayed.
maxValue	number(integer)	if set, the value will be checked and if the value is more than this, an error message will be displayed.
email	boolean	if set to true, the value will be checked and if this is not valid e-mail, an error message will be displayed
url	boolean	if set to true, the value will be checked and if this is not valid url, an error message will be displayed
date	boolean	if set to true a value from datefmt option is get (if not set ISO date is used) and the value will be checked and if this is not valid date, an error message will be displayed
time	boolean	if set to true, the value will be checked and if this is not valid time, an error message will be displayed. Currently we support only hh:mm format and optional am/pm at the end
custom	boolean	if set to true allow definition of the custom checking rules via a custom function. See below
custom_func	function	this function should be used when a custom option is set to true. Parameters passed to this function are the value, which should be checked and the name - the property from colModel. The function should return array with the following parameters: first parameter - true or false. The value of true mean that the checking is successful false otherwise; the second parameter have sense only if the first value is false and represent the error message which will be displayed to the user. Typically this can look like this [false,”Please enter valid value”]

 來看下搜索的語法：

{ name: 'StuName', index: 'StuName', width: '100', search: true, stype: 'text', searchoptions: { dataInit: hello, attr: { title: '查詢姓名提示文字' } }, searchrules: {required:true} },

2、高級搜索(多條件搜索或單列搜索) Advacing Search、Single Search

在分頁工具欄顯示搜索按鈕：

$("#gridDemo").jqGrid("navGrid", "#pager",
    { add: true, del: true, edit: true, view: true },
    {},
    {},
    {},
    { multipleSearch: true, multipleGroup: true }
)

效果：

 至於點擊“查找”時發生的數據傳遞，可用瀏覽器開發工具或Fiddler查看，一些重要發送的參數為：

filters = 
   {
    "groupOp":"OR",
    "rules":[{"field":"a.id","op":"eq","data":"1"}],
    "groups":[
         {
             "groupOp":"AND",
             "rules":[{"field":"a.id","op":"eq","data":"2"}],
             "groups":[...]
         }
     ]
}

 關於搜索，暫時就寫這么多吧，后面用到了的話再續寫下，歡迎大蝦們拍磚。