Jquery Ztree異步加載樹

本文轉載自查看原文 2018-11-05 21:15 5813 JS/Jquery

1. 下載jquery的JS文件/ztree的CSS文件和JS文件

2. 目錄結構

3. asyncTree.html


<head>

    <!-- 引入文件 -->

    <link rel="stylesheet" href="./resource/css/zTreeStyle.css" />

    <script type="text/javascript" src="./resource/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="./resource/js/jquery.ztree.core.js"></script>
</head>
<body>
   <body>
    // treeDOM元素
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
    // tree JS
   <script type="text/javascript">
        // 配置
        var setting = {
            view: {
                selectedMulti: false
            },
            async: { // 屬性配置
                enable: true, 
                url:"./resource/json/getNodes.json", 
                autoParam:["id", "name=name"], 
                // otherParam:{"otherParam":"zTreeAsyncTest"}, 
                type: 'get',
                dataFilter: filter
            },
            callback: { // 回調函數配置
                beforeClick: beforeClick, 
                beforeAsync: beforeAsync
            }
        };
        // 數據處理回調函數
        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i=0, l=childNodes.length; i<l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            }
            return childNodes;
        }
        // 節點點擊前回調函數 (treeId -- treeId-對應zTree容器元素的id；；； treeNode -- 點擊節點JSON對象)
        function beforeClick(treeId, treeNode) { // 選中節點
            if (!treeNode.isParent) {
                return false;
            } else {
                return true;
            }
        }
        // 異步加載前回調函數(treeId-對應zTree容器元素的id;;treeNode-進行異步加載的父節點 JSON 數據對象)
        function beforeAsync(treeId, treeNode) {
            return true;
        }
         
        $(document).ready(function() {
            // 初始化樹
            $.fn.zTree.init($("#treeDemo"), setting);
        });
    </script>
</body>

預覽

=》

async 屬性解析：

enable: true — 設置 zTree 是否開啟異步加載模式
url:"./resource/json/getNodes.json" — Ajax 獲取數據的 URL 地址
autoParam:["id", "name=name"] — 異步加載時(初始化時不需要)需要自動提交父節點屬性的參數
otherParam:{"otherParam":"zTreeAsyncTest"} — Ajax 請求提交的靜態參數(初始化請求、異步加載請求時都會有此參數)
type: 'get' — 獲取數據的方法
dataFilter: filter — 用於對 Ajax 返回數據進行預處理的函數

callback屬性解析：

beforeClick: 方法名 - 用於捕獲單擊節點之前的事件回調函數，並且根據返回值確定是否允許單擊操作
beforeAsync: 方法名 - 用於捕獲異步加載之前的事件回調函數，zTree 根據返回值確定是否允許進行異步加載
onAsyncSuccess: 方法名 — 用於捕獲異步加載正常結束的事件回調函數
onClick: 方法名 — 用於捕獲節點被點擊的事件回調函數

4：額外功能-----默認選中第一項 -- 此處可省略

修改asyncTree.html


// callback中添加屬性

onAsyncSuccess: onAsyncSuccess, // 用於捕獲異步加載正常結束的事件回調函數

onClick: function (event, treeId, treeNode) { // 用於捕獲節點被點擊的事件回調函數  

    beforeClick(treeId, treeNode)

}
// 添加加載成功后的回調函數
function onAsyncSuccess(event, treeId, treeNode, msg) {
            // 默認選中個第一項操作:第三步
            var msgJson = JSON.parse(msg)
            var firstMsgItem = null;
            for(var i=0; i<msgJson.length; i++){
                var item = msgJson[i];
                if(!item.isParent){
                    firstMsgItem = item;
                    break;
                }
            }
            if(firstMsgItem){
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                var node = treeObj.getNodeByParam('id', firstMsgItem.id);
                treeObj.selectNode(node);
                treeObj.setting.callback.onClick(null, treeObj.setting.treeId, node);//調用事件
            }
        }