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 如:
- filters =
- {
- "groupOp":"OR",
- "rules":[{"field":"a.id","op":"eq","data":"1"}],
- "groups":[
- {
- "groupOp":"AND",
- "rules":[{"field":"a.id","op":"eq","data":"2"}],
- "groups":[...]
- }
- ]
- }
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 |
三、单字段搜索
- <script>
- ...
- jQuery("#grid_id").searchGrid( options );
- ...
- </script>
new api:
- <script>
- ...
- jQuery("#grid_id").jqGrid('searchGrid', options );
- ...
- </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参数中设置这些选项(参见上一篇),作用效果是相同的。
即
- var singleCriterionSearch = function() {
- $("#gridTable").jqGrid("searchGrid", {
- caption: "查找",
- Find: "Go!",
- closeAfterSearch: true
- });
- };
等同于
- $("#gridTable").jqGrid("navGrid", "#gridPager", {},{},{},{},
- { // 与查询相关的prmSearch参数
- caption: "查找",
- Find: "Go!",
- closeAfterSearch: true
- },{});