jquery zTree异步加载的例子

下面是使用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
    }
]

View Code

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时候，让第一个父节点展开了；

异步加载过程中....

异步加载完成：

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

来源：https://www.cnblogs.com/tenWood/p/8620708.html

标签

string

ztree

jquery