下拉菜单的级联操作(ajax)
在开发中常常会遇到菜单的级联操作,比如:国家、城市、乡镇的选择等。当选中某个国家的时候,后面的菜单会把该国家内的城市罗列出来,当选中城市的时候,后面的菜单会把对应的乡镇列出来。
解决这种菜单的级联操作的办法,我理解的有两种:
①使用js来实现,把页面所用到的级联数据放到js内,当页面加载完成后,通过js显示到对应的select内,这种方法的解决办法有很多种,最为直观的一种是放到多维数组中,每个人的思维不一样,这里就不详细解说。
②使用ajax异步动态加载,然后显示到对应的select内,这种方法很便捷,建议在开发中使用。
下面看一个开发中的小例子:
JSP简短页面:
<divclass="form-group"> <labelclass="col-sm-2control-label">设备类别</label> <divclass="col-sm-4"> <selectclass="basic-single"name="codeCategory"onchange="showCodeSubCate()"id="codeCategory"style="width:100%"> </select> </div> <labelclass="col-sm-2control-label">设备子类</label> <divclass="col-sm-4"> <selectclass="basic-single"name="codeSubCategory"id="codeSubCate"disabled="disabled"style="width:100%"> <optionvalue="">--请选择--</option> </select> </div>
</div>
该页面内涉及到了两个select,分别为:设备分类和设备子类,其中设备分类为一级菜单,设备子类为二级菜单,设备子类的显示内容由设备分类决定。
下面来看ajax代码段:
functionaddCodeCategory(){ $.ajax({ url:"<%=request.getContextPath()%>/facilitydict/showCodeCategory", async:false,//请求是否异步,默认为异步,这也是ajax重要特性 type:"GET",//请求方式 success:function(result){ result=$.parseJSON(result); vardata=result.data; varcodeCates=data.split(","); str='<optionvalue="6801">--请选择--</option>'; for(xincodeCates){ str+='<optionvalue="'+codeCates[x]+'">'+codeCates[x]+'</option>'; } $("#codeCategory").html(str); } }); } functionshowCodeSubCate(){ $("#codeSubCate").prop("disabled","");//将设备子类的select解除锁定 vartarget=$("#codeCategoryoption:selected").text(); $.ajax({ url:"<%=request.getContextPath()%>/facilitydict/showCodeSubCategory", data:{codeCategory:target}, async:false,//请求是否异步,默认为异步,这也是ajax重要特性 type:"GET",//请求方式 success:function(result){ result=$.parseJSON(result); vardata=result.data; varcodeCates=data.split(","); varstr=""; for(xincodeCates){ str+='<optionvalue="'+codeCates[x]+'">'+codeCates[x]+'</option>'; } $("#codeSubCate").html(str); } }); }
不难看出,当设备分类选择器内的内容发生改变后,触发showCodeSubCate函数来请求后台获取数据,然后把请求到的数据添加到设备子类对应的select内。后台代码的实现如下(只贴出controller的方法):
@RequestMapping("/showCodeCategory") @ResponseBody publicResult<String>searchCodeCategory(){ Result<String>rs=newResult<>(); List<String>codeCategorys=facilityDictService.searchCodeCategory(); StringcodeCate=StringUtil.collectionToCommaDelimitedString(codeCategorys); rs.setData(codeCate); returnrs; } @RequestMapping("/showCodeSubCategory") @ResponseBody publicResult<String>searchCodeSubCategory(HttpServletRequestrequest){ StringcodeCategory=request.getParameter("codeCategory"); Result<String>rs=newResult<>(); List<String>codeSubCategorys=facilityDictService.searchCodeSubCategory(codeCategory); StringcodeCate=StringUtil.collectionToCommaDelimitedString(codeSubCategorys); rs.setData(codeCate); returnrs; }
这两个方法分别对应上面的两个ajax请求,值得介绍的是后台返回的数据,返回值类型为Result<String>,该返回值类型是一个工具类,具体实现可以在我的博客中查看,链接为:http://www.cnblogs.com/blog411032/p/5799669.html
ajax与后台交互传输数据的工具类
publicclassResult<T>implementsSerializable{ privatestaticfinallongserialVersionUID=3637122497350396679L; privatebooleansuccess; privateTdata; privateStringmsg; publicResult(){ } publicResult(booleansuccess){ this.success=success; } publicbooleanisSuccess(){ returnsuccess; } publicvoidsetSuccess(booleansuccess){ this.success=success; } publicTgetData(){ returndata; } publicvoidsetData(Tdata){ this.data=data; } publicStringgetMsg(){ returnmsg; } publicvoidsetMsg(Stringmsg){ this.msg=msg; } publicResult(booleansuccess,Stringmsg){ super(); this.success=success; this.msg=msg; } publicResult(booleansuccess,Tdata){ super(); this.success=success; this.data=data; } }
该类为前后台交互提供了非常大的便捷:
下面是前后台的ajax交互:
前台ajax代码:
$.ajax({ url:"<%=request.getContextPath()%>/supp/deleteSupp", data:{supplierId:supplierId}, async:false,//请求是否异步,默认为异步,这也是ajax重要特性 type:"GET",//请求方式 success:function(data){ varrs=eval('('+data+')'); flag=rs.success; if(flag){ alert("删除成功!"); } } });
下面是后台java代码:
@RequestMapping("/deleteSupp") @ResponseBody publicResult<String>deleteSupplier(HttpServletRequestrequest){ Result<String>rs=newResult<>(); StringsupplierId=request.getParameter("supplierId"); supplierService.deleteSupplierById(supplierId); rs.setSuccess(true); returnrs; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。