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);//调用事件

            }

        }

预览

=》

Jquery Ztree异步加载树的更多相关文章

  1. jquery zTree异步加载的例子

    下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...

  2. JQuery ztree 异步加载实践

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...

  3. ztree异步加载树节点

    参考文档:https://www.cnblogs.com/tenWood/p/8620708.html ztree api地址:http://www.treejs.cn/v3/api.php 说明:j ...

  4. ztree异步加载

    Ztree异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 直接贴代码(SpringMvc+Mybatis): 前台页面ztreeList.jsp: ...

  5. zTree 异步加载

    zTree异步加载数据的简单实现,更为详细的Api请参考 zTree官网   http://www.treejs.cn/ <link href="~/Content/ztree/css ...

  6. Jquery树控件ZTree异步加载

    异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 这里面主要设计ztree的setting变量的async属性设置: var setting = { ...

  7. ztree插件的使用及列表项拖拽的实现（jQuery）+异步加载节点数据

    为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...

  8. zTree异步加载并初始化树时全部展开（贴主要代码）

    <%@page pageEncoding="UTF-8"%> <%@include file="/commons/include/html_doctyp ...

  9. ztree异步加载---------补发周日内容

    上周六老师要求和大三的进行JAVA知识交流,总体来说就是给大三学长做的东西打分,然后大三学长再教我们如果构建ztree.毕竟第一次接触ztree,所以有很多不了解,但通过周六日努力,还是做出来了.现在 ...

随机推荐

  1. centos 7 修改sshd | 禁止 root登录及脚本定义

    1.新建用户wwweee000 [root@localhost ~]# useradd wwweee000 [root@localhost ~]# passwd wwweee000 Changing ...

  2. 本地搭建持续集成（AzureDevops）

    下载地址:https://visualstudio.microsoft.com/zh-hans/downloads/ 首先你需要SQL2017以上版本 ,不支持以下版本 完成下载之后进行安装(可选中文 ...

  3. Keras（五）LSTM 长短期记忆模型 原理及实例

    LSTM 是 long-short term memory 的简称, 中文叫做 长短期记忆. 是当下最流行的 RNN 形式之一 RNN 的弊端 RNN没有长久的记忆,比如一个句子太长时开头部分可能会忘 ...

  4. 在IIS下部署PHP

    没有.net ramework 4.0 的要先安装 dotNetFx40_Full_x86_x64.exe PHP压缩包 推荐用5.6.29版 IIS下PHP压缩包下载地址:"http:// ...

  5. 2019nc#9

    题号 标题 已通过代码 题解/讨论 通过率 团队的状态 A The power of Fibonacci 点击查看 进入讨论 69/227 未通过 B Quadratic equation 点击查看 ...

  6. cogs249 最长公共子串（后缀数组 二分答案

    http://cogs.pro:8080/cogs/problem/problem.php?pid=pxXNxQVqP 题意:给m个单词,让求最长公共子串的长度. 思路:先把所有单词合并成一个串(假设 ...

  7. CodeForces 979 D Kuro and GCD and XOR and SUM

    Kuro and GCD and XOR and SUM 题意:给你一个空数组. 然后有2个操作, 1是往这个数组里面插入某个值, 2.给你一个x, k, s.要求在数组中找到一个v,使得k|gcd( ...

  8. hdu6354 杭电第五场 Everything Has Changed 计算几何

    Everything Has Changed Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java ...

  9. windows10环境下安装深度学习环境anaconda+pytorch+CUDA+cuDDN

    步骤零:安装anaconda.opencv.pytorch(这些不详细说明).复制运行代码,如果没有报错,说明已经可以了.不过大概率不行,我的会报错提示AssertionError: Torch no ...

  10. win10 无法安装/启用 .net framework 3.5

    有些程序依赖.net framework 3.5 win10可以在控制面板->程序和功能->启用或关闭windows功能 启用 但有时会报错 比如 0x800f0950 官方论坛的解决办法 ...