The design of the left menu:
1，
A: Include the menu page on the left in the main page (the div is being operated in this page)
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="warp tc bc mt10">
<tr>
<td width="150" align="left" valign="top"><%@ include file="/WEB-INF/views/myaccount/myaccountleft.jsp"%></td>
</tr>
</table>
B: directly to an empty div
<div class="accordionContent" id="accordionContent">
2. When the menu page js is initialized, the method of returning to the tree is called through ajax
A: It can return the html that has been built in the background (dataType: "html",), or return the string spliced in the background (with the page tag)
$(document).ready(function(){
getMenuTree();
//Click the menu to shrink
$("div[id='MenuTree'] dt").on("click", function(event){
menuExtend(event);//Menu shrink control
});
});
function getMenuTree(){
$.ajax({
url:"myaccount!createMenuTree.do",
type:"post",
dataType:"html",///Accept page, or txt or String
cache:false,
async:false,
data:{"accountId":"<%=accountId%>","path":"${path}"},
success:function(data){
$("#MenuTree").html(data);
},
error:function(retMsg){
try{
$.zd.alert('','Failed to get menu!');
}catch(eee){
}
}
});
}
B:
function appendTable() {
var roleId=$("input[name='roleId']").val();
var leave=$("input[name='leave']").val();
var pId=$("input[name='pId']").val();
var id=$("input[name='id']").val();
var dataParent = {
roleId: "1",
leave:"2",
pId:"3",
id:"5"
};
$.ajax({
async: false,
type: "post",
url: "${pageContext.request.contextPath}/system/opmRole/menuInfo",
//data: dataParent,
// headers:"{\"id\": \"1\",\"leave\":\"2\",\"roleId\":\"3\",\"pId\":\"5\"}",
beforeSend: function(xhr){
xhr.setRequestHeader('id', id);
xhr.setRequestHeader('leave', leave);
xhr.setRequestHeader('roleId', roleId);
xhr.setRequestHeader('pId', pId);
xhr.setRequestHeader('fg', "1");
},
//dataType: 'json',
//contentType: "application/json",
success: function (data) {
if(data!=''&&data!=null){
//var ul=$("#treeul");
//var ul = document.createElement("ul"); collapse
var ul=$("<ul class=\"tree treeFolder\" id=\"tree1\"></ul>");
//ul.className = 'tree treeFolder collapse';
//ul.setAttribute('id','tree1');
var div1=$(".accordionContent");//document.getElementById("accordionContent");//
// var object = div1.appendChild(ul);
var arr = eval (data);
var s="<li><a>合同交割</a><ul id=\"160000\"><li><a href=\"${pageContext.request.contextPath}pactMarkChkAction.action?operate=A target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">异议处理"+
"</a></li><li><a href=\"${pageContext.request.contextPath}ContractPactUIAction!getContractList.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">合同查询</a></li><li><a href=\"${pageContext.request.contextPath}contractMendAction!list.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">合同补录</a></li><li><a href=\"${pageContext.request.contextPath}dataEnteringAction.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">数据录入</a></li><li><a href=\"${pageContext.request.contextPath}datumInforAction.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">Information information</a></li></ul></li>";
//ul.innerHTML=s;
for(j=0;j<arr.length;j++){
if(arr[j].leave=='1'&&arr[j].parentId=='100000'){
var li =$("<li></li>");
li.append($(arr[j].str));
var ul1 =$("<ul id='"+arr[j].ID+"'></ul>");
li.append(ul1);
ul.append(li);
}else if(arr[j].leave=='1'&&arr[j].parentId!='100000'){
var li =$("<li></li>");
var ul2 =$("<ul id='"+arr[j].ID+"'></ul>");
li.append($(arr[j].str));
li.append(ul2);
ul.find("ul[id='"+arr[j].parentId+"']").append(li);
}
if(arr[j].leave=='2'){
var li =$("<li></li>");
li.append($(arr[j].str));
ul.find("ul[id='"+arr[j].parentId+"']").append(li);
}
}
div1.html(ul);
}else{
alert("The member you entered does not maintain the corresponding permission information!");
}
},
error:function(data){
alert("Data loading exception!");
}
});
}