jquery zTree初始化及异步加载

最新推荐文章于 2022-02-17 14:45:03 发布

紫水木鱼

最新推荐文章于 2022-02-17 14:45:03 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： jquery zTree 异步加载

本文链接：https://blog.csdn.net/ZiShuiMuYu/article/details/90680697

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

1）初始化树的时候是ajax请求，返回nodes(树的节点)列表来初始化树的；如果一开始就异步的话，$ $. f n . z T r e e . i n i t ($ ("#zTree"),setting, data)第三个参数为null就行；

以下面这个Node的例子举个栗子:

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  }
]

实际上这个ztree的node是json数组

2）后面点击最末端的节点，比如点击单板的时候，开始异步加载；下面是前端代码,注意加粗部分

<%@ 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",//异步加载下一一级加点的URL
            autoParam:["id", "pid", "name"],//自动传到后端,后端用来查找对应的子节点信息的参数
            dataFilter: filter   //过滤器
        },
        data:{
            simpleData:{
                enable: true,
                idKey:'id',//自己的ID
                pIdKey:'pid', //父节点的ID
                rootPId: 0    //根节点ID
            }
        },
        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),用于封装一个节点

package com.test.model;

public class Node {
	//自己的ID
    private String id;
   // 父节点ID
    private String pid;
    //自己的名字
    private String name;
    //是否展开
    private String open;
    是否是父节点,(true,就是展开)
    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;
    }
    
    
}

后端控制器代码

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;
    }
}

紫水木鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery zTree初始化及异步加载

下面是使用zTree异步加载的一个例子：1）初始化树的时候是ajax请求，返回nodes(树的节点)列表来初始化树的；如果一开始就异步的话，$.fn.zTree.init(.fn.zTree.init(.fn.zTree.init(("#zTree"),setting, data)第三个参数为null就行；以下面这个Node的例子举个栗子:var nodes = [ { 'id': 1...
复制链接

扫一扫