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 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" /> <input type="button" id="btn" value="搜素" onclick="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;
}
}
后台代码：
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;
}
}
说明：
1.通过在otherParam数组中设值的方式将搜索参数带到后台（无参数时必须将otherParam设为空数组否则一直会将前一次的参数带到后台）；
2.在结点创建完成后的回调函数onNodeCreated中进行手动异步加载。每个节点都进行异步加载，这时候带上搜索的关键字进行查询，达到搜索目的；
3.我这边第一次因为要将第一个父节点展开，所以第一次请求第一级父级节点，然后手动$.fn.zTree.init($("#zTree"),setting, data)，这时候expandNode第一个父级节点，是自动异步加载的；
4.如果点击搜索，自动带上param参数，这个参数就是搜索的关键字，然后每个节点创建时候触发onNodeCreated事件，每个节点只要是父节点，都会进行异步加载；
5.我这边后台没有写根据param进行查询，仅仅是一个例子而已。真正根据param去查询就行了。
初始化的时候默认加载第一个父级节点：
搜索的时候加载全部节点，要包含节点名字:
jquery zTree异步搜索的例子--搜叶子节点的更多相关文章
- jquery zTree异步搜索的例子--搜全部节点
参考博客: https://segmentfault.com/a/1190000004657854 https://blog.csdn.net/houpengfei111/article/detail ...
- jquery ztree异步搜索
一.初始异步加载树 初始化默认给出一个根结点,再结合异步加载的方式手动触发默认加载第一层,如图: 代码如下: var treeSetting = { async: { enable: true, ur ...
- jquery zTree异步加载的例子
下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...
- JQuery ztree 异步加载实践
本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...
- Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...
- bootstrap jQuery Ztree异步载入数据，check选择&可加入、改动、删除节点
效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...
- ASP.NET MVC 中使用 jQuery 实现异步搜索功能
常见的几种异步请求方式: Ajax.BeginForm 异步提交文本的形式 Ajax.ActionLinkk 文本链接的形式 Client Validataion 客户端的认证 一.用jQuer ...
- zTree异步加载展开第一级节点
在 setting 中的 callback 中加上 onAsyncSuccess:onAsyncSuccess 回调函数 , 然后实现回调函数 var isFirst = true;function ...
- jquery zTree搜索高亮的例子
思路: 搜索的时候发请求到后台,后台根据关键字找到匹配的节点,并将这些节点添加一个标志light: 后面就根据这个light为true就高亮,false就不高亮: 后台将这些节点返回到前台,前台展示: ...
随机推荐
- libsvm使用总结
./tools/ subset.py 分割数据集 grid.py 优化参数c.g checkdata.py 检测数据集格式 easy.py 综合 ./windows/ svm-scale ...
- 04 jsp,EL,JSTL
jsp:Java Server Page 什么是jsp?从用户角度看待 ,就是是一个网页 , 从程序员角度看待 , 其实是一个java类, 它继承了servlet,所以可以直接说jsp 就是一个Se ...
- C++学习（十六）（C语言部分）之 数组三
复习 以及 测试 /* 一维数组 数组是相同的数据的一个集合 <类型><数组名>[下标表达式]={数组元素 初始值}; 数组名和变量的命名规则是一样的 数组名是一个地址 数组下 ...
- Ubuntu下一个好用的终端
在终端下输入: sudo apt-get install terminator 快捷键: shift+ctrl+e 在当前窗口右侧新开一个窗口 shift+ctrl+w ...
- 《DSP using MATLAB》Problem 5.38
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- Python-random 随机数模块
random 随机数模块格式: import random 引入随机模块文件 1 import random 2 3 print(random.random())#(0,1)----float 大于0 ...
- 学习笔记TF013:卷积、跨度、边界填充、卷积核
卷积运算,两个输入张量(输入数据和卷积核)进行卷积,输出代表来自每个输入的信息张量.tf.nn.conv2d完成卷积运算.卷积核(kernel),权值.滤波器.卷积矩阵或模版,filter.权值训练习 ...
- 用idea编写第一个jsp文件
创建一个JAVA-web项目的前提:1.下载并安装JDK2.安装并配置Tomcat服务器 下面开始创建JAVA-web项目: 1.File——>new——>Project... 2.跟 ...
- POI事件模型处理execl导入功能(只支持07版本的execl)
由于通过new XSSFWorkbook 这种方式导入导致生产环境端口宕机.通过dump文件和javacore文件分析是导入功能导致的.解决办法:自己通过网上写的工具类,不知道是否存在bug. pac ...
- MySQL中视图
视图是指计算机数据库中的视图,是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的查询所引用 ...