权限系统设计--zTree的分析简化使用

权限系统设计与开发

什么是权限系统？

权限系统是一种设定用户与可操作模块之间关系的系统。

通过设定用户与可操作的模块之间的关系,控制用户在可指定范围内进行业务执行

基于用户的权限控制(UBAC:User-BasedAccessControl)

基于角色的权限控制(RBAC:role-BasedAccessControl)

角色的权限控制RBAC

树形控件结构分析（1）

树形结构如下图所示：

对应的实现技术有：

dTree

tdTree

zTree

我们主要来看关于zTree的相关操作.

我们主要是针对里面的Checkbox 勾选操作进行学习，我们自己来编写一个测试页面test.html来完成一个树形结构，操作步骤：

• 1.观察整体的页面结构
• 2.去除无效的基础信息
• 3.去除页面无效的基础信息
• 4.分析页面js内容
• 5.分页结构所使用的数据
• 6.简化页面内容书写

- 1.观察整体的页面结构
- 2.去除无效的基础信息
- 3.去除页面无效的基础信息
- 4.分析页面js内容
- 5.分页结构所使用的数据
- 6.简化页面内容书写

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<SCRIPT type="text/javascript">
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    /**/var zNodes =[
        { id:11, pId:1, name:"随意勾选 1-1", open:true},
        { id:111, pId:11, name:"随意勾选 1-1-1"},
        { id:112, pId:11, name:"随意勾选 1-1-2"},
        { id:12, pId:1, name:"随意勾选 1-2", open:true},
        { id:121, pId:12, name:"随意勾选 1-2-1"},
        { id:122, pId:12, name:"随意勾选 1-2-2"},
        { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
        { id:21, pId:2, name:"随意勾选 2-1"},
        { id:22, pId:2, name:"随意勾选 2-2", open:true},
        { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
        { id:222, pId:22, name:"随意勾选 2-2-2"},
        { id:23, pId:2, name:"随意勾选 2-3"},
        { id:1, pId:0, name:"随意勾选 1", open:true}
    ];
    var code;
    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            py = $("#py").attr("checked")? "p":"",
            sy = $("#sy").attr("checked")? "s":"",
            pn = $("#pn").attr("checked")? "p":"",
            sn = $("#sn").attr("checked")? "s":"",
            type = { "Y":py + sy, "N":pn + sn};
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
    }
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }
    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        setCheck();
        $("#py").bind("change", setCheck);
        $("#sy").bind("change", setCheck);
        $("#pn").bind("change", setCheck);
        $("#sn").bind("change", setCheck);
    });
</SCRIPT>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="right">
        <ul class="info">
            <li class="title">
                <ul class="list">
                    <li>
                        <input type="checkbox" id="py" class="checkbox first" checked /><span>关联父</span>
                        <input type="checkbox" id="sy" class="checkbox first" checked /><span>关联子</span><br/>
                        <input type="checkbox" id="pn" class="checkbox first" checked /><span>关联父</span>
                        <input type="checkbox" id="sn" class="checkbox first" checked /><span>关联子</span><br/>
                        <ul id="code" class="log" style="height:20px;"></ul></p>
            </li>
        </ul>
        </li>
    </ul>
</div>
</div>

树形控件结构分析（2）

分析页面js

- 1.观察整体的页面结构
- 2.去除无效的基础信息
- 3.去除页面无效的基础信息
- 4.分析页面js内容
- 5.分页结构所使用的数据
- 6.简化页面内容书写
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<SCRIPT type="text/javascript">
	var setting = {check: {enable: true},data: {	simpleData: {enable: true}}};
	var zNodes =[
        { id:11, pId:1, name:"随意勾选 1-1", open:true},
        { id:111, pId:11, name:"随意勾选 1-1-1"},
        { id:112, pId:11, name:"随意勾选 1-1-2"},
        { id:12, pId:1, name:"随意勾选 1-2", open:true},
        { id:121, pId:12, name:"随意勾选 1-2-1"},
        { id:122, pId:12, name:"随意勾选 1-2-2"},
        { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
        { id:21, pId:2, name:"随意勾选 2-1"},
        { id:22, pId:2, name:"随意勾选 2-2", open:true},
        { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
        { id:222, pId:22, name:"随意勾选 2-2-2"},
        { id:23, pId:2, name:"随意勾选 2-3"},
        { id:1, pId:0, name:"随意勾选 1", open:true}
    ];

	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		var zTree = $.fn.zTree.getZTreeObj("treeDemo")
		zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" }
	});
</SCRIPT>
<ul id="treeDemo" class="ztree"></ul>

树形控件结构分析（3）

继续进行数据结构的分析

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<SCRIPT type="text/javascript">
	var setting = {check: {enable: true},data: {	simpleData: {enable: true}}};
	var zNodes =[
		{ id:2, pId:0, name:"test", checked:true, open:true},
		{ id:21, pId:2, name:"test22222"},
		{ id:22, pId:1, name:"test22222"}
	];

	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		var zTree = $.fn.zTree.getZTreeObj("treeDemo")
		zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" }
	});
</SCRIPT>
<ul id="treeDemo" class="ztree"></ul>

标签：随意,name,--,pId,勾选,zTree,权限,true,id
来源： https://blog.csdn.net/qq_45181415/article/details/114419354