下面是使用zTree异步加载的一个例子：

1）初始化树的时候是ajax请求，返回nodes列表来初始化树的；如果一开始就异步的话，$.fn.zTree.init($("#zTree"),setting, data)第三个参数为null就行；

2）后面点击最末端的节点，比如点击单板的时候，开始异步加载；

我准备的nodes的数据结构：一会返回的node就是这样的格式，不过全部是string类型；

var nodes =

[

    {

        'id': 1,

        'pid': 0,

        'name': '硬件规格',

        'open':false

    },

    {

        'id': 10,

        'pid': 1,

        'name': '单板',

        'open':false

    },

        //比如点击单板+，要异步加载的两个节点，模拟用

        {

            'id': 100,

            'pid': 10,

            'name': '单板_00',

            'open':false

        },

        {

            'id': 101,

            'pid': 10,

            'name': '单板_01',

            'open':false

        },

    {

        'id': 11,

        'pid': 1,

        'name': '子卡',

        'open':false

    },

    {

        'id': 12,

        'pid': 1,

        'name': '设备',

        'open':false

    },

    {

        'id': 2,

        'pid': 0,

        'name': '软件规格',

        'open':false

    },

    {

        'id': 20,

        'pid': 2,

        'name': 'java',

        'open':false

    },

    {

        'id': 21,

        'pid': 2,

        'name': 'jscript',

        'open':false

    },

    {

        'id': 22,

        'pid': 2,

        'name': 'php',

        'open':false

    }

]

index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="resources/zTreeStyle/zTreeStyle.css" type="text/css">

<link rel="stylesheet" type="text/css" href="resources/bootstrap/bootstrap.min.css">

<title>index</title>

</head>

<body>

    <h4>Ztree异步加载使用例子</h4>

    <ul id="zTree" class="ztree"></ul>

</body>

<script src="resources/js/jquery.min.js"></script>

<script type="text/javascript" src="resources/js/jquery.ztree.all.min.js"></script>

<script type="text/javascript">

var setting = {

        async: {

            enable: true,

            url:"asyncGetNodes",

            autoParam:["id", "pid", "name"],

            dataFilter: filter

        },

        data:{

            simpleData:{

                enable: true,

                idKey:'id',

                pIdKey:'pid',

                rootPId: 0

            }

        },

        view:{

            showIcon: false

        }

};

$(document).ready(function(){

    initZTree();

});

function filter(treeId, parentNode, childNodes) {

    return childNodes;

}

//初始化树

function initZTree(){

    $.ajax({

          url:"getNodes",

          type:"post",

          dataType: "json",

          success: function(data){

              console.log(data);

              var zTreeObj = $.fn.zTree.init($("#zTree"),setting, data);

              //让第一个父节点展开

              var rootNode_0 = zTreeObj.getNodeByParam('pid',0,null);

              zTreeObj.expandNode(rootNode_0, true, false, false, false);

          },

          error: function(){

          }

      });

}

</script>

</html>

实体Node.java:

package com.test.model;

public class Node {

    private String id;

    private String pid;

    private String name;

    private String open;

    private String isParent;

    public Node(String id, String pid, String name, String open, String isParent) {

        super();

        this.id = id;

        this.pid = pid;

        this.name = name;

        this.open = open;

        this.isParent = isParent;

    }

    public String getId() {

        return id;

    }

    public void setId(String id) {

        this.id = id;

    }

    public String getPid() {

        return pid;

    }

    public void setPid(String pid) {

        this.pid = pid;

    }

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public String getOpen() {

        return open;

    }

    public void setOpen(String open) {

        this.open = open;

    }

    public String getIsParent() {

        return isParent;

    }

    public void setIsParent(String isParent) {

        this.isParent = isParent;

    }

}

Controller:

package com.cy.controller;

import java.util.ArrayList;

import java.util.List;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;

import com.test.model.Node;

@Controller

public class ZtreeController {

    @RequestMapping("/getNodes")

    @ResponseBody

