zTree靜態樹與動態樹的用法——（七）

本文轉載自查看原文 2017-08-08 23:48 1344 Web常用案例

0.【簡介】

zTree 是利用 JQuery 的核心代碼，實現一套能完成大部分常用功能的 Tree 插件

兼容 IE、FireFox、Chrome 等瀏覽器
在一個頁面內可同時生成多個 Tree 實例
支持 JSON 數據
支持一次性靜態生成和 Ajax 異步加載兩種方式
支持多種事件響應及反饋
支持 Tree 的節點移動、編輯、刪除
支持任意更換皮膚 / 個性化圖標（依靠css）
支持極其靈活的 checkbox 或 radio 選擇功能
簡單的參數配置實現靈活多變的功能

zTree博客地址：http://ztreeapi.iteye.com/

目前zTree作者已經入駐ItEye，如果有什么需要學習的完全可以到作者博客上去學習，而且zTree的版本已經更新了很多次了，下面的內容跟最新版估計會有很大出入，我不能保證下面的教程在最新版可用。zTree真的是非常強大的樹組件，希望能對大家有所幫助！

在官網能夠下載到zTree的源碼、實例和API，其中作者pdf的API寫得非常詳細（中文的哦）

【部分函數和屬性介紹】

核心：zTree(setting, [zTreeNodes])

這個函數接受一個JSON格式的數據對象setting和一個JSON格式的數據對象zTreeNodes，從而建立 Tree。

核心參數：setting

zTree 的參數配置都在這里完成，簡單的說：樹的樣式、事件、訪問路徑等都在這里配置

setting舉例:

var setting = {   
    showLine: true,   
    checkable: true   
};

因為參數太多，具體參數詳見zTreeAPI

核心參數：zTreeNodes

zTree 的全部節點數據集合，采用由JSON對象組成的數據結構，簡單的說：這里使用Json格式保存了樹的所有信息

zTreeNodes的格式分為兩種：利用Json格式嵌套體現父子關系和Array簡單格式

①帶有父子關系的標准 zTreeNodes 舉例:

var zTreeNodes = [   
    {"id":1, "name":"test1", "nodes":[   
      {"id":11, "name":"test11", "nodes":[   
        {"id":111, "name":"test111"}   
      ]},   
      {"id":12, "name":"test12"}   
    ]},   
    ......   
];

②帶有父子關系的簡單 Array 格式(isSimpleData)的 zTreeNodes 舉例：

var treeNodes = [                                                                         
    {"id":1, "pId":0, "name":"test1"},   
    {"id":11, "pId":1, "name":"test11"},   
    {"id":12, "pId":1, "name":"test12"},   
    {"id":111, "pId":11, "name":"test111"},   
    ......   
];

③在進入頁面時生成樹結構：

var zTree;

$(function() {  
    zTree = $("#tree").zTree(setting, treeNodes);  
 });

1.靜態樹用法:

<!DOCTYPE html>
<HTML>

    <HEAD>
        <TITLE> ZTREE DEMO - Simple Data</TITLE>
        <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.js"></script>
        <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
      <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
        <SCRIPT type="text/javascript">
            <!--
            var setting = {
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };

            var zNodes = [{
                    id: 1,
                    pId: 0,
                    name: "父節點1 - 展開",
                    open: true
                },
                {
                    id: 11,
                    pId: 1,
                    name: "父節點11 - 折疊"
                },
                {
                    id: 111,
                    pId: 11,
                    name: "葉子節點111"
                },
                {
                    id: 112,
                    pId: 11,
                    name: "葉子節點112"
                },
                {
                    id: 113,
                    pId: 11,
                    name: "葉子節點113"
                },
                {
                    id: 114,
                    pId: 11,
                    name: "葉子節點114"
                },
                {
                    id: 12,
                    pId: 1,
                    name: "父節點12 - 折疊"
                },
                {
                    id: 121,
                    pId: 12,
                    name: "葉子節點121"
                },
                {
                    id: 122,
                    pId: 12,
                    name: "葉子節點122"
                },
                {
                    id: 123,
                    pId: 12,
                    name: "葉子節點123"
                },
                {
                    id: 124,
                    pId: 12,
                    name: "葉子節點124"
                },
                {
                    id: 13,
                    pId: 1,
                    name: "父節點13 - 沒有子節點",
                    isParent: true
                },
                {
                    id: 2,
                    pId: 0,
                    name: "父節點2 - 折疊"
                },
                {
                    id: 21,
                    pId: 2,
                    name: "父節點21 - 展開",
                    open: true
                },
                {
                    id: 211,
                    pId: 21,
                    name: "葉子節點211"
                }
            ];

            $(document).ready(function() {
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });
            //-->
        </SCRIPT>
    </HEAD>

    <BODY>
        <div class="content_wrap">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>

        </div>
    </BODY>

</HTML>

效果:

2.動態樹(JSON生成樹)

①后台代碼封裝簡單格式Json數據：

    public void doGetPrivilegeTree() throws IOException{  
            String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";  
            String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";  
            String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";  
            String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";  
            List<String> lstTree = new ArrayList<String>();  
            lstTree.add(s1);  
            lstTree.add(s2);  
            lstTree.add(s3);  
            lstTree.add(s4);  
            //利用Json插件將Array轉換成Json格式  
            response.getWriter().print(JSONArray.fromObject(lstTree).toString());  
        }

