ztree / ztree_v3 Goto Github PK

建议更新一下代码对jquery的支持。另外还有一个样式错误，就是初始化checkbox选中的样式没有选中的bug.

折腾了很久的整合还是没有什么效果的，希望提供一个！

能否给zTree添加键盘操作的接口呢？比如onKeyDown、onKeyPress等事件

Hi,
i've seen all the demos on zTree demo site.

Based on this page: http://www.ztree.me/v3/demo.php#_302
i've tried to insert this code inside my ajax-generated code

{parentId: '', name: 'Action Plan', drag:false, childOrder:false, isParent:true},

However on my Ztree system the childOrder doesn't work (i've copied this from demo systems).

I've seen even that there are no js code that check the childOrder but only childOuter.
It's this an issue or there is something i've missed?

Thanks.

Hello,

When using zTree 3.5.02 within a plugin for WordPress 3.5, I experienced an issue with conflicting CSS styles.

WordPress declares, in its admin css file, a named class button which is overriding the zTree's button class.

To workaround this, I added css class names in _consts in ztree.core-3.5

    _consts = {
        event: {
    ...,
        classes: {
            BUTTON: "zButton",
            LEVEL: "zLevel",
            ICO_LOADING: "ico_loading"
        }
    },

Then, replace in ztree.core_.js and ztre.exedit_.js every button,level and ico_loading classes by consts.classes.CLASSNAME.

icoObj.attr({"style":"", "class": consts.classes.BUTTON +" "+ consts.classes.ICO_LOADING});

It works like a charm, maybe you should consider doing the same to avoid this issue :)

I will be glad to share my code.

如下：

//get top parent node
$.fn.zTree.getTopParentNode = function(node)
{
while(node && node.getParentNode() != null)
{
node = node.getParentNode();
}
return node;
},

I have async.enable: true

When I move node like this:

ztree.moveNode(prev_node, node, "prev", true);

and both prev_node and node has isParent: true, zTree calls asyncNode on prev_node, causing it to load children.
How can I avoid this behaviour ?

P.S.
Many thanks for great plugin ! )

