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. springboot--事务的使用

    @Transactional原理 事务是一些sql语句对数据库操作的集合,因此如果在一个Java方法里涉及了对数据库的操作,业务需要的话我们就可以考虑把这些操作作为一个事务.通过在方法上加个@Tran ...

  2. ccflow关于流程引擎的父子流程的基本概念

    关键字:驰骋BPM jflow,ccflow, 驰骋工作流引擎 父子流程概念:在管理活动中,通用的部分,公用的部分,可以被重复执行的部分的流程管理活动我们把他独立出来,成为子流程,可以被其他流程的管理 ...

  3. tabBar的内部控件

    大体来说tabBar的内部其实除了UITabBarButton还有两个UIImageView 1.两个UIImageView是我们访问不到的,_UITabBarBackgroundView继承自UII ...

  4. 【CF 1059C】 Sequence Transformation 数学

    C. Sequence Transformation:http://codeforces.com/contest/1059/problem/C 题意 给你一个n,第一次输出1-n个数的gcd,然后你可 ...

  5. codeforces 793 D. Presents in Bankopolis（记忆化搜索）

    题目链接:http://codeforces.com/contest/793/problem/D 题意:给出n个点m条边选择k个点,要求k个点是联通的而且不成环,而且选的边不能包含选过的边不能包含以前 ...

  6. 【Offer】[42] 【连续子数组的最大和】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一个整型数组,数组里有正数也有负数.数组中的一个或连续多个整数组成一个子数组.求所有子数组的和的最大值.要求时间复杂度为O(n). ...

  7. Spring MVC中返回JSON数据的几种方式

    我们都知道Spring MVC 的Controller方法中默认可以返回ModeAndView 和String 类型,返回的这两种类型数据是被DispatcherServlet拿来给到视图解析器进行继 ...

  8. GO 语言学习笔记--数组切片篇

    1.对于make 数组切片,长度和容量需要理解清楚: 容量表示底层数组的大小,长度是你可以使用的大小: 容量的用处在哪?在与当你用 appen d扩展长度时,如果新的长度小于容量,不会更换底层数组,否 ...

  9. 体验一下：AndroidX

    背景 今天在更新 ButterKnife 到最新版本的时候出现了一个问题,我引入的是 10.1.0 最新版本: implementation 'com.jakewharton:butterknife: ...

  10. Winform中实现读取xml配置文件并动态配置ZedGraph的RadioGroup的选项

    场景 Winform中对ZedGraph的RadioGroup进行数据源绑定,即通过代码添加选项: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/ ...