DWZ 树形导航菜单

最新推荐文章于 2017-06-02 11:21:01 发布

夏日娃

最新推荐文章于 2017-06-02 11:21:01 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签： dwz 导航 java

本文链接：https://blog.csdn.net/u011625492/article/details/72842392

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DWZ实现动态树形菜单，表设计字段(id，pid，cname，redirect ,rel) 分别是主键ID 父ID，菜单名称，跳转地址，NavTab ID。

function getTree(data,pId){
    var tree;
    if(pId==0){
        tree = '<ul class="tree treeFolder">';
    }else{
        tree = '<ul>';
    }
    for(var i in data){
        if(data[i].pid == pId){
        	if(data[i].pid == 0){
        	   tree += "<li><a href='"+data[i].redirect+"'>"+data[i].cname+"</a>";
        	}else{
               tree += "<li><a href='"+data[i].redirect+"' target='navTab' rel='"+data[i].rel+"'>"+data[i].cname+"</a>";
        	}
            tree += getTree(data,data[i].id);
            tree += "</li>";
        }
    }
    return tree+"</ul>";
}

初始化调用如下

$(function(){

var d=eval('${tree}');//后台返回的数据
	$("#left").html(getTree(d,0).replaceAll("<ul></ul>",""));

}）

DOM结构如下

<div class="accordion" fillSpace="sidebar">
			<div class="accordionHeader">
				<h2>
				<span>Folder</span>系统管理
				</h2>
			</div>
		   <div class="accordionContent" id="left"></div>
			 <div class="accordionHeader">
					<h2>
						<span>Folder</span>项目管理
					</h2>
			 </div>
			 <div class="accordionContent">
					<ul class="tree treeFolder collapse">
						<li>
							<a href="projectList" target="navTab" rel="userlist">用户列表</a>
						</li>
					</ul>
			</div>
</div>
</div>