在開發中常常會遇到菜單的級聯操作,比如:國家、城市、鄉鎮的選擇等。當選中某個國家的時候,後面的菜單會把該國家內的城市羅列出來,當選中城市的時候,後面的菜單會把對應的鄉鎮列出來。
解決這種菜單的級聯操作的辦法,我理解的有兩種:
①使用js來實現,把頁面所用到的級聯數據放到js內,當頁面加載完成後,通過js顯示到對應的select內,這種方法的解決辦法有很多種,最為直觀的一種是放到多維數組中,每個人的思維不一樣,這裡就不詳細解說。
②使用ajax異步動態加載,然後顯示到對應的select內,這種方法很便捷,建議在開發中使用。
下面看一個開發中的小例子:
JSP簡短頁面:
<div class="form-group"> <label class="col-sm-2 control-label">設備類別</label> <div class="col-sm-4"> <select class="basic-single" name="codeCategory" onchange="showCodeSubCate()" id="codeCategory" style="width: 100%"> </select> </div> <label class="col-sm-2 control-label">設備子類</label> <div class="col-sm-4"> <select class="basic-single" name="codeSubCategory" id="codeSubCate" disabled="disabled" style="width: 100%"> <option value="">--請選擇--</option> </select> </div>
</div>
該頁面內涉及到了兩個select,分別為:設備分類和設備子類,其中設備分類為一級菜單,設備子類為二級菜單,設備子類的顯示內容由設備分類決定。
下面來看ajax代碼段:
function addCodeCategory(){ $.ajax({ url: "<%=request.getContextPath()%>/facilitydict/showCodeCategory", async: false, //請求是否異步,默認為異步,這也是ajax重要特性 type: "GET", //請求方式 success: function(result) { result = $.parseJSON(result); var data = result.data; var codeCates = data.split(","); str ='<option value="6801">--請選擇--</option>'; for(x in codeCates){ str+='<option value="'+codeCates[x]+'">'+codeCates[x]+'</option>'; } $("#codeCategory").html(str); } }); } function showCodeSubCate(){ $("#codeSubCate").prop("disabled","");//將設備子類的select解除鎖定 var target = $("#codeCategory option:selected").text(); $.ajax({ url: "<%=request.getContextPath()%>/facilitydict/showCodeSubCategory", data : {codeCategory:target}, async: false, //請求是否異步,默認為異步,這也是ajax重要特性 type: "GET", //請求方式 success: function(result) { result = $.parseJSON(result); var data = result.data; var codeCates = data.split(","); var str=""; for(x in codeCates){ str+='<option value="'+codeCates[x]+'">'+codeCates[x]+'</option>'; } $("#codeSubCate").html(str); } }); }
不難看出,當設備分類選擇器內的內容發生改變後,觸發showCodeSubCate函數來請求後台獲取數據,然後把請求到的數據添加到設備子類對應的select內。後台代碼的實現如下(只貼出controller的方法):
@RequestMapping("/showCodeCategory") @ResponseBody public Result<String> searchCodeCategory() { Result<String> rs = new Result<>(); List<String> codeCategorys = facilityDictService.searchCodeCategory(); String codeCate = StringUtil.collectionToCommaDelimitedString(codeCategorys); rs.setData(codeCate); return rs; } @RequestMapping("/showCodeSubCategory") @ResponseBody public Result<String> searchCodeSubCategory(HttpServletRequest request) { String codeCategory = request.getParameter("codeCategory"); Result<String> rs = new Result<>(); List<String> codeSubCategorys = facilityDictService.searchCodeSubCategory(codeCategory); String codeCate = StringUtil.collectionToCommaDelimitedString(codeSubCategorys); rs.setData(codeCate); return rs; }
這兩個方法分別對應上面的兩個ajax請求,值得介紹的是後台返回的數據,返回值類型為Result<String>,該返回值類型是一個工具類,具體實現可以在我的博客中查看,鏈接為:http://www.cnblogs.com/blog411032/p/5799669.html
ajax與後台交互傳輸數據的工具類
public class Result<T> implements Serializable { private static final long serialVersionUID = 3637122497350396679L; private boolean success; private T data; private String msg; public Result() { } public Result(boolean success) { this.success = success; } public boolean isSuccess() { return success; } public void setSuccess(boolean success) { this.success = success; } public T getData() { return data; } public void setData(T data) { this.data = data; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public Result(boolean success, String msg) { super(); this.success = success; this.msg = msg; } public Result(boolean success, T data) { 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) { var rs = eval('('+data+')'); flag = rs.success; if(flag){ alert("刪除成功!"); } } });
下面是後台java代碼:
@RequestMapping("/deleteSupp") @ResponseBody public Result<String> deleteSupplier(HttpServletRequest request){ Result<String> rs = new Result<>(); String supplierId = request.getParameter("supplierId"); supplierService.deleteSupplierById(supplierId); rs.setSuccess(true); return rs; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。