jqGrid查询配置
jqGrid的列可以用于查询表单。表格查询按照规则从服务器加载数据。
有4中查询方法
-
更复杂的多字段条件查新-高级查询(advanced searching)
这些方法使用jqGrid通用选项,仅能在已经构造过的grid上调用。
每个查询方法需要附加的模块,这些模块需要倒入。
所有查询模块(除了自定义查询和工具栏查询)使用下面的语言文件中的默认定义
$.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 配置
jqGrid3.5+每个查询模块都可以使用通用查询选项。下面为一些选项,在colModel中配置。 注意,不是所有选项对特定方法都有效。
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
search | boolean | 定义此列能否被查询 | true |
stype | string | 定义此列查询输入对象的类型。可以为text或select | text |
searchoptions | object | JSON对象,包含查询域的定义,事件和其他属性,参考下面 | |
searchrules | object | JSON对象,包含验证用户输入的条件 |
searchoptions对象配置
这些配置不适用自定义查询方法,这个方法使用另外的选择
属性 | 类型 | 描述 |
---|---|---|
dataUrl | string |
仅对select元素有用,即 stype:'select'.。指定select元素通过ajax从哪个url地址获取,需要返回有效的select元素的html代码,如返回
<select> <option value=“1”>One</option> <option value=“2”>Two</option> </select> |
buildSelect | function | 仅当设置 dataUrl了参数后调用此方法。用于创建select元素(如返回json格式的数据,而不是select的html代码就需要自己构造select的html代码了)。此函数需要返回如dataUrl中定义返回的html代码,参数为服务器响应(不知道是xhr还是返回的内容,没有测试) |
dataInit | function |
元素创建时调用一次。参数为创建的元素对象。dataInit: function(elem) { //do something } 可以通过此事件绑定附加事件,如果绑定datepicker,time picker等。。 dataInit : function (elem) { $(elem).datepicker(); } |
dataEvents | array |
绑定到元素事件列表,调用$(”#id”).bind(type, [data], fn)绑定事件,格式如下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” }//给查询对象增加title属性
|
searchhidden | boolean | 默认grid中隐藏的元素不能被查询。要使隐藏域可以查询,配置这个为true |
sopt | array |
在高级,单字段,工具栏查询中使用,定义此字段可用的操作符。如果不设置,会使用所有可用操作符。用于工具栏查询第一个元素为操作符按钮(When used in toolbar searching the first element is used.),可用值为
|
defaultValue | string | 如果内容为空(个人感觉应该是这个,而不是不为空)设置查询输入元素的默认值(If not empty set a default value in the search input element.) |
value | mixed |
仅用于select元素,定义查询对话框中select的options。dataUrl没有设置时,这个值可以为字符串或者对象。 为字符串,格式如“1:item1;2:item2...”,value:text代表一个option的value和text,多个项目用分号(;)分隔开,此字符串不能以分号结 为对象,格式如 seachoptions:{value:{1:'One',2:'Two'}} |
注意:stype为select,searchoptions没有设置dataUrl,将从searchoptions的value属性获取,2个都没定义则从colModel定义的editoptions中获取。
colModel 调用方式
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(); }
searchrules
在colModel中定义可查询元素附加的属性。通常用于在提交数据到服务器前,验证用户输入的数据,调用方式
jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., searchrules:{required:true....}, search:true }, ... ] ... });
下面为可用选项
配置 | 类型 | 描述 |
---|---|---|
required | boolean | (true or false)设置为true,不允许内容为空,为空将会显示一个错误信息。 |
number | boolean | (true or false)设置为true,输入内容只能为数字,否则将会显示一个错误信息。 |
integer | boolean | (true or false)设置为true,输入内容只能为整数,否则将会显示一个错误信息。 |
minValue | number(integer) | 最小值,如果内容小于这个配置值,将会显示错误信息。 |
maxValue | number(integer) | 最大值,如果内容大于这个配置值,将会显示错误信息。 |
boolean | 设置为true,输入内容格式需要满足email格式要求,否则将会显示一个错误信息。 | |
url | boolean | 设置为true,输入内容格式需要满足url格式要求,否则将会显示一个错误信息。 |
date | boolean | 设置为true,输入内容格式需要满足日期格式要求(使用ISO格式,”Y-m-d“),否则将会显示一个错误信息。 |
time | boolean | 设置为true,输入内容格式需要满足时间格式要求,否则将会显示一个错误信息。 目前仅支持”hh:mm“和后接可选的 am/pm 时间格式 |
custom | boolean | 设置为true,允许使用自定义的验证方法,如下 |
custom_func | function | custom设置为true时需要配置此函数。函数参数,输入控件的值,name名称(来自colModel)。 函数需要返回一个数组包含以下项目 第一项:true/false,指定验证是否成功 第二项:当第一项为false有效,显示给用户的错误信息。 格式如:[false,”Please enter valid value”] |
“searchrules仅用于查询对话框,不用于查询过滤(searching filter)”,参考:[http://stackoverflow.com/a/9011733]
自定义验证示例
function mypricecheck(value, colname) { if (value < 0 || value >20) return [false,"Please enter value between 0 and 20"]; else return [true,""]; } jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., searchrules:{custom:true, custom_func:mypricecheck....}, search:true }, ... ] ... });
你需要知道的
-
所有查询模块使用jqGrid配置中的url。某些方法的参数可以配置来替代这个url。
-
执行查询时,postData中自动填充需要的数据。
-
配置jqGrid的search参数以便启用查询功能。服务器端的名称为 _search(注意不同),可以通过GET或者POST方法获取。
-
jqGrid有searchdata配置,给查询附加额外参数,用于扩展postData对象。(For the search we have additional array searchdata array in the grid options. This array extends the postData array). -
点击导航层的刷新按钮触发grid重新加载时,search被设置为false。
-
每个查询方法创建自己的方法用于清空postData对象中的查询数据。
来源:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config
加支付宝好友偷能量挖...
原创文章,转载请注明出处:jqGrid查询配置