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);
jQuery("#grid_id").jqGrid('filterToolbar',options);
options:参数
可选参数 | 类型 | 描述 | 默认值 |
autosearch | boolean | 查询规则,如果是text类型则是当按下回车键才去执行查询;如果是select类型的查询则当值改变时就去执行查询 | true |
beforeSearch | function | 执行查询之前触发此事件 | null |
afterSearch | function | 查询完成后触发事件 | null |
beforeClear | function | 清空查询条件值时触发事件 | null |
afterClear | function | 清空查询条件后触发事件 | null |
方法:
方法 | 描述 |
triggerToolbar | 执行查询时调用此方法 |
clearToolbar | 当清空查询条件值时触发此函数 |
toggleToolbar | Toggeles工具栏 |
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 |