当需要在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可以自己设置需要的格式。
op=
eq=等于
ne=不等
lt=小于
le=小于等于
gt=大于
ge=大于等于
bw=开始于
bn=不开始于
in=在内
ni=不在内
ew=结束于
en=不结束于
cn=包含
nc=不包含