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. netty源码解解析(4.0)-20 ChannelHandler: 自己实现一个自定义协议的服务器和客户端

    本章不会直接分析Netty源码,而是通过使用Netty的能力实现一个自定义协议的服务器和客户端.通过这样的实践,可以更深刻地理解Netty的相关代码,同时可以了解,在设计实现自定义协议的过程中需要解决 ...

  2. 堆、栈、内存分配、==、equals、hashcode详解（转载）

    问题的引入: 问题一:String str1 = "abc";String str2 = "abc";System.out.println(str1==str2 ...

  3. 牛客-小a的旅行计划 + 数学推导

    小a的旅行计划 题意: 小a终于放假了,它想在假期中去一些地方游玩,现在有N个景点,编号为,同时小b也想出去游玩.由于一些特殊♂原因,他们的旅行计划必须满足一些条件 首先,他们可以从这N个景点中任意选 ...

  4. Photon Server 服务端编程

    Photon Server 和 Unity3D 数据交互: Photon Server 服务端编程 Unity3D 客户端编程 VS2017 之 MYSQL实体数据模 一:Photon Server的 ...

  5. Netty源码分析 （四）----- ChannelPipeline

    netty在服务端端口绑定和新连接建立的过程中会建立相应的channel,而与channel的动作密切相关的是pipeline这个概念,pipeline像是可以看作是一条流水线,原始的原料(字节流)进 ...

  6. 【Offer】[59-1] 【滑动窗口的最大值】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 给定一个数组和滑动窗口的大小,请找出所有滑动窗口里的最大值.例如,如果输入数组{2,3,4,2,6,2, 5,1}及滑动窗口的大小3,那 ...

  7. SQL，如果碰到Json，你会怎么做？

    1.Json串如下: DECLARE @JsonInfo NVARCHAR() SET @JsonInfo=N' { "CalcPayInput":{ ", " ...

  8. springboot应用监控和管理

    spring boot应用监控和管理 Spring Boot 监控核心是 spring-boot-starter-actuator 依赖,增加依赖后, Spring Boot 会默认配置一些通用的监控 ...

  9. Git使用教程 Windows使用Git全攻略

    在Windows上安装Git 我们需要先把Git的安装包下载下来,访问网址:https://git-for-windows.github.io/ 或者百度网盘:链接: https://pan.baid ...

  10. mapper文件中“添加一条新数据并返回此数据的ID(主键)”的方法

    在mapper文件的insert语句前加上<selectKey>标签即可 如下: 添加前测试: 添加后测试: