許可權管理系統 - 2 樹形控制元件結構分析

阿新 • • 發佈：2020-12-05

許可權管理 - 樹形控制元件結構分析

樹形結構如下圖所示：

對應的實現技術有：

dTree

tdTree

zTree

我們主要來看關於zTree的相關操作，從今日課程資料中找到：資料\樹\zTree-zTree_v3-master\zTree_v3\demo\cn\index.html，開啟就可查閱

我們主要是針對裡面的Checkbox 勾選操作進行學習，我們自己來編寫一個測試頁面test.html來完成一個樹形結構，操作步驟：

1.觀察整體的頁面結構
2.去除無效的基礎資訊
3.去除頁面無效的基礎資訊
4.分析頁面js內容
5.分頁結構所使用的資料
6.簡化頁面內容書寫

- 1.觀察整體的頁面結構
- 2.去除無效的基礎資訊
- 3.去除頁面無效的基礎資訊
- 4.分析頁面js內容
- 5.分頁結構所使用的資料
- 6.簡化頁面內容書寫


<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.4 樹形控制元件結構分析（2）

分析頁面js

- 1.觀察整體的頁面結構
- 2.去除無效的基礎資訊
- 3.去除頁面無效的基礎資訊
- 4.分析頁面js內容
- 5.分頁結構所使用的資料
- 6.簡化頁面內容書寫

<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>

2.5 樹形控制元件結構分析（3）

繼續進行資料結構的分析


<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>