var zNodes =[
{ name:"父节点1 - 展开", open:true,
children: [
{ name:"父节点11 - 折叠",
children: [
{ name:"叶子节点111"},
{ name:"叶子节点112"},
{ name:"叶子节点113"},
{ name:"叶子节点114"}
]},
当数据是这样的时候（没有写id的时候），addDiyDom只执行一次。

请问

1. ztree加载完成后有对应oninit方法吗?
   2.选中节点方法selectNode,怎么触发这个节点的事件?假设callback beforeClick怎么触发呢,刚接触ztree对API不熟悉.

我有一棵三层的树，第三层为叶节点，因为需要叶节点横向显示，所以我改了下样式：

.ztree {
    ul.level2 {
        padding-bottom: 2px;
        margin-bottom: 3px;
        border-bottom: 1px solid @grid-line;

        li {
            &.level3 {
                display: inline;
                width: 200px;

                .switch {
                    visibility: hidden;
                } 
            }
        }   
    }
}

现在，部分支只有2层，我就不知道该怎么办了。如果叶节点的li可以添加class就好办了，不知道有没有相关方法。

我在用zTree做节点展开合并遇到问题，我的想法是：树的节点查询，效果是先合并树，然后展开查询到节点的父节点。问题是调用查询方法有两种显示结果轮着显示,附上部分代码和界面
function searchNode(){
var value = $.trim($("#key").get(0).value); //查询内容
if (value === "" || value == undefined)
return;
else{
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var root = zTree.getNodeByParam("id",1);

        zTree.expandNode(root,false,true,false,false); //树折叠

        //正则判断

        var nodeList = zTree.getNodesByParamFuzzy("url", value, root);      
        //循环，展开查询节点的父节点
    }

}

Hi, I'm using zTree_v3 in my project.I want to select first node on page load by default.
for that I'm using this code:
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getNodes();
if (nodes.length>0) {
treeObj.selectNode(nodes[0]);
}
but it does not select first node. Please help me to solve this

需要抽空检查如下问题：

1个根节点，下面2个子节点，每个子节点有1000个叶子节点；

页面打开后默认展开根节点，然后第一次check根，这时触发test1和test2组后台加载子节点后，只展开基中一个组，再在根上做check操作就会导致 浏览器假死，等待时间超长..

//-------------------ztree树对象操作模块-----------------------------
    var ztreeobj;//树对象

    //树全局设置
    var setting = {
        view : {
            selectedmulti : false,
            expandSpeed : ""
        },
        async : {
            enable : true,
            url : "buildtreeaction!utree.cgi",
            datatype : "json",
            autoparam : [ "id" ],
            otherparam : {"gid" : '${gid}',"tid" : 1}
        },
        check : {
            enable : true,
            autochecktrigger : true
        },
        callback : {
            oncheck : ztreeoncheck,
            onclick : ztreeonclick,
            onasyncsuccess : ztreeonasyncsuccess
        }
    };

    //点击树节点操作
    function ztreeonclick(event, treeid, clicknode) {

    };

    //用于捕获 勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选 
    function ztreebeforecheck(treeid, treenode) {
        if(treenode.isparent && !treenode.open){
        //  ztreeobj.expandnode(treenode, true, true, true, true);
        }
    };

    //钩选发生时，如果是组节点且目前还未加载子孙节点，则静默加载子孙节点
    function ztreeoncheck(event, treeid, treenode) {
        //如果当前节点为组节点，并且未被打开，说明可能未加载子节点
        if (treenode.isparent && !treenode.open) {
            //如果当前节点被钩选，并且无子节点，则后台加载所有子孙节点，如果已经有子节点说明已加载过了，无需再加载
            if (treenode.checked && null == treenode.children) {
            //  ztreeobj.expandnode(treenode, true, true, true, true);
                ztreeobj.reasyncchildnodes(treenode, null, true);//后台加载子孙节点
            }
        }
    }

    //展开根节点
    var flag = 0;
    function ztreeonasyncsuccess(event, treeid, treenode, msg) {
        if (null != treenode){
            ztreeobj.updatenode(treenode, true);//更新节点状态,同时级联更新子孙节点
        }
    }

    //初始化树
    $(function() {
        ztreeobj = $.fn.ztree.init($("#user_tree"), setting);
    });
    //-----------------------------------------------------------------------------

要实现单个节点的递归展开,demo提供的方法太复杂了,如果本身提供单个节点递归时触发相关事件,则实现起来会简单很多

Hello,

Is there a way to mark a node (parent or leaf) as selected during the initialization step using Async ?

Looking at the documentation, treeView.data.details doesn't have this property.

Because of reAsyncChildNodes is not load when parentNode.isParent = false, don't load nodes. Data actually in server is changed. That node is already parent.

Example:

1. Add node 1
2. Select node 1 click add button then show popup for select something. When close popup, it sends data which are child of node 1 to server.

So node 1 is now parent on server but in client side node 1 is not parent.
When you call reAsyncChildNodes for node 1, it doesn't load nodes for node 1.
Because this condition "parentNode.isParent = false".

Can I force to reAsyncChildNodes by ignore condition like parentNode.isParent = false?

Please advice.

Thanks.

比如我展开、勾选了某些节点，
想在页面刷新后，还能保存这些状态，能做到吗？

Hi,
first, thanks for this library. It's well done and well documented.
I think there is a bug: when I rename a node (from the interface) and then get the tree
(treeObj.getNodes() ) the path of the node and the parent path of all its children are still the old one.
Note: I don't use the dfault idKey and pIdkey:
data:
simpleData:
idKey: "path"
pIdKey: "pPath"
So in my case the fields path and pPath are not changed when the node's name is changed.

Franck.

Nice job with this plugin but I have problem to integrate.
I hope the question was not already asked, but I cannot read Asian language :-)
I understand that all demo are done with JQuery 1.4.4 and no JQueryUI, but that's what I'm using.

My application is using JQuery 1.10.2 and JQuery-ui 1.9.2 but it sounds like JQueryUI is causing problem and un-check is no longer working. To reproduce

• pick demo example excheck/checkbox.html
• comment jquery line
• add just before ztree js files
  script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"
  script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"
• try to check a chekbox , it works
• try to uncheck, it won't uncheck
• now comment JQueryUI 1.9.2 and add latest
  script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"
• uncheck will work again.

Unfortunately I cannot upgrade to JQueryUI 1.10.3 since bunch of other plugins I'm also using, are not yet supported and does not work.
Do you have an idea of what is causing this problem and how to fix it?

Thanks

When I try to implement the single path code, the first level does indeed work just fine. But I am using my own nested JSON object, not the simple data which contains the ID and PID fields. As my structure is used elsewhere in my site it is not practical for me to rebuild it in a simple data form just for this tree. It seems the code you have for single path should work with some small changes for the regular JSON.

I am assuming the problem is here in the beforeExpand function:

var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null

My JSON does not have the parentTId...

Just like addDiyDom but for edit (rename) mode. Here is why it is really important. If one adds into nodes html, ztree (if edit {enabled: true}) will steal internal click events and this input text will have messed up selection functionality.

只是建议哦！

自带例子中的 右键上下文菜单 不是太好看

所以 能否集成其他右键菜单呢 比如：jQuery contextMenu

还有右键点击时 所附的元素信息 应该跟树节点信息一样 不然右键点击后 无法获取当前点击节点的信息

The beforeEditName() callback seems to be fired only when clicked on the edit button but not when calling zTree.editName() to manually edit the node.

When calling removeNode with the "callbackFlag" argument as true, there is an exception.

In fact this is because it uses consts.event.REMOVE as argument to a trigger function, and this constant doesn't exist at all.. to "undefined" is given to trigger and then jquery throw an exception...

When using nameIsHTML, tooltip for node contains html tags.
For example, the custom font sample (custom_font.html) has this problem : when you hover the mouse over view.NameIsHtml, tooltip displays "view.nameIsHTML"

I could not find a way to set the text for the tooltip.

demo中的check示例，如果添加jquery_ui，check的取消勾选没有效果

JQuery zTree excheck v3.5.15-beta.1
jQuery v1.10.2

Checkbox 点击不能取消。

当页面存在iframe时，拖拽会报js错误。
问题原因是
jquery.ztree.exhide-3.5.js文件
_tools.showIfameMask方法中
764行：dragMask.appendTo(body);
为页面iframe添加遮罩层，但是body变量未定义
onMousedownNode 方法中确实有定义body，但是_tools对象必然访问不到，所以报错了。

http://www.ztree.me/v3/api.php
API文档是在线版，还是ajax异步加载，不稳定，貌似下午能访问，上午都不行，打不开页面，求改进多谢～

There is a big that when you double click on the green add new node button the double click event is also sent to the node itself and it closes it, adding another one opens it again

http://www.ztree.me/v3/demo.php#_305 go here and double click on the green button

My bad, it seems not part of the plugin at all!

Hey,
When I removing last children from node with isParent:true attribute, node gets isParent:false automatically. is there way to disable this?

update:

fix after removing node works

if (var folderNode = nodeThatWillBeRemoved.getParentNode()) {
folderNode.isParent = true;
filesTree.updateNode(folderNode);
}
but maybe there is better way exist?

https://github.com/zTree/zTree_v3/blob/master/api/cn/zTreeObj.cancelSelectedNode.html#L29

var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNode();
if (nodes.length>0) { 
    treeObj.cancelSelectedNode(nodes[0]);
}

getSelectedNode应为getSelectedNodes

比如我通过Ajax载入的json数据为J1，这个J1可能同时用在了其他地方，当我对某个节点操作之后，新的数组J2，我也希望其他绑定的地方同步这个J2，但是还没找到有这样的方法。是否能通过一个简单的方法获取到？另外目前能获取到的最简便的途径是什么？

比如我 id 从 2 开始，用 getNodeByTId('2') 获取到的 node 是 下一个 ，很奇怪 !

当对菜单树进行拖动排序后，如果节点的层级发生变化，level值未跟着变更，请修正该问题。
zTree版本： 3.5.12

Im using ztree plugin to show up an organization hireachy details i have a enhancement where i need to show a addDiyDom and addHoverDom both for a node....is it possible to show up like this.Right now to my ztree for a node i have an hover showing up add,remove,rename now i need to show up an icon to the same node as adddiydom.Plz........ help me out ..

var zNodes =[{id:54, pId:35, name:"undo.gif", file:"~\undo.gif"}];

抱歉没有说清楚，应该是这样的

在拖拽Demo 中，初始时节点 随意拖拽 1-2 为一父节点，当把他下面的3个子节点都拖放到其他地方去之后， 随意拖拽 1-2 就不是父节点的样式了，这好比说一个文件夹，当你把他里面的文件移动到别的地方去之后，这个文件夹就变成文件的样子了，这个好像不太合理吧。
另外没有设置 节点层数 的api吗？

如题 在demo页操作发现的问题（http://www.ztree.me/v3/demo.php#_307）：

源于树控件的宽度有限 当层次很深时 某个节点 右侧的操作按钮（add rename remove）三个按钮看不见了 虽然底部有水平滚动条 但无法拉动 （应该是一直显示 可能是overflow css 属性设置问题）

在mac机器下不能按下CTRL多选?
在运行这个演示的时候:
[ 文件路径: core/click.html ]

现在只要是目录都会再前面显示展开和关闭按钮，怎么让空目录不显示展开按钮，而是直接显示连接线呢？

Hi, thanks for your work! I am using zTree in an embeddable Widget that uses lightningjs as a loading framework. Lightningjs loads my code into an iframe so that the code of the page the Widget is embedded in cannot interfere with it (this is a common practice for third party javascript).

Currently, zTree does not support this, because it uses jQuery queries like $("#some-id"). Those queries presuppose that the zTree object can be found in the same window.document into which the zTree library is loaded. If the code is loaded into an iframe this won't work, because the zTree object is in window.parent.document.

Instead you should use queries that are relative to the zTree object. I already tried that for the zTree core and it works: You just have to change the queries into $("#some-id", setting.treeObj.get(0).ownerDocument).

I'm using this amazing plugin in a webpage powered by (bootstrap) and everything works fine, but in a bootstrap modal window ztree has a problem that you can see the blue arrow and the ghost when dragging a node, I already tried z-index="2000" on the css of both items. Has anyone any suggestion??
[http://getbootstrap.com/javascript/#modals]

It would be great to be able to use separate field for sort order inside branch, not id. Please, add this functionality. Everything else is great.

Hello - lovely tree script!

The hiding of nodes works just fine, but I notice in my own example as well as in the 3 examples from your demo - the PLUS sign in the parent node does not change when all of the child nodes are hidden. This is confusing for the user, who will still be clicking on the plus sign, even though there are no children to view.

Thanks again for a great piece of work here.

貌似只在expandNode里面看到有focus参数，用于expand节点后保持父节点在可视区域内。
但是如果是叶子节点就没效果了。
treeNode对象只公开了一些基本属性和方法，我也拿不到对应的dom，没法手动计算滚动。
有什么办法不？谢谢

If a node which is set explicitly isParent:true added to tree, its true copy comes out with .zAsync=false. It is impossible to add other nodes to this node anymore. All addNodes() calls to this node won't be successful as ztree is trying to fetch node's content from a server.

一般连接线都是显示在节点左侧，能否支持连接线只显示在右侧，并且右对齐。类似于一本书的目录。