jquery zTree异步搜索的例子--搜叶子节点

最新推荐文章于 2021-03-05 13:44:22 发布

weixin_34306446

最新推荐文章于 2021-03-05 13:44:22 发布

阅读量130

点赞数

文章标签： java json javascript ViewUI

原文链接：http://www.cnblogs.com/tenWood/p/8660680.html

版权

参考博客：https://www.cnblogs.com/henuyuxiang/p/6677397.html

前台代码

<%@ 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>
    <div class="container">
        <h4>Ztree异步加载使用例子</h4>
        <input type="text" id="search" /> &nbsp; <input type="button" id="btn" value="搜素" οnclick="search()"/>
        <ul id="zTree" class="ztree"></ul>
    </div>
</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" src="resources/js/jquery.ztree.exhide.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
        },
        callback: {
            onNodeCreated: zTreeOnNodeCreated
          }
};
$(document).ready(function(){
    initZTree();
    
});

/**
 * 搜索
 */
function search(){
    var param = $.trim($("#search").val());
    var treeObj = $.fn.zTree.getZTreeObj("zTree");
    if(param != ""){
        param = encodeURI(encodeURI(param));
        treeObj.setting.async.otherParam=["param", param];
      }else {
        //搜索参数为空时必须将参数数组设为空
        treeObj.setting.async.otherParam=[];
      }
    
      treeObj.reAsyncChildNodes(null, "refresh");
}

function zTreeOnNodeCreated(event, treeId, treeNode){
    var param = $.trim($("#search").val());
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    if(param!="" && treeNode.isParent){
        treeObj.reAsyncChildNodes(treeNode, "refresh",false);        
    }
}

function filter(treeId, parentNode, childNodes) {
    return childNodes;
}
//初始化树
function initZTree(){
    $.ajax({
          url:"asyncGetNodes",
          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;
    }
    
    
}

View Code

后台代码：

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("/asyncGetNodes")
    @ResponseBody
    public List<Node> asyncGetNodes(String id, String pid, String name) throws Exception{
        List<Node> nodeList = new ArrayList<Node>();
        if(id==null){
            nodeList.add(new Node("1","0","硬件规格","false","true"));
            nodeList.add(new Node("2","0","软件规格","false","true"));
            return nodeList;
        }
        
        if(id.equals("1")){
            nodeList.add(new Node("10","1","单板","false","true"));
            nodeList.add(new Node("11","1","子卡","false","true"));
            nodeList.add(new Node("12","1","设备","false","true"));
        }else if(id.equals("2")){
            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"));
        }else if(id.equals("10")){
            nodeList.add(new Node("100",id,"单板_00","false","true"));
            nodeList.add(new Node("101",id,"单板_00","false","false"));
        }else if(id.equals("100")){
            nodeList.add(new Node("1000",id,"单板_00_00","false","false"));
        }
        
        Thread.sleep(1000);
        return nodeList;
    }
}

View Code

说明：

1.通过在otherParam数组中设值的方式将搜索参数带到后台（无参数时必须将otherParam设为空数组否则一直会将前一次的参数带到后台）；

2.在结点创建完成后的回调函数onNodeCreated中进行手动异步加载。每个节点都进行异步加载，这时候带上搜索的关键字进行查询，达到搜索目的；

3.我这边第一次因为要将第一个父节点展开，所以第一次请求第一级父级节点，然后手动$.fn.zTree.init($("#zTree"),setting, data)，这时候expandNode第一个父级节点，是自动异步加载的；

4.如果点击搜索，自动带上param参数，这个参数就是搜索的关键字，然后每个节点创建时候触发onNodeCreated事件，每个节点只要是父节点，都会进行异步加载；

5.我这边后台没有写根据param进行查询，仅仅是一个例子而已。真正根据param去查询就行了。

初始化的时候默认加载第一个父级节点：

搜索的时候加载全部节点，要包含节点名字:

转载于:https://www.cnblogs.com/tenWood/p/8660680.html

weixin_34306446

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery zTree异步搜索的例子--搜叶子节点

参考博客：https://www.cnblogs.com/henuyuxiang/p/6677397.html前台代码<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTM...
复制链接

扫一扫