1.先贴上最后的成果图:
2.前端部分(html页面)代码如下(后端省略):
<script type="text/javascript"> function loginAdd(){ document.getElementById("bg").style.display="block"; document.getElementById("login").style.display="block"; queryFirstMenu(); //动态生成一级菜单 } //初始化弹出框 动态生成一级菜单 function queryFirstMenu(){ var url=base_path+"console/group/index1111"; $.ajax({ url:url, type:"post", dataType:"json", success:function (result) { //先清空li,防止AJAX异步加载重复生成 $("#firstMenu_id li").remove(); /** 为了方便动态拼接,打在此处查看。 <ul id="firstMenu_id"> <li id="firstMenu = 基础数据">基础数据</li> <ul id="twoMenu = 基础地理"> <li id="twoId" οnclick="query1(this.id)">基础地理</li> <ul> <li>行政区</li> <li>水系</li> <li>绿地</li> </ul> <li>遥感影像</li> <li>基础地质</li> </ul> <li id="业务专题">业务专题</li> <ul> <li>土地专题</li> <li>矿产专题</li> </ul> <li id="数据管理">数据管理</li> <ul> <li>土地管理</li> <li>矿产管理</li> </ul> </ul> */ for (var i=0;i<result.oneNameLists.length;i++){ var firstMenu = result.oneNameLists[i].name; var sli = ""; sli+= '<li id="'; sli+=firstMenu; sli+='"'; sli+= 'οnclick="event.cancelBubble=true; queryTwoMenu(this.id)">'; //此处触发动态生成二级菜单事件,同时取消冒泡机制 sli+= firstMenu; sli+= '</li>'; var $li=$(sli); //添加到对应的节点后面 $("#firstMenu_id").append($li); } } }); } //点击生成二级菜单 根据一级菜单firstMenu查询二级菜单 ajax function queryTwoMenu(firstMenu){ var url=base_path+"console/group/index2222"; $.ajax({ url:url, type:"post", data:{"firstMenu":firstMenu}, datatype:"json", success:function (result) { //先清空li,防止AJAX异步加载重复生成 $('#'+firstMenu +" ul").remove(); for(var i=0;i<result.twoNameLists.length;i++){ var twoMenu = result.twoNameLists[i].twoName; var twoId = result.twoNameLists[i].twoId; var sli = ""; sli+= '<ul id="'; sli+= twoMenu; sli+= '">'; sli+= '<li id="'; sli+=twoId; sli+='"'; sli+= 'οnclick="event.cancelBubble=true; queryThreeMenu(this.id)">'; //此处触发动态生成二级菜单事件,同时取消冒泡机制 sli+= twoMenu; sli+= '</li>'; sli+= '</ul>'; var $li=$(sli); //添加到对应的节点后面 $('#'+firstMenu).append($li); } } }); } //点击生成三级菜单 根据二级菜单twoId查询三级菜单 ajax function queryThreeMenu(twoId){ var url=base_path+"console//group/ajax/fetch333"; $.ajax({ url:url, type:"post", data:{"parentId":twoId}, datatype:"json", success:function (result) { //先清空li,防止AJAX异步加载重复生成 $('#'+twoId+" ul").remove(); for(var i=0;i<result.threeNameLists.length;i++){ var threeMenu = result.threeNameLists[i].threeName; var sli = ""; sli+= '<ul>'; sli+= '<li id="'; sli+=threeMenu; sli+='"'; sli+= 'οnclick="">'; //此处触发动态生成二级菜单事件 sli+= threeMenu; sli+= '</li>'; sli+= '</ul>'; var $li=$(sli); //添加到对应的节点后面 $('#'+twoId).append($li); } } }); }
</script>3.当时处理过程中卡住的问题:<div class="show" id="login"> <div class="show_set"> <p style="text-align: right;"> <a οnclick="closeg();">关 闭</a> </p> <p><i></i><b>添加地图服务</b><i></i></p> <table border="1" width="500px"> <tr> <th width="60%">名称</th> <th width="40%">服务</th> </tr> <tr> <td> <ul id="firstMenu_id"> <!-- 下面动态生成各级菜单--> </ul> </td> </tr> </table> </div> </div>
1)如何准确的动态生成各级菜单。解决:给各级菜单的节点 id 赋值为变量。
2)如何防止异步刷新的时候重复生成,清空的节点选择没拼接正确。解决: $('#'+twoId+" ul").remove();
注意:twoId 是变量," ul"引号里面最前面有一个空格。
3)生成三级菜单的时候,总是点不出来。解决:取消事件的冒泡机制。
4.事件: