jqGrid的搜索框下拉

当需要在jqGrid的搜索框里配置搜索条件时，如下拉，日期等，代码如下：

1      datePick = function(elem)
2      {
3          jQuery(elem).datepicker();
4      }
 1         colNames  : [ "OP_ID", "OP_Module", "OP_Type", "OP_Content", "Operator", "OperatorType", "OP_Time", "OP_IP"],
 2         colModel  : [{name:'op_id', index:'op_id', width:100, align:'center', editable:false, search:false},
 3                      {name:'op_module', index:'op_module', width:110, align:'center', search:true, editable:false,
 4                          stype:'select', searchoptions: {dataUrl:'./select/module', sopt:['eq', 'ne']}},
 5                      {name:'op_type', index:'op_type', width:100, align:'center', search:true, editable:false,
 6                          stype:'select', searchoptions: {dataUrl:'./select/type', sopt:['eq', 'ne']}},
 7                      {name:'op_content', index:'op_content',  width:250, align:'center', editable:false, sortable:false,
 8                          stype:'text', searchoptions: {sopt:['bw', 'bn', 'ew', 'en','cn', 'nc']}},
 9                      {name:'op_by', index:'op_by', width:100, align:'center', search:true, editable:false},
10                      {name:'operator_type', index:'operator_type', width:130, search:true, align:'center', editable:false,
11                          stype:'select', searchoptions: {dataUrl:'./select/operator_type', sopt:['eq', 'ne']}},
12                      {name:'op_at', index:'op_at', width:170, align:'center', search:true, editable:false, 
13                          stype:'text', searchoptions: {dataInit:datePick, attr:{title:'Select Date'}, sopt:['cn', 'nc', 'in', 'ni']}, formatter:'date', formatoptions:{srcformat: 'Y-m-d H:i:s', newformat: 'm/d/Y  H:i:s'}},
14                      {name:'op_ip', index:'op_ip', width:100, align:'center', search:true, editable:false}
15                     ],

 

其中，colModel的属性的stype有“text”和“select”两种，需要下拉选项时，则选择“select”；同时，searchoptions也进行设置，dataUrl为请求路由，路由返回的数据是

<select><option>1</option></select>的格式；重要的是需设定：ajaxSelectOptions: {type: "GET"} ，其中type可以是Post，这样你的搜索才能返回数据。

1     jQuery(grid_selector).jqGrid({        
2         url                : "./show_log",
3         datatype           : "json",
4         mtype            　: "post",
5         height           　: 370,
6         width            　: 1150,
7         ajaxSelectOptions　: {type: "GET"} ,

 

而想显示日期选择框时，stype设定为“type”，searchoptions: {dataInit:datePick, attr:{title:'Select Date'}, sopt:['cn', 'nc', 'in', 'ni']},

formatter:'date', formatoptions:{srcformat: 'Y-m-d H:i:s', newformat: 'm/d/Y H:i:s'}}。其中，formatoptions可以自己设置需要的格式。

 

搜索框搜索时会向后台传递数据，字段为：filters，是一个数组，每个搜索条件对应着三个内容：'field'，'op'，’data‘，如下：

  filters=[
    {field:'field1', op:'eq', data:'keyword1'},
    {field:'field2', op:'ne', data:'keyword2'}
]

op=
eq=等于
ne=不等
lt=小于
le=小于等于
gt=大于
ge=大于等于
bw=开始于
bn=不开始于
in=在内
ni=不在内
ew=结束于
en=不结束于
cn=包含
nc=不包含 
posted @ 2014-11-10 12:06  林锅  阅读(8852)  评论(0)  编辑  收藏  举报