左侧菜单的设计

 左侧菜单的设计：

 1，

 A:在主页面中include左侧的菜单页面（这个页面中在操作div）

 <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：直接给一个空的div

  <div class="accordionContent" id="accordionContent">

  2，菜单页面js初始化的时候就通过ajax调用返回树的方法

 A: 可以返回后台已构建好的html（dataType:"html",）,也可返回后台拼接好的字符串（带页面的标签）

  $(document).ready(function(){

getMenuTree();

//点击 菜单 收缩

$("div[id='MenuTree'] dt").on("click", function(event){

menuExtend(event);//菜单收缩控制

});

});

 

 

function getMenuTree(){

$.ajax({

url:"myaccount!createMenuTree.do",

type:"post",

dataType:"html",///接受页面，或txt或String

cache:false,

async:false,

data:{"accountId":"<%=accountId%>","path":"${path}"},

success:function(data){

$("#MenuTree").html(data);

},

error:function(retMsg){

try{

$.zd.alert('','获取菜单失败！');

}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\">资讯信息</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("你输入的会员没有维护相应的权限信息！");

       }

       

       },

       error:function(data){

       alert("数据加载异常！");

       

       }

   }); 

 

 

}