jqGrid单字段查询

　　单字段查询从服务器查询数据，一次只对一个字段进行查询。使用这个方法构造一个模态表单，用户可以选择一个字段用于查询。

这个方法使用url提交数据，自定义和工具栏查询方法不一样。不同就是提交的数据不是键值对，参考下面数据如何提交

安装

要使用这个模块，你需要在下载页面勾选Common, Form Edit, filter插件，下载地址：http://www.trirand.com/blog/?page_id=6

调用形式

jQuery("#grid_id").searchGrid( options );
//新API
jQuery("#grid_id").jqGrid('searchGrid', options );

方法说明

grid_id：已经构造过的表格id
options ：配置，键值对对象

　　调用这个方法启用模态对话框，grid无法操作直到对话框关闭。这个方法是导航条查询方法的默认值。导航条中的查询参数也可以而用下面的方法来设置

jQuery("#grid_id").jqGrid({
//...
   pager : '#gridpager',
//...
}).navGrid('#gridpager',{view:true, del:false}, 
{}, //  default settings for edit
{}, //  default settings for add
{},  // delete instead that del:false we need this
{search_options}, // search options
{} /* view parameters*/
);

　　默认对话框出现表格左上角。查询对话框添加了一个新配置overlay（默认10）。设置为0遮盖层将被禁用，用户可以和grid对象交互。

选项

方法使用如下默认配置，来自语言文件 grid.locale-xx ，可以传递进查询方法。

$.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']
   },
...

Option	Type	Description	Default
afterShowSearch	function	查询对话框显示后触发的事件	null
beforeShowSearch	function	查询对话框显示前触发的事件	null
closeAfterSearch	boolean	点击查询按钮后，对话框是否关闭。设置为true关闭，否则不关闭	false
closeAfterReset	boolean	点击重设按钮是否关闭对话框。设置为true关闭，否则不关闭	false
drag	boolean	是否允许拖拽对话框	true
jqModal	boolean	设置为true将使用jqModal插件创建对话框（如果用script加载了这个插件），而不是用jqGrid内置的函数来创建对话框	true
resize	boolean	设置对话框是否可以更改大小	true
modal	boolean	设置对话框是否为模态（就是是否显示所谓的遮盖层，lightbox效果）	false
width	integer	查询对话框的宽	450
height	mixed	查询对话框的高	auto
top	integer	模态窗口初始化顶部位置。默认值为0，表示出现在grid顶部。如果jqModel设置为true，那么将启用jqModal插件来呈现内容，此时模态窗口是相对于window定位，不在是grid对象。	0
left	integer	模态窗口初始化左边位置。默认值为0，表示出现在grid的左边。如果jqModel设置为true，那么将启用jqModal插件来呈现内容，此时模态窗口是相对于window定位，不在是grid对象。	0
caption	string	对话框标题	see lang file
showQuery	boolean	尽在高级查询中有效。设置为true显示用户定义的查询条件。显示一个按钮允许用户点击显示或者隐藏查询字符。	false
searchOnEnter	boolean	定义查询是否允许通过按下Enter键触发	false
Find	string	查询按钮的文本	see lang file
multipleSearch	boolean	设置为true表示为高级查询	false
multipleGroup	boolean	设置为true，高级查询可以定义复杂的分组条件	false
odata	array	通过sopt选转换字符串	see lang file
onClose	function	对话框关闭是触发的事件。可以返回true/false，返回false不关闭对话框	null
afterRedraw	function	点击过滤按钮后每次都触发的事件：删除或者添加规则或者字段时按下过滤器按钮。查询参数作为函数的参数。	null
onSearch	function	点击查询按钮后触发	null
onReset	function	重置按钮点击后触发	null
closeOnEscape	boolean	按下ESC键是否关闭查询对话框	false
onInitializeSearch	function	在对话框创建时触发一次	null
recreateForm	boolean	设置为ture，表单每次都从colModel（如果修改过）中获取新选项来创建当对话框激活后。	false
showOnLoad	boolean	此配置仅在导航（navigator）中配置。设置为true，表格首次加载时自动显示对话框	false
errorcheck	boolean	是否启用searchrules中配置的数据验证。如果输入数据有效性不通过，会提示错误信息，不向服务器提交数据	true
Reset	string	重置（清除）按钮显示的内容	see lang file
sField	string	查看 sopt 描述	searchField
sFilter	string	对高级查询适用，参考：jqGrid高级查询	filters
sOper	string	查看 sopt 描述	searchOper
sopt	array	设置查询规则。没有设置可用选项时，将使用预定义的所有操作符，可用值有 ['eq','ne','lt','le','gt','ge','bw','bn','in','ni' ,'ew','en','cn','nc','nu','nn'] 对应的语言文件中的操作符详细描述 ['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','is null','is not null'] sopt中操作符可以以任何循序出现
sValue	string	查看 sopt 描述	searchString
overlay	integer	设置为0遮盖层将被禁用，用户可以和grid对象交互。	10
layer	string	需要为一个有效的dom元素，查询将会插入到这个对象中作为此对象的子元素。	null
tmplNames	array	Defines the name of the templates used for easy user input - by example like this : ['Template1', 'Template2',…].。看下载的示例如何定义模板。	null
tmplFilters	array of objects	定义这个需要和tmplNames对应。看下载的示例如何定义模板。	null
tmplLabel	string	定义了模板，一个select元素会出现在重置和查找按钮之间，描述select的文本内容。	Template:
zIndex	integer	设置对话框的z-index css属性。	950

　　如上面提到的，自定义和工具栏查询提交的数据是不同的。点击查询按钮，jqGrid添加三个参数（键值对）到提交的数据去（_search=true必定附加的）

sField：查询名称，来自colModel的index配置（没配置index则为name）
sValue：输入对象的值
sOper：查询操作符，参考sopt

　　示例，如果index为invid，操作符为equal，查询值为123，提交到服务器的值如下

http://localhost/demo35/server.php?...&searchField=invid&searchString=123&searchOper=eq

colModel 选项

　　jqGrid3.5+在colModel中使用通用配置，每个查询方法都使用到。下面列出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> ，仅调用一次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” }<span style="font-family: Arial,Verdana,sans-serif;">//给查询对象增加title属性</span>
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 },
      ...
   ]
...
});

来源：www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching#options

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

原创文章，转载请注明出处：jqGrid单字段查询

2013-7-6评论(0)Web开发网

阅读(2013)喜欢(1)分类：jqGrid中文API