DWZ 树形导航菜单

来源：互联网发布：数据新闻手册编辑：程序博客网时间：2024/06/06 18:23

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>

阅读全文

0 0