`
zTreeAPI
  • 浏览: 345662 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery Tree插件——zTree v3.3 正式版 发布

阅读更多

 

  这次 zTree v3.3 继续修改一些细节 bug,同时尝试推出 exhide 扩展包,主要是为了实现一些扩展功能。 

  

  因为隐藏节点的功能 与 编辑功能(尤其是拖拽操作)结合使用的时候势必会产生许多需求方面的细节问题,因此 exhide 扩展请不要与 exedit 功能同时使用。


  针对 隐藏节点 与 checkbox / radio 功能同时使用时的策略如下:

 

  1.   被隐藏的节点(包括其全部子节点)不会与父节点的勾选状态有任何关联(包括半勾选状态),即相当于被删除,除非被重新显示。
  2.   isFirstNode 和 isLastNode 属性只针对显示的节点处理,被隐藏的节点这两个属性都被设置为 false
  3.   隐藏节点 不会影响 getPreNode() 和 getNextNode() 方法

   这应该是能够满足大部分需求,如果你的实际需求的确与这个策略不同,那么请根据实际情况去修改 exhide 即可。


  请注意:jquery.ztree.all 文件中 仅仅包含 core、excheck、exedit 这三个 js 包; 对于 exhide 以及以后推出的 扩展包都不会包含在 jquery.ztree.all 文件中。

  如果需要使用,请自行添加。


  在线操作演示:http://www.ztree.me/v3/demo.php#_101

  快速下载地址:http://code.google.com/p/jquerytree/downloads/list

 

 

下面是 v3.3 的修改记录:


   * 【增加】扩展库 exhide -- 节点隐藏功能


   * 【修改】getNodesByFilter 方法,添加 invokeParam 自定义参数

   * 【修改】拖拽中测试代码未删除,导致出现黄颜色的 iframe 遮罩层的 bug

   * 【修改】延迟加载方法 对于使用 expandAll 进行全部展开时,导致 onNodeCreated 回调 和 addDiyDom 方法触发过早的 bug

   * 【修改】异步加载模式下无法利用 server 返回 xml 并且 在 dataFilter 中继续处理的 bug

    抱歉,刚发现这个bug 被漏掉了,下次版本时进行修正吧。

   * 【修改】使用 moveNode 移动尚未生成 DOM 的节点时,视图会出现异常的 bug

   * 【修改】删除节点后,相关节点的 isFirstNode 属性未重置的 bug

   * 【修改】getPreNode(),getNextNode() 方法在对于特殊情况时计算错误的 bug

   * 【修改】设置 title 之后,如果重新将 title 内容设置为空后,会导致无法更新 title 的 bug

   * 【修改】针对 setting.check.chkStyle=="radio" && setting.check.radioType=="all" 的情况时,getTreeCheckedNodes方法优化,找到一个结果就 break

   * 【修改】zTreeObj.getCheckedNodes(false) 在 radioType = "all" 时计算错误的 bug

   * 【修改】完善 API 中 beforeDrop / onDrop 的关于 treeId 的说明

 

分享到:
评论
66 楼 jackyrong 2012-09-02  
已解决,谢谢
65 楼 zTreeAPI 2012-09-02  
jackyrong 写道
..重新COPY onclick事件的代码呀

function onClick() {......}
setting.callback.onClick = onClick;

上面是你初始化zTree 时做的定义; 当你用js 代码 selectNode 之后,你可以用js 执行 onClick 这个 function 就可以了
例如: zTreeObj.selectNode(treeNode);
onClick(...);
64 楼 zTreeAPI 2012-09-02  
biner 写道
楼主能否把样式不单独加载啊
比如这样:
<script type='text/javascript' src='js/jquery.ztree.core-3.3.js?skin=default'></script>

你这个相当于把 css 或 js 做成动态发布了。。。需要你自己加工一下,满足你自己的需求就可以了吧。
63 楼 jackyrong 2012-09-02  
我的情况是,比如一颗树在左边,对应的CRUD界面在右边(现在我是把树的所有结点和每个结点的对应详细数据,以JSON形式一次加载的,所以在点树的某个结点时,右边的表格会自动加载结点的详细信息),那么比如修改树中的某个结点后,当重新架载页面时,会树自动展开到刚才修改的结点,并且同时激发onclick事件,这个应该如何做呢?我现在是这样:


$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, treeNodes);
				var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = treeObj.getNodesByParam("tId", "treeDemo_30", null);
				var nodes1 = treeObj.getNodesByParam("id", "pos_72", null);
				if (nodes.length>0) {
					alert("ok");
	treeObj.expandNode(nodes[0], true, true, true);
		treeObj.selectNode(nodes1[0]).onClick();


  上面已经可以实现重新加载时,默认选中修改过的结点(展开到这个层次),但我期望时,能同事默认调用onclick事件(onclick事件的方法已经写好的了),但我不想又在ready方法中,重新COPY onclick事件的代码呀
62 楼 jackyrong 2012-08-31  
HI,想请教下,有什么办法可以实现,在ZTREE中当比如在树中点某个结点时,同步AJAX在右边显示某个结点的详细信息,然后修改这些信息后,如果更新后,要求左边的树继续展开
到所修改的某个结点的树的层次,请问有什么本身ZTREE设置的方法能实现么?
61 楼 biner 2012-08-31  
楼主能否把样式不单独加载啊
比如这样:
<script type='text/javascript' src='js/jquery.ztree.core-3.3.js?skin=default'></script>
60 楼 zTreeAPI 2012-08-31  
foxinmy 写道
你好,我又来问啦,请问有没有树形build完成的回调函数,就有点类似于onAsyncSuccess,
是这样的,我第一次是异步加载的,数据量较大,加载完成后我在onAsyncSuccess函数里面用一个全局变量保存下来,然后下次我直接init(zNodes),现在貌似不能马上获取到zTree对象里面的nodes,不知是不是数据量大的缘故,我的数据量在几百条左右.

抱歉,目前没有这种设计,但你提出的这个问题是非常合理的,我正在构想下一个大版本的结构调整。 现在你只能是利用 onAsyncSuccess 回调来得到异步加载结束的事件,因为这时候节点已经加载完毕了。
59 楼 foxinmy 2012-08-30  
你好,我又来问啦,请问有没有树形build完成的回调函数,就有点类似于onAsyncSuccess,
是这样的,我第一次是异步加载的,数据量较大,加载完成后我在onAsyncSuccess函数里面用一个全局变量保存下来,然后下次我直接init(zNodes),现在貌似不能马上获取到zTree对象里面的nodes,不知是不是数据量大的缘故,我的数据量在几百条左右.
58 楼 zTreeAPI 2012-08-29  
foxinmy 写道
zTreeAPI 写道
foxinmy 写道
....希望能解鄙人的疑惑,谢谢~

补充一下, 另外请检查是否浏览器兼容问题?

经过验证是我的代码有点问题,还有一个问题请教下,比如我init后马上调用
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
貌似得不到对象,获取的数据(nodes)也是空的

init 后应该是能够立刻得到 zTree 对象的,其实init 方法本身也会返回 zTree 对象; 另外如果你用了异步加载,那么一定要在 onAsyncSuccess 中获取数据,因为这时候异步加载才完毕的。
57 楼 foxinmy 2012-08-29  
zTreeAPI 写道
foxinmy 写道
....希望能解鄙人的疑惑,谢谢~

补充一下, 另外请检查是否浏览器兼容问题?

经过验证是我的代码有点问题,还有一个问题请教下,比如我init后马上调用
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
貌似得不到对象,获取的数据(nodes)也是空的
56 楼 zTreeAPI 2012-08-29  
foxinmy 写道
....希望能解鄙人的疑惑,谢谢~

补充一下, 另外请检查是否浏览器兼容问题?
55 楼 zTreeAPI 2012-08-29  
foxinmy 写道
你好,工具很好用,有一疑问,当我这样选中某个节点时,样式似乎有点问题
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var obj = zTree.getNodeByParam("id", goodsCategoryValue.val(), null);
if(obj){
  zTree.selectNode(obj,false);
}else{
  zTree.cancelSelectedNode();
}

这是未用上面代码的正常图

这是用了上面代码后的图



希望能解鄙人的疑惑,谢谢~

这个有点儿奇怪,按道理 selectNode 的效果应该是和 鼠标点上去完全一样的呀。 代码也是同样的一个方法。 请检查一下是否css 异常? 直接用我提供的Demo 这么使用是否会出现异常? 另外如果的确发现问题,请把 代码做成 demo 那种 html 发给我,以便于查找问题,谢谢。
54 楼 foxinmy 2012-08-29  
你好,工具很好用,有一疑问,当我这样选中某个节点时,样式似乎有点问题
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var obj = zTree.getNodeByParam("id", goodsCategoryValue.val(), null);
if(obj){
  zTree.selectNode(obj,false);
}else{
  zTree.cancelSelectedNode();
}

这是未用上面代码的正常图

这是用了上面代码后的图



希望能解鄙人的疑惑,谢谢~
53 楼 zTreeAPI 2012-08-21  
64595711 写道
id和pid 为32位的uuid字符串 ztree无法支持‘’格式!!!

zTree支持 字符串格式的 id、pId,单请务必看清楚,默认的是 pId 不是 pid
52 楼 64595711 2012-08-21  
   var zNodes =[
        { id:'1', pid:'0', name:"父节点1 - 展开", open:true, isParent:true},
        { id:'11', pid:'1', name:"父节点11 - 折叠"},
        { id:'111', pid:'11', name:"叶子节点111"},
        { id:'112', pid:'11', name:"叶子节点112"},
        { id:'113', pid:'11', name:"叶子节点113"},
        { id:'114', pid:'11', name:"叶子节点114"},
        { id:'12', pid:'1', name:"父节点12 - 折叠"},
        { id:'121', pid:'12', name:"叶子节点121"},
        { id:'122', pid:'12', name:"叶子节点122"},
        { id:'123', pid:'12', name:"叶子节点123"},
        { id:'124', pid:'12', name:"叶子节点124"},
        { id:'13', pid:'1', name:"父节点13 - 没有子节点", isParent:true},
        { id:'2', pid:'0', name:"父节点2 - 折叠"},
        { id:'21', pid:'2', name:"父节点21 - 展开", open:true},
        { id:'211', pid:'21', name:"叶子节点211"},
        { id:'212', pid:'21', name:"叶子节点212"},
        { id:'213', pid:'21', name:"叶子节点213"},
        { id:'214', pid:'21', name:"叶子节点214"},
        { id:'22', pid:'2', name:"父节点22 - 折叠"},
        { id:'221', pid:'22', name:"叶子节点221"},
        { id:'222', pid:'22', name:"叶子节点222"},
        { id:'223', pid:'22', name:"叶子节点223"},
        { id:'224', pid:'22', name:"叶子节点224"},
        { id:'23', pid:'2', name:"父节点23 - 折叠"},
        { id:'231', pid:'23', name:"叶子节点231"},
        { id:'232', pid:'23', name:"叶子节点232"},
        { id:'233', pid:'23', name:"叶子节点233"},
        { id:'234', pid:'23', name:"叶子节点234"},
        { id:'3', pid:'0', name:"父节点3 - 没有子节点", isParent:true}
    ]; 数据父子目录关系无法显示!!!!!求解决!!!!
51 楼 64595711 2012-08-21  
id和pid 为32位的uuid字符串 ztree无法支持‘’格式!!!
50 楼 zTreeAPI 2012-08-20  
nuoheng 写道
简单的说在 .js 文件里面赋值,不行

请区分 json 对象 和 json 格式的 字符串
49 楼 nuoheng 2012-08-20  
简单的说在 .js 文件里面赋值,不行
48 楼 nuoheng 2012-08-20  
{"id":0, "pId":0, "name":"大分类", "open":true},{"id":1, "pId":0, "name":"系统管理", "open":true ,"checked":true},{"id":9, "pId":0, "name":"财务管理", "open":true ,"checked":true}
kjj 写道
nuoheng 写道
kjj 写道
还有一个原因就是你组装的json语法格式不正确,在firebug中调试一下!!


我保证,格式一定OK,因为在那 aa.val 里面复制过去是可以的

现在是在js里面赋值就不行,jsp或servlet赋值就可以

用$.get获取一下,然后挨个把你的list用js打印到页面试试!!



{"id":0, "pId":0, "name":"大分类", "open":true},{"id":1, "pId":0, "name":"系统管理", "open":true ,"checked":true},{"id":9, "pId":0, "name":"财务管理", "open":true ,"checked":true}

下面就说过,这就是列出来数据。。。
47 楼 kjj 2012-08-18  
nuoheng 写道
kjj 写道
还有一个原因就是你组装的json语法格式不正确,在firebug中调试一下!!


我保证,格式一定OK,因为在那 aa.val 里面复制过去是可以的

现在是在js里面赋值就不行,jsp或servlet赋值就可以

用$.get获取一下,然后挨个把你的list用js打印到页面试试!!

相关推荐

    JQuery zTree v3.3

    JQuery zTree是一款基于JavaScript的开源树...总之,JQuery zTree v3.3是一个强大且易用的JavaScript树形插件,它通过提供多种操作功能、良好的性能以及灵活的定制选项,满足了开发者在构建网页树形结构时的各种需求。

    zTree v3.3 API帮助chm格式

    zTree v3.3 API帮助 根据官方网站提供的帮助制作 因为原始文档不能直接在本地打开帮助查看麻烦,所以制作成了chm格式

    jquery tree样式多样

    本文将深入探讨jQuery Tree的核心特性、样式定制以及如何利用JQuery zTree v3.3实现多样化样式。 首先,jQuery Tree的基本概念是将HTML元素转化为可展开/折叠的节点结构,通常用于展现层级关系的数据,如目录结构、...

    JQuery zTree v3.4 ztree

    JQuery zTree 是一个基于 jQuery 的插件,用于在网页中构建交互式的树形结构。v3.4 版本是其稳定且功能丰富的版本之一,适用于多种应用场景,如数据展示、导航菜单、文件目录等。它以其易用性、高效性和强大的功能...

    JQuery-zTree-v2.6.rar_Java 8_jquery tree_jquery-ztree-2.6.js_jqu

    2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox...

    全网jquery.tree树形菜单打包下载(zTree&jquery-ui&treeview共四种)

    这个压缩包包含四个不同的jQuery树形插件:zTree、jQuery UI Treeview、jQuery UI Draggable Tree和jQuery Simple Treeview。这些插件各有特色,适用于不同的项目需求。 首先,zTree是一款功能强大的jQuery插件,...

    jQuery 树形结构插件 zTree

    **jQuery zTree 插件详解** zTree 是一个基于 jQuery 的强大树形控件,它在Web开发中被广泛应用于构建动态的、交互式的树形结构。zTree 的设计目标是提供高性能、易于配置和丰富的功能,使得开发者可以轻松地在网页...

    Jquery-ztree树形菜单代码并适应移动端

    JQuery-zTree是一款基于jQuery的树形插件,它提供了丰富的功能和良好的性能,尤其适用于构建树形结构的菜单和数据展示。在移动端应用中,zTree能够自适应屏幕尺寸,提供良好的用户体验。本项目提供的代码是针对...

    ztree官网参考文档及demo

    zTree是一个基于jQuery的树形插件,它能够快速构建出各种类型的树形结构,如文件目录树、组织架构树等。zTree提供了多种数据格式支持,包括JSON、XML等,使得数据处理更加便捷。同时,zTree具备强大的事件机制和API...

    JQuery zTree v2.6

    JQuery zTree是一款基于JavaScript的树形插件,其v2.6版本在功能和性能上进行了优化,为开发者提供了更强大的树形结构处理能力。这个版本的zTree不仅包含了完整的API文档,还附带了一系列经典实例,便于开发者理解和...

    archive_zTree(JQuery Tree) v3.1.zip.zip

    【标题】"archive_zTree(JQuery Tree) v3.1.zip.zip" 提供的是一个用于构建树形结构的jQuery插件——zTree的v3.1版本。zTree是一款广泛应用于网页开发中的JavaScript库,它使得在网页上展示层级关系的数据变得更加...

    JQuery实现树插件 Ztree

    JQuery实现树插件Ztree是一个广泛使用的轻量级前端组件,它为Web开发者提供了构建交互式树形结构的便捷工具。Ztree基于流行的JavaScript库JQuery,因此,如果你已经熟悉JQuery,那么掌握Ztree将相对容易。在本文中,...

    JQuery zTree v3.5 api

    jQuery zTree 是一款基于 jQuery 的树形插件,广泛应用于网站导航、组织结构展示、文件目录管理等多种场景。v3.5 版本是其一个重要的里程碑,它提供了丰富的功能和优化的性能,使得开发者能够更加灵活地构建树形结构...

    JQuery zTree v3.2 最新版

    Tree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助。 zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 ...

    JQueryTree zTree

    `JQueryTree` 和 `zTree` 是两个基于JavaScript库,尤其是jQuery框架的插件,用于实现动态、交互式的树形组件。 **JQueryTree** `JQueryTree` 是一个轻量级的jQuery插件,主要用于构建可操作的HTML5树视图。它提供...

    JQuery zTree v3.5.14

    **jQuery zTree v3.5.14** 是一个基于jQuery的树形插件,它在Web开发中广泛用于创建交互式的树形结构。这个版本3.5.14是zTree的一个稳定版本,提供了丰富的功能和优化的性能。下面我们将深入探讨zTree的核心特性、...

    jquery.zTree.js.rar

    jquery-1.4.4.min.js jquery.ztree.exhide.min.js jquery.ztree.exedit.min.js jquery.ztree.excheck.min.js jquery.ztree.core.min.js jquery.ztree.all.min.js jquery-1.4.4.js jquery.ztree.exhide.js jquery....

Global site tag (gtag.js) - Google Analytics