dwz 动态构造树

最新推荐文章于 2019-11-19 19:58:56 发布

zrk1000

最新推荐文章于 2019-11-19 19:58:56 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/zrk1000/article/details/38403097

版权

dwz jui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

图：