ztree实现异步树

<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>
xuchengxi-java
发布了28 篇原创文章 · 获赞 3 · 访问量 1万+
私信关注
猜你喜欢
