问题描述:
菜单类型、父类菜单均为下拉控件,其中菜单类型的内容时固定的,只有两种:一级菜单、二级菜单。
如何实现级联,即菜单类型选择一级菜单时,父类菜单下拉控件内容包含:根菜单;菜单类型选择二级菜单时,则通过Ajax从后台获取数据,并动态添加到父类菜单下拉控件中。
html代码如下:
<tr>
<td width="15%" style="text-align:right;"><strong style="color:#ff3636; font-weight:bold; margin-right:5px">*</strong>菜单类型 :</td>
<td width="85%" style="text-align:left;" colspan="3">
<select class="form-control select2" id="type" name="type" onchange="selectMenuType(this.value);">
<option value=""> -- 请选择 -- </option>
<option th:selected="${weChatMenu.type eq c.key}" th:each="c:${typeMap}" th:value="${c.key}" th:text="${c.value}" value="1" ></option>
</select>
<span class="form-control-static"></span>
</td>
</tr>
<tr>
<td width="15%" style="text-align:right;"><strong style="color:#ff3636; font-weight:bold; margin-right:5px">*</strong>父类菜单 :</td>
<td width="85%" style="text-align:left;" colspan="3">
<select class="form-control select2" id="parentId" name="parentId">
<option value=""> -- 请选择 -- </option>
<option value="0" selected>根菜单</option>
</select>
<span class="form-control-static"></span>
</td>
</tr>
解决方案:
菜单类型下拉控件onchange对应的function如下:
function selectMenuType(value){
if(value == 1){
$("#parentId").empty();
$("#parentId").prepend("<option value=''>请选择</option>");
$("#parentId").append("<option value='0' selected>根菜单</option>");
}else if(value == 2){
var accountId = $("#accountId").val();
alert("accountId="+accountId);
if (!isEmpty(accountId)) {
$.ajax({
url : "/wechatmenu/getLatestOneLevelMenuByAccountId",
async : false,
type : "POST",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data : "accountId=" + accountId,
dataType: 'json',
cache : false,
success: function(result){
if (result.success){
alert(result.data);
var maps=JSON.parse(result.data);
var length=maps.length;
$("#parentId").empty();
$("#parentId").prepend("<option value=''>请选择</option>");
for(var i=0;i<length;i++){
var map=maps[i];
alert("id="+map.id+" title="+map.title);
//alert("id="+map["id"]+" title="+map["title"]);
$("#parentId").append("<option value=\""+map.id+"\">"+map.title+"</option>");
}
}else{
alert("提示:操作失败!");
}
}
});
}else{
alert("请先选择所属公众号!");
return false;
}
}
}
上述ajax异步请求调用的后台接口如下:
/**
* 获取指定accountId的一级菜单
* @param request
* @param accountId
* @return
*/
@RequestMapping("/getLatestOneLevelMenuByAccountId")
@ResponseBody
public Map<String,Object> getLatestOneLevelMenuByAccountId(HttpServletRequest request,@RequestParam(name = "accountId") Integer accountId){
Map<String, Object> map = new HashMap<>();
try {
List<WeChatMenu> weChatMenuList=new ArrayList<WeChatMenu>();
JSONArray jsonArray=new JSONArray();
if(null!=accountId) {
weChatMenuList=weChatMenuService.getWeChatMenuListByAccountIdWithOneLevelMenu(accountId);
if(null!=weChatMenuList&&weChatMenuList.size()>0) {
for(int i=0;i<weChatMenuList.size();i++) {
JSONObject jsonObject=new JSONObject();
WeChatMenu weChatMenu=weChatMenuList.get(i);
jsonObject.put("id", weChatMenu.getId());
jsonObject.put("title", weChatMenu.getTitle());
jsonArray.add(jsonObject);
}
}
}
map.put("success",true);
map.put("msg","操作成功");
map.put("data",jsonArray.toJSONString());
} catch (Exception e) {
e.printStackTrace();
map.put("success",false);
map.put("msg","操作失败!");
}
return map;
}
效果图:
菜单类型选择的一级菜单,此时父类菜单下拉控件内容为根菜单
菜单类型选择的二级菜单,此时弹出的alert如下:
动态添加完成后的父类菜单下拉控件的内容如下图