②頁面使用Ajax獲取zTreeNodes數據再生成樹

JS代碼:

var setting = {  
    isSimpleData : true,              //數據是否采用簡單 Array 格式，默認false  
    treeNodeKey : "id",               //在isSimpleData格式下，當前節點id屬性  
    treeNodeParentKey : "pId",        //在isSimpleData格式下，當前節點的父節點id屬性  
    showLine : true,                  //是否顯示節點間的連線  
    checkable : true                  //每個節點上是否顯示 CheckBox  
};  
  
var zTree;  
var treeNodes;  
  
$(function(){  
    $.ajax({  
        async : false,  
        cache:false,  
        type: 'POST',  
        dataType : "json",  
        url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//請求的action路徑  
        error: function () {//請求失敗處理函數  
            alert('請求失敗');  
        },  
        success:function(data){ //請求成功后處理函數。    
            alert(data);  
            treeNodes = data;   //把后台封裝好的簡單Json格式賦給treeNodes  
        }  
    });  
  
    zTree = $("#tree").zTree(setting, treeNodes);  
});

③最后顯示效果

3.帶有點擊事件的zTree(動態設置樹的節點與name)

1.頁面中准備樹的div

<div class="user_left_tree_info">
                <div class="user_left_tree_info_title">部門</div>
                <div class="hr"></div>
                <div class="ztree" id="treeDemo"></div>
            </div>

2.頁面加載時候請求樹:

searchUnitTree();

/**
     * 請求樹信息
     */
    function searchUnitTree(){
        $.ajax({
            type : "post",
            target : "#treeDemo",
            dataType : "json",
            url : "searchTreeAction2.action",
            success : getTree
        });
    }
            
    /**
     * 生成樹
     */
    function getTree(treeList2){
        var treeList3 = eval("(" + treeList2 + ")");
        var setting = {
                data : {
                    simpleData : {
                        enable : true,
                        idKey: "unitId",
                        pIdKey: "upUnitId",
                        rootPId : "10",
                    },
                    key : {
                        name : "unitName",
                    }
                },
                callback : {
                    onClick : onClick
                }
        };
        var zNodes = treeList3;

        //添加 樹節點的 點擊事件；
        var log, className = "dark";
        function onClick(event, treeId, treeNode, clickFlag) {
            clickOnTree(event, treeId, treeNode, clickFlag);
        }
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");  
        treeObj.expandAll(true);
    }
    
    /**
     * 點擊樹節點的同時，將該部門信息對應的部門編號，部門名稱，上級部門編號，上級部門名稱保存下來
     */
    function clickOnTree(event, treeId, treeNode, clickFlag){
        //得到該節點的部門編號和部門名字
        document.getElementById("bt_unitId").value = treeNode.unitId;
        document.getElementById("bt_unitName").value = treeNode.unitName;
        /*alert(treeNode.unitId);
        alert(treeNode.unitName);*/
        if (treeNode.unitId == "10") {
            //如果本節點是根節點，那么就不能執行更新和刪除操作
            $("#unit_change,#unit_delete").attr("disabled","disabled");
        } else {
            //如果本節點不是根節點，就可以執行更新和刪除操作
            $("#unit_change,#unit_delete").removeAttr("disabled");
            //父節點
            var fatherNode=treeNode.getParentNode();
            /*alert(fatherNode.unitId);
            alert(fatherNode.unitName);*/
            //得到父節點的部門編號和部門名稱
            document.getElementById("bt_upUnitId").value = fatherNode.unitId;
            document.getElementById("bt_upUnitName").value = fatherNode.unitName;
        }
        searchUnit();
    }

    /**
     *  點擊一下樹節點表格輸出下級節點的部門信息
     */
    function searchUnit() {
        $.ajax({
            type : "post",
            dataType : "json",
            url : "searchUnitByUpId.action",
            data : {
                upUnitId : $("#bt_unitId").val(),
            },
            success : showTable
        });
    }

3.后台傳JSON串

public String  searchTree(){
         try {
            this.treeList =unitService.getUnitTree2();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        JSONArray jsonArray = JSONArray.fromObject(treeList);
        this.treeList2 = jsonArray.toString();
        return SUCCESS;
     }

[{"upUnitId":"","unitName":"中心","unitId":"10"},{"upUnitId":"10","unitName":"人才","unitId":"10001"},{"upUnitId":"10","unitName":"項部","unitId":"10002"},{"upUnitId":"10","unitName":"成果","unitId":"10003"},{"upUnitId":"10","unitName":"SS","unitId":"10009"}]

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 樹插件 ztree 的基本用法 zTree樹插件動態加載 Java簡單ztree樹 ztree樹樣式的設計 zTree實現多選樹 jquery的ztree插件的使用（完成動態加載樹型結構） jq生成目錄文件樹jQuery Ztree基本用法 EasyUI樹和Ztree樹沖突問題 zTree學習筆記之展開樹和收起樹 Jquery Ztree異步加載樹