jqGrid的列可以用于查询表单。表格查询按照规则从服务器加载数据。

目前没有查询本地数据的模块当datatype设置为local。所有查询都是通过服务器(Currently we do not have module for searching on local data i.e when a datatype options is set to local. All the searching is done server side).

有4中查询方法

这些方法使用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代码，如返回

One

Two

，仅调用一次his is called only once.

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.)，可用值为

['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']

sopt数组中操作符可以以任何循序出现。

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)

最大值，如果内容大于这个配置值，将会显示错误信息。

email

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对象中的查询数据。

加支付宝好友偷能量挖...

原创文章，转载请注明出处：jqGrid查询配置

2013-7-6Web开发网

阅读(918)喜欢(0)