JQuery ztree带筛选、异步加载实例讲解
本文实例分享了JQuery ztree带筛选、异步加载实例，供大家参考，具体内容如下
<html>
< head>
< base href="<%=basePath%>">
<title>My JSP 'ztree.jsp' starting page</title>
<link rel="stylesheet" href="zTrees/css/zTreeStyle/zTreeStyle.css"
type="text/css">
< script type="text/javascript" src="zTrees/js/jquery-1.4.4.min.js"></script>
< script type="text/javascript" src="zTrees/js/jquery.ztree.core-3.5.js"></script>
< script type="text/javascript"
src="zTrees/js/jquery.ztree.excheck-3.5.js"></script>
< script type="text/javascript"
src="zTrees/js/jquery.ztree.exedit-3.5.js"></script>
< script type="text/javascript"
src="zTrees/js/jquery.ztree.exhide-3.5.js"></script>
< SCRIPT type="text/javascript">
$(function() {
var setting = {
async : { //异步加载
type : "post",
enable : true,
url : getUrl
},
check : {
enable : true
},
data : {
simpleData : {
enable : true
}
},
callback : {
onClick : nodeClick,
onCheck : nodeCheck
}
};
$.fn.zTree.init($("#treeDemo"), setting);
});
//返回地址
function getUrl(treeId, treeNode) {
return "***.do?method=listXMLTree&****Sid=100";
}
//单击节点
function nodeClick(event, treeId, treeNode) {
//alert(treeId+treeNode.id+treeNode.mobileNO);
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var sNodes = treeObj.getSelectedNodes();
if (sNodes.length> 0) {
if (!treeNode.isParent) {
$.ajax({
type : 'POST',
url : '***.do?method=listXMLChildren',
data : {'****Sid' : treeNode.id},
dataType : 'text',
async : false,
success : function(dat) {
var dats = eval(dat);
if (dats.length != 0) {
//var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
//treeObj.addNodes(treeNode, dats);
treeObj.addNodes(treeNode, dats);
}
}
});
} else {
treeObj.expandNode(treeNode);
}
}
}
//选中节点
function nodeCheck(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
nodes = treeObj.getCheckedNodes(true);
var str = "";
for ( var i = 0, l = nodes.length; i < l; i++) {
//alert(nodes[i].id + nodes[i].mobileNO);
if (nodes[i].mobileNO != null) {
str += nodes[i].name + ":" + nodes[i].mobileNO + ";";
}
}
$('#mtDstName').val(str);
}
//监听搜索框
$(function() {
$('#sch').bind('input propertychange', function() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var value = $('#sch').val();
nodeList = treeObj.getNodesByParamFuzzy('name', value);
nodes = treeObj.getNodes();
treeObj.hideNodes(nodes[0].children);
treeObj.showNodes(nodeList);
});
});
< /SCRIPT>
< /head>
< body>
搜索:<input type="text" id="sch">
<!-- < input type="button" id="btnSch" value="搜索">-->
<br> 树状：
<div style="height:300px;width:200px;">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div align="center">
名单：
<textarea id="mtDstName" name="mtDstName" readonly></textarea>
</div>
< /body>
< /html>
具体功能操作：
搜索市委：
更多关于ztree控件的内容，请参考专题《jQuery插件ztree使用汇总》 。
以上就是带筛选、异步加载功能的ztree，希望大家通过最近几篇文章，对ztree有了深入的了解。
相关推荐
-
zTree异步加载展开第一级节点的实现方法
在 setting 中的 callback 中加上 onAsyncSuccess:onAsyncSuccess 回调函数 , 然后实现回调函数 var isFirst = true; function onAsyncSuccess(event, treeId) { if (isFirst) { //获得树形图对象 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //获取根节点个数,getNodes获取的是根节点的集合 var nodeLi
-
js树插件zTree获取所有选中节点数据的方法
本文实例讲述了js树插件zTree获取所有选中节点数据的方法.分享给大家供大家参考.具体分析如下: 由于刚接触Tree方面的东西.在网上看到了zTree,是中国人写的.所以API肯定是中文的.而且评论也很好.所以尝试用zTree在项目中.这个获取所有选中节点数据很简单.看一下API就能看懂了.所以我就直接上代码了. 复制代码 代码如下: <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standa
-
Jquery zTree 树控件异步加载操作
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动.编辑.删除 支持任意更换皮肤 / 个性化图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 简单的参数配置实现 灵活多变的功能 异步加载的意思就是: 当点
-
ztree获取当前选中节点子节点id集合的方法
本文实例讲述了ztree获取当前选中节点子节点id集合的方法.分享给大家供大家参考.具体分析如下: 要求:获取当前选中节点的子节点id集合. 步骤: 1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值. treeNode:当前选中节点对象 function getChildNodes(treeNode) { var childNodes = ztree.transformToArray(tree
-
jQuery使用zTree插件实现树形菜单和异步加载
本文实例讲解了jQuery使用zTree插件实现树形菜单和异步加载,并且可以进行编辑,分享给大家供大家参考,具体内容如下 效果图: 一.HTML代码 <html> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <l
-
jquery zTree异步加载、模糊搜索简单实例分享
本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下 一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data:
-
JQuery ztree 异步加载实例讲解
本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 准备工作: 1下载 JQuery ZTree 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象 我下载JAR包后,引入到Eclipse中总是报找不到class错误. 解决办法:把jar包放在WEB-INF/lib下即可. 代码实例: index.jsp <%@ page language="jav
-
后台获取ZTREE选中节点的方法
本文实例讲述了后台获取ZTREE选中节点的方法.分享给大家供大家参考.具体实现方法如下: function count() { var zTree = $.fn.zTree.getZTreeObj("classpurview"); checkCount = zTree.getCheckedNodes(true); var classpurview = ""; for(var i=0;i<checkCount.length;i++) { classpurview
-
jquery zTree异步加载简单实例分享
首先提供Ztree官方网站http://www.ztree.me. Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式. 当前版本Ztree 3.5.01 simple.html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>simple.html</title> <meta http-equiv="keywords"
-
JQuery ztree带筛选、异步加载实例讲解
本文实例分享了JQuery ztree带筛选.异步加载实例,供大家参考,具体内容如下 <html> < head> < base href="<%=basePath%>"> <title>My JSP 'ztree.jsp' starting page</title> <link rel="stylesheet" href="zTrees/css/zTreeStyle/zTree
-
jQuery zTree树插件动态加载实例代码
需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全加载不出来.于是需要进行优化为动态加载(增量加载)的方式,以便数据加载,提高体验度. 解决断路: 这应该好办,只要找到父节点单击事件,然后进行数据加载,结点附加即可.时间紧,任务重,完全没给研究的时间.只能硬着上,随便搜索一个"zTree动态加载",出是出来了,标题也对,可里面的代码根本没
-
zTree树形插件异步加载方法详解
本文实例为大家分享了zTree树形插件异步加载,Struts2框架,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>异步加载</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/zTree_v
-
详解Jquery EasyUI tree 的异步加载（遍历指定文件夹，根据文件夹内的文件生成tree）
Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)具体代码如下: private void SMT(HttpContext context) { string SqlConnection82 = System.Configuration.ConfigurationManager.AppSettings["LocalConnectionString"]; string path = context.Server.MapPath(@"
-
jquery使用EasyUI Tree异步加载JSON数据（生成树）
这几天因为工作需要,要做一个支持无限级的菜单. 我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件. 不得不说,easyui确实很强大. 因为是无限级菜单,数据量可能有点大,所以考虑采用异步加载. 但是因为后台默认传来的数据是 一个实体,所以又在后台进行了JSON字符串拼接. 最后,在网上找了N多代码,然后又去问了好几个群里的网友,终于搞出来这个小东西. 一.HTML部分代码 <div id="categoryChooseDiv" title="请选
-
AngularJS 实现按需异步加载实例代码
AngularJS 通过路由支持多视图应用, 可以根据路由动态加载所需的视图, 在 AngularJS 的文档中有详细的介绍, 网上也有不少教程, 就不用介绍了! 随着视图的不断增加,js文件会越来越多,而 AngularJS 默认需要把全部的js都一次性加载,使用起来非常不便, 因此按需加载模块的需求会越来越强,不过,AngularJS 并没有实现按需加载. 习惯了 seajs 的异步加载方式,也想着 angular 也能同样使用异步加载,但是事实不随人愿. angularjs 和 requi
-
php项目中类的自动加载实例讲解
主要函数:spl_autoload_register() - 注册给定的函数作为 __autoload() 的实现 将函数注册到SPL __autoload函数队列中.如果该队列中的函数尚未激活,则激活它们. 如果在你的程序中已经实现了__autoload()函数,它必须显式注册到__autoload()队列中.因为spl_autoload_register()函数会将Zend Engine中的__autoload()函数取代为spl_autoload()或spl_autoload_call()
-
jquery zTree异步加载简单实例讲解
本文实例讲解了jquery zTree异步加载,分享给大家供大家参考,具体内容如下 web.xml中Servlet配置如下: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XM
-
JavaScript异步加载问题总结
同步加载的问题 默认的js是同步加载的,这里的"加载"可以理解成是解析.执行,而不是"下载",在最新版本的浏览器中,浏览器对于代码请求的资源都是瀑布式的加载,而不是阻塞式的,但是js的执行总是阻塞的.这会引起什么问题呢?如果我的index页面要加载一些js,但是其中的某个请求迟迟得不到响应,于是阻塞了后面的js代码的执行(同步加载),同时页面渲染也不能继续(如果js引入是在head标签后). <script type="text/javascript