dwz 动态构造树

来源：互联网发布：sql except的用法编辑：程序博客网时间：2024/05/05 15:47

1、节点对象：构造权限树的节点对象，树插件使用的是dwz自带的插件，所以对应的有rel，

/***节点对象*/public class Node{    //节点id    private Integer id;    //父节点id    private Integer pId;    //节点名称    private String name;    //rel    private String rel;    //url    private String url;    getter...    setter... }

2、后台

......//登陆系统时获取当前用户权限列表List<TreeNode> userOperateList = userService.getOperateList(user.getUserId());//对象转化为json  需要jsckson-mapper-asl-1.6.6,jar ObjectMapper objectMapper = new ObjectMapper();String json = objectMapper.writeValueAsString(endOperateList);System.out.println(json);//model.addAttribute("json", json);//json形如：[{"id":1,"pId":0,"name":"aaa","rel":"a","url":""},{"id":2,"pId":1,"name":"bbb","rel":"b","url":""},{"id":3,"pId":2,"name":"ccc","rel":"c","url":""},{"id":4,"pId":3,"name":"ddd","rel":"d","url":""},{"id":5,"pId":2,"name":"eee","rel":"e","url":""},{"id":6,"pId":5,"name":"fff","rel":"f","url":""}]//注意：根节点的pId需要为0，生成树时需要查找0来判断跟节点，//其实每个pId为0的节点对应pannel的一个滑动块，//若有多个pId为0的节点，会生成多个滑动块，如下图

3、页面 index.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><%//获取项目名称    String pathStr = request.getContextPath();    pageContext.setAttribute("pathStr",pathStr);%>......<script type="text/javascript">$(function(){    DWZ.init("<c:url value='/styles/dwz/dwz.frag.xml'/>", {        //loginTitle:"Login",    // 弹出登录对话框        loginUrl:"<c:url value='/login' />",    // 跳到登录页面        pageInfo:{pageNum:"pageNum", numPerPage:"pageSize", orderField:"orderField", orderDirection:"orderDirection"},         debug:false,    // 调试模式 【true|false】        callback:function(){            initEnv();            $("#themeList").theme({themeBase:"<c:url value='/styles/dwz/themes'/>"});        }    });    //后台传来的json对象    var data = ${json};    //动态生成tree，此处的0为根节点的pId    $("#jTree").html(getJTree(data,0)); });    //构造accordion Content    function getContente(data,pId){        //去除多余的ul        var treeFormat = getTree(data,pId).replaceAll("<ul></ul>","");        if(treeFormat.length>4){            //替换开头的"<ul>" 为 "<ul class='tree treeFolder'>" (添加tree属性)            treeFormat = "<ul class='tree treeFolder'>"+treeFormat.substring(4,treeFormat.length);        }        return treeFormat;    }    //构造tree节点    function getTree(data,pId){        var tree="";        tree = '<ul>';        for(var i in data){            if(data[i].pId == pId){                //判断是否为叶子节点                if(data[i].url!=null&&data[i].url.length>0){                     //${pathStr} 为上面定义的项目名称                                        tree += "<li><a href='${pathStr}"+data[i].url+"' target='navTab' rel='"+data[i].rel+"'>"+data[i].name+"</a>";                }else{                    tree += "<li><a href='#' target='_blank'>"+data[i].name+"</a>";                }                //递归                tree += getTree(data,data[i].id);                tree += "</li>";            }        }        return tree += "</ul>";    }     function getJTree(data,header){        var jTree="";        for(var i in data){            //构造accordion Header            if(data[i].pId==header){                jTree += "<div class='accordionHeader'><h2><span>Folder</span>"+data[i].name+"</h2></div>";                jTree += "<div class='accordionContent'>";                //递归构造accordion Content                jTree += getContente(data,data[i].id);                jTree += "</div>";             }        }        return jTree;    }</script>.........<div id="sidebar">    <div class="toggleCollapse"><h2>******系统</h2><div>collapse</div></div>    <div id="jTree" class="accordion" fillSpace="sideBar"></div></div>

图：

0 0