jqgrid学习

Posted 2020-10-03

jqgrid自带查询

1查询方式为通过加载远程数据生成下拉列表供用户选择:

前台：

//下拉列的数据
{
        				name : ‘applicationDeptId‘,
        				index : ‘applicationDeptId‘,
        				label : ‘申报部门‘,
        				width : 150,
        				//hidden : true,
        				editable : false,
        				editoptions : {
        					size : "20",
        					maxlength : "20"
        				},
                                        //设置查询方式为下拉列表
        				stype : ‘select‘,
        			    searchoptions : {
        			    	sopt : [‘eq‘],
                                        //通过此地址来加载后台传入的数据
        			    	dataUrl	: "${contextPath}/sys/sysdept/getDepts"
        			    }
        			},        

　　

后台：

//后台查询数据，并封装为下拉列表字符串然后传入前台
@RequestMapping(value="/getDepts",method={RequestMethod.POST,RequestMethod.GET})
public void getDepts(HttpServletRequest request,HttpServletResponse response) throws IOException{
		Search search = new Search();
		List<SysDeptEntity> deptList=sysDeptService.search(search);
		StringBuffer resultJson = new StringBuffer();
		resultJson.append("<select>");
		resultJson.append("<option value=‘‘>" + "" +"</option>");
		for(SysDeptEntity deptEntity : deptList){
			resultJson.append("<option value=‘" + deptEntity.getId() + "‘>" + deptEntity.getDeptName() +"</option>");
		}
		resultJson.append("</select>");
		writeJSON(response, resultJson.toString());
		
	}

　　

2查询性别一类的枚举类型数据时(即此时1指代男生，2指代女生):

前台:

{
					name : ‘sex‘,
    				index : ‘sex‘,
    				label : ‘性别‘,
    				width : 30,
    				editable : true,
    				edittype : "select",
    				editoptions : {value : "1:男;2:女"},
                    formatter : ‘select‘,
    				search : false,
    				formoptions:{rowpos:3,colpos:1}
				}
//此时当查询时，传入前台的数据选择男则是“1”(选择女则是2)

3查询与datepicker插件组合时(即查询时间时通过选择而不是由用户输入):

1.显示时间

前台:

//设置查询框要显示的样式
datePick =  function(elem){
		                jQuery(elem).datetimepicker({
                                       //表示用户选择的时间最后只保留到分钟
		               		format : ‘yyyy-mm-dd hh:ii‘,
		     				autoclose : true,
		     				language: ‘zh-CN‘
		                });
		            }
//jqgrid列
{
	       			     name : ‘constructEndTime‘,
	       			     index : ‘constructEndTime‘,
	       			     label : ‘施工结束时间‘ ,
	       			     width : 90,     
	       			     editable : true ,     
	       			     search : true,
	       			     editrules : {required : true},
	       			     formatter:‘date‘,
	       			     formatoptions:{srcformat: ‘Y-m-d H:i:s‘, newformat: ‘H:i:s‘},
        				 hidden:(hiddenColsJSON.constructEndTime==‘true‘),
        				 searchoptions: {
        					sopt : [‘eq‘,‘ne‘,‘lt‘,‘le‘,‘gt‘,‘ge‘],
        					dataInit:datePick,  //表示要引用的方法
        					attr:{title:‘选择日期‘}
        				 }
	       			  }    

　　

2.显示日期(只选择到‘天‘)

前台:

//调用的方法
datePick2 =  function(elem){
		                jQuery(elem).datetimepicker({
		                	minView: "month",//设置只显示到天
		               		format : ‘yyyy-mm-dd‘,
		     				autoclose : true,
		     				language: ‘zh-CN‘
		                });
		            }
//jqgrid的列
{
	       				name : ‘constructStartTime‘,
	       				index : ‘constructStartTime1‘,
	       				label : ‘施工日期‘,
	       				width : 90,
	       				editable : true,
	       				hidden:(hiddenColsJSON.constructStartTime==‘true‘),
	       				readonly : true,
	       				search : true,
	       				sorttype : ‘date‘,
	       				editrules : {date : true},
	       				formatter:‘date‘,
	       				formatoptions:{srcformat: ‘Y-m-d‘, newformat: ‘Y-m-d‘},
	       				searchoptions: {
	       					sopt : [‘eq‘,‘ne‘,‘lt‘,‘le‘,‘gt‘,‘ge‘],
	       					dataInit:datePick2,
	       					attr:{title:‘选择日期‘}
	       				}
	       			}