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. 2016 ACM-ICPC 青岛站网络赛G题 题解

    [参考博客][https://blog.csdn.net/Tawn0000/article/details/82255682] 题意: 将n个数按照每k个一组来合并,合并需要花费的cost是两个数的长 ...

  2. SpringBoot 2 快速整合 | 统一异常处理

    统一异常处理相关注解介绍 @ControllerAdvice 声明在类上用于指定该类为控制增强器类,如果想声明返回的结果为 RESTFull 风格的数据,需要在声明 @ExceptionHandler ...

  3. tesseract-ocr下载

    参考:http://www.tuicool.com/articles/E3MNziM 1.下载地址:https://sourceforge.net/projects/tesseract-ocr/fil ...

  4. 利用python定位网页上的元素

    1. 想对网页上的元素进行操作,首先需要定位到元素. 以百度首页为例: 输入以下代码,打开百度首页: # coding = gbk from selenium import webdriver chr ...

  5. UVA10330拆点最大流

    #include <iostream> #include <cstdio> #include <cstring> #include <queue> #i ...

  6. "ANDROID" 支持的KEYCODE

      例子: adb shell input text keyevent 4 0 -->  "KEYCODE_UNKNOWN" 1 -->  "KEYCODE_ ...

  7. 9道JavaScript字符串类面试题

    本文来源于笔者的开源项目前端面试与进阶指南 点击关注本公众号获取文档最新更新,并可以领取配套于本指南的 <前端面试手册> 以及最标准的简历模板. 解析 URL Params 为对象 let ...

  8. Go第三方日志库logrus

    日志是程序中必不可少的一个环节,由于Go语言内置的日志库功能比较简洁,我们在实际开发中通常会选择使用第三方的日志库来进行开发.本文介绍了logrus这个日志库的基本使用. logrus介绍 Logru ...

  9. Spring Cloud(一)：服务注册与发现

    Spring Cloud是什么 Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载均 ...

  10. tarjan缩点（洛谷P387)

    此题解部分借鉴于九野的博客 题目分析 给定一个 \(n\) 个点 \(m\) 条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权值和. 允许多次经过一条边或者一个 ...