    public List<Node> getNodes() throws Exception{

        List<Node> nodeList = new ArrayList<Node>();

        nodeList.add(new Node("1","0","硬件规格","false","true"));

        nodeList.add(new Node("10","1","单板","false","true"));

        nodeList.add(new Node("11","1","子卡","false","true"));

        nodeList.add(new Node("12","1","设备","false","true"));

        nodeList.add(new Node("2","0","软件规格","false","true"));

        nodeList.add(new Node("20","2","java","false","true"));

        nodeList.add(new Node("21","2","jscript","false","true"));

        nodeList.add(new Node("22","2","php","false","true"));

        return nodeList;

    }

    @RequestMapping("/asyncGetNodes")

    @ResponseBody

    public List<Node> asyncGetNodes(String id, String pid, String name) throws Exception{

        List<Node> nodeList = new ArrayList<Node>();

        if(id.equals("10")){

            nodeList.add(new Node("100",id,"单板_00","false","false"));

            nodeList.add(new Node("101",id,"单板_01","false","false"));

        }

        Thread.sleep(3000);

        return nodeList;

    }

}

Thread.sleep(3000);是模拟异步加载的时间；

效果：
一开始初始化完tree时候，让第一个父节点展开了；

异步加载过程中....

异步加载完成：

------------------------------------------------------------------------------------------------------------------------------------------------------------------

jquery zTree异步加载的例子的更多相关文章

  1. JQuery ztree 异步加载实践

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

  2. Jquery Ztree异步加载树

    1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...

  3. zTree 异步加载

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

  4. ztree异步加载

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

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

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

  6. Jquery树控件ZTree异步加载

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

  7. Ztree异步加载自动展开节点

    在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况 ...

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

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

  9. 插件使用一树形插件---zTree一zTree异步加载

    zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...

随机推荐

  1. [LeetCode] 292. Nim Game_Easy tag: Math

    You are playing the following Nim Game with your friend: There is a heap of stones on the table, eac ...

  2. java常用类总结

    0.jar包下载地点 http://mvnrepository.org/ 1.序列化反序列化Object代码 百度云:http://pan.baidu.com/disk/home#list/path= ...

  3. yii2中关联查询

    yii2 ActiveRecord多表关联以及多表关联搜索的实现 一个老生常谈的问题.最近通过群里的反馈,觉得很多人还是没有去理解这个问题.今天把这个问题讲明白了,看看yii2 ActiveRecor ...

  4. 完整table

    .table-bordered{ border:1px solid #cccccc; } .table { border-spacing: 0;/*设置或检索当表格边框独立时(即border-coll ...

  5. Navicat 连接 Mysql8.0 出现2059问题的解决方法

    ``` 登陆Mysql后执行命令 ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'; ...

  6. 使用点击二分图传导计算query-document的相关性

    之前的博客中已经介绍了Ranking Relevance的一些基本情况(Click Behavior,和Text Match):http://www.cnblogs.com/bentuwuying/p ...

  7. 基于Axis1.4的webservice接口开发（接口调用）

    基于Axis1.4的webservice接口开发(接口调用) 一.webservice接口代码参考上一篇博客: http://www.cnblogs.com/zhukunqiang/p/7125668 ...

  8. 并发写Btree原理剖析

    OceanBase 0.4的UpdateServer存储引擎使用了一棵可以多线程并发修改的BTree,读写不冲突,由颜然 开发.线上运行稳定. UpdateServer存储引擎采用类leveldb的方 ...

  9. linux 安装软件的几种方法

    一. 解析Linux应用软件安装包: 通常Linux应用软件的安装包有三种: 1) tar包,如software-1.2.3-1.tar.gz.它是使用UNIX系统的打包工具tar打包的. 2) rp ...

  10. tortoisegit 代码的回滚方式 --两种

    TortoiseGit有两种回滚代码方式, 一种是导出指定版本代码为zip格式,不影响源代码:另一种是直接在源代码上回滚, 指定版本之后写的代码都会被删除.下面分别介绍这两种方法: 首先进入版本日志对 ...