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. Shiro的几个关键类

    Shiro在于Spring集成中,需要配置SecurityManager,Realm,ShiroFilterFactoryBean这三个类.在Web环境中SecurityManager一般配置Defa ...

  2. Delphi - cxGrid连接Oracle数据库 实现数据的增删改查

    cxGrid连接Oracle数据库 实现数据的增删改查 cxGrid连接Oracle数据库 1:通过OraSession连接数据库.OraDataSet实现OraSession和OraDataSour ...

  3. Sql Server中变的定义以及赋值的应用

    --申明变量declare @ad_begin datetimedeclare @fydl varchar(50)declare @userid varchar(50)declare @jdrbm v ...

  4. hdu 3974 Assign the task（线段树）

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=3974 题意:给定一棵树,50000个节点,50000个操作,C x表示查询x节点的值,T x y表示更 ...

  5. Pytorch读取，加载图像数据(一)

    在学习Pytorch的时候,先学会如何正确创建或者加载数据,至关重要. 有了数据,很多函数,操作的效果就变得很直观. 本文主要用其他库读取图像文件(学会这个,你就可以在之后的学习中,将一些效果直观化) ...

  6. ubuntu下创建定时任务的两种方式及常见问题解决方案

    创建定时任务的目的就是摆脱人为对程序重复性地运行. 0. 首先用下面的指令检查你是否安装crontab, crontab -l 如果本身就有的话,那么出现如下指令 LC_CTYPE="zh_ ...

  7. 不要小看小小的 emoji 表情

    前言 好久没更新了,最近事比较多,或许下个月就会恢复到正常的发文频次. 这篇文章得从一个 emoji 表情开始,我之前开源的一个 IM 项目中有朋友提到希望可以支持 emoji 表情传输. https ...

  8. Java日志框架SLF4J和log4j以及logback的联系和区别

    1.SLF4J(Simple logging Facade for Java) 意思为简单日志门面,它是把不同的日志系统的实现进行了具体的抽象化,只提供了统一的日志使用接口,使用时只需要按照其提供的接 ...

  9. Object和Objects

    Object 在Java,Object类是超级父类,是所有类的父类. public boolean equals(Object obj) { return (this == obj); } publi ...

  10. 每天学会一点点(JAVA基础)

    1.什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? 虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. Java被设计成允 ...