當需要在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=不包含