jquery ztree异步搜索
一、初始异步加载树
初始化默认给出一个根结点,再结合异步加载的方式手动触发默认加载第一层,如图:
var treeSetting = {
async: {
enable: true, url:"xxx/demo.do?method=listByTree",
dataType:"json",
autoParam:["id=pid"]
},
view: {
dblClickExpand: true,
selectedMulti: false,
expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pid",
rootPId: "root"
}
},
callback: {
onNodeCreated: zTreeOnNodeCreated
}
}; //默认根结点
var rootNode = {"id":0, "pid":"root", "name":"商品分类", "open":true, "isParent":true}; $(document).ready(function(){
var zTreeObj = $.fn.zTree.init($("#tree"), treeSetting, rootNode);
var node = zTreeObj.getNodeByParam("id", 0, null);
zTreeObj.reAsyncChildNodes(node, "refresh");
});
二、异步搜索叶子结点
在使用JQuery ZTREE时可能要用到异步的方式模糊搜索叶子结点,如图:
而如果只使用ZTREE自带的展开方法zTreeObj.expandNode只是会展开改结点,无法触发异步加载;这时候就必须手动调用异步加载的方法进行处理,解决思路如下:
通过在otherParam数组中设值的方式将搜索参数带到后台(无参数时必须将otherParam设为空数组否则一直会将前一次的参数带到后台);在结点创建完成后的回调函数onNodeCreated中进行手动异步加载。
代码如下:
function searchM() {
var param = $.trim($("input[name='param']").val());
var treeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodeByParam("id", 0, null);
if(param != ""){
param = encodeURI(encodeURI(param));
treeObj.setting.async.otherParam=["param", param];
}else {
//搜索参数为空时必须将参数数组设为空
treeObj.setting.async.otherParam=[];
}
treeObj.reAsyncChildNodes(node, "refresh");
} function zTreeOnNodeCreated(event, treeId, treeNode) {
var param = $.trim($("input[name='param']").val());
var treeObj = $.fn.zTree.getZTreeObj("tree");
//只有搜索参数不为空且该节点为父节点时才进行异步加载
if(param != "" && treeNode.isParent){
treeObj.reAsyncChildNodes(treeNode, "refresh");
}
};
jquery ztree异步搜索的更多相关文章
- jquery zTree异步搜索的例子--搜全部节点
参考博客: https://segmentfault.com/a/1190000004657854 https://blog.csdn.net/houpengfei111/article/detail ...
- jquery zTree异步搜索的例子--搜叶子节点
参考博客:https://www.cnblogs.com/henuyuxiang/p/6677397.html 前台代码 <%@ page language="java" c ...
- JQuery ztree 异步加载实践
本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...
- jquery zTree异步加载的例子
下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...
- 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 ...
- C#使用Jquery zTree实现树状结构显示_异步数据加载
JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面: http://www.treejs.cn/v3/dem ...
- Jquery zTree结合Asp.net实现异步加载数据
zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...
随机推荐
- bzoj3946
题解: 树套树 treap+线段树 treap就把线段树上的节点弄一下 然后修改的时候 把中间的一段一起加 把两头重新计算(二分+hash) 代码: #include<bits/stdc++.h ...
- 使用Messenger 从Activity发送数据到service 通过后台计算结果Log输出;
package com.lixu.messenger; import android.app.Activity; import android.app.Service; import android. ...
- bootstrap的学习总结
1.bootstrap是一个css框架,它提供了很多类,这些类中实现了内外边距,颜色,大小等样式的封装,它还提供了很多常用插件可以直接使用 2.12栅格本质上是将标签的外边距和内边距通过“格子”的思想 ...
- 深入理解Linux网络技术内幕——内核基础架构和组件初始化
引导期间的内核选项 Linux允许用户把内核配置选项传给引导记录,再有引导记录传给内核,以便对内核进行调整. start_kernel中调用两次parse_args,用于引导期间配置用 ...
- anu - proptypes
//为了兼容yo var check = function () { return check; }; check.isRequired = check; export var PropTypes = ...
- NSScanner
NSScanner NSScanner:该类主要实现对字符串扫描.并且该扫描必须从头到尾扫描(也可以跳到指定的地方进行扫描),开始扫描必须应用到函数,连续的数字之间可以用空格隔开,如:35 15.2 ...
- Uboot中start.S源码的指令级的详尽解析
Uboot中start.S源码的指令级的详尽解析 https://www.crifan.com/files/doc/docbook/uboot_starts_analysis/release/html ...
- iOS 开发 Framework
制作Framework 的好处和缺点 好处: 1.如果模块间接口定义的比较完善,模块化的程序具有很好的可扩展性与内聚性: 2.物理上的模块化便于开发过程的管理与测试,尤其是在程 ...
- [LeetCode&Python] Problem 412. Fizz Buzz
Write a program that outputs the string representation of numbers from 1 to n. But for multiples of ...
- JAVA爬取百度贴吧图片
package com.wang.xiaowei.utils; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.code ...