Ztree组件

Ztree组件

用途

做基于用户的权限管理时对用户分配资源的需要使用ztree组件。

实现菜单的树形结构由后台提供的数据来渲染出所需要的效果并将数据进行提交。

广泛api文档：http://www.treejs.cn/v3/api.php

使用数据库来设计树

id	name	remark
1	济南	山东省会
2	青岛	xxxx
3	西安	陕西省会

通过这种结构设计树无法看出其对应的关系，所以我们在设计数据库表的过程当中需要加入一个pid的字段来指明其对应的父类关系

id	name	pid
1	中国	0
2	山东	1
3	济南	2

其中的pid即指定父类的对应的关系数据济南属于山东山东又属于中国

ztree基础案例入门

ztree时一个基于jquery的树形组件，可以传递json数据来渲染出对应的结果

首先需要引入ztree的css和js文件。

<link rel="stylesheet" href="../../layuiadmin/ztree/css/zTreeStyle/zTreeStyle.css">
<script src="../../layuiadmin/ztree/js/jquery-1.4.4.min.js"></script>
<script src="../../layuiadmin/ztree/js/jquery.ztree.core.js"></script>

初始化一个节点通过jquery来进行渲染的操作

<ul id="treeDemo" class="ztree">
			
</ul>

使用ztree初始化信息

其中包含三个参数id节点 setting设置 和zNodes数据节点

$(document).ready(function(){
     $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

var setting = { };

首先设置一个根节点进行数据的

open默认打开 isparent是父节点

var zNodes=[
            {"name":"山东",open:true,isParent:true}
       
]


 var zNodes=[
            {"name":"山东",open:true,isParent:true,
                children:[
                    {"name":"济南"},
                    {"name":"青岛"},
                    {"name":"威海"}
                ]
            }
        ]

ztree异步加载数据库中的信息

var setting = {
            async:{
                enable:true, //是否开启异步的加载模式
                url:'',//异步请求的url的地址
            }
        };

autoParam:[“id”], //异步加载的时候自动提交父节点的数据

var setting = {
    async:{
        autoParam:["id"], //异步加载的时候自动提交父节点的数据
        enable:true, //是否开启异步的加载模式
        url:'',//异步请求的url的地址
    }
};

首先拦截所有请求在认证之前

admin-全部权限–role:admin

登录用户–绑定角色–对应资源

角色–绑定资源–绑定用户chenruxu–登录授权

权限重新分配和回收–重写登入–改写角色