JQuery Tree插件——zTree v3.5.12 版 发布

    为了学习如何在 jQuery Plugin 发布，反复练习后（因为那个版本号只能升，不能降），这次只得把版本 从 v3.5.02 直接升到 v3.5.12 了，请见谅。

 

    jQuery Plugin：http://plugins.jquery.com/zTree.v3/

    GitHub：https://github.com/zTree/zTree_v3

 

    为了避免老用户升级时修改 css 的麻烦，所以这次升级的目标还是还是尽量之修改 js 的 bug ，不去修改 css 文件；因此这次升级无法彻底解决 zTree 与 WordPress 同时使用时的样式冲突问题，只是一旦遇到冲突可以比较方便的修改而已（详细请看：https://github.com/zTree/zTree_v3/issues/2）。

 

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

 

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

 

    下面是 v3.5.12 的修改记录：

 

   * 【修改】由于 jquery 1.9 中移除 event.srcElement 导致的 js 报错的bug。

   * 【修改】在异步加载模式下，使用 moveNode 方法，且 moveType != "inner" 时，也会导致 targetNode 自动加载子节点的 bug

   * 【修改】对已经显示的节点(nochecked=true)使用 showNodes 或 showNode 方法后，导致勾选框出现的bug。

   * 【修改】对已经隐藏的节点(nochecked=false)使用 hideNodes 或 hideNode 方法后，导致勾选框消失的bug。

   * 【修改】getNodesByParamFuzzy 支持 大小写模糊。

   * 【修改】className 结构，提取 _consts.className.BUTTON / LEVEL / ICO_LOADING / SWITCH，便于快速修改 css 冲突。

     例如：与 WordPress 产生冲突后，直接修改 core 中的 "button" 和 "level" 即可。  Issue: https://github.com/zTree/zTree_v3/issues/2

 

评论

18 楼 batwayne 2013-03-28  

zTreeAPI 写道

batwayne 写道

请教一个问题，今天一下午都没弄好。树t1，把里面符合条件的叶子节点加到空树t2里面，被加进去的叶子节点的父节点也需要加入新树t2里面。可是当我把父节点加进去以后，树t1中父节点下的所有叶节点都跟着进到新树t2里面了，怎么解决这个问题呢？

因为父节点的数据中 有  children 属性，这里面包含着全部的子孙节点数据。。看你的需求也是需要那些 叶子节点的。。。所以你只需要做的是。。直接把 父节点 的数据深度 clone 出来，然后 把你要复制的这个子节点 的相邻节点全部删除掉，就 OK 了。 （建议你看看 zTree 的 clone 方法，拿出来改造一下，在深度复制的过程中就可以实现 过滤相邻节点的功能了）

折腾了很久，ztree的node的clone函数还是没写出来，没有实现clone功能，请指教

17 楼 zTreeAPI 2013-03-28  

batwayne 写道

请教一个问题，今天一下午都没弄好。树t1，把里面符合条件的叶子节点加到空树t2里面，被加进去的叶子节点的父节点也需要加入新树t2里面。可是当我把父节点加进去以后，树t1中父节点下的所有叶节点都跟着进到新树t2里面了，怎么解决这个问题呢？

因为父节点的数据中 有  children 属性，这里面包含着全部的子孙节点数据。。看你的需求也是需要那些 叶子节点的。。。所以你只需要做的是。。直接把 父节点 的数据深度 clone 出来，然后 把你要复制的这个子节点 的相邻节点全部删除掉，就 OK 了。 （建议你看看 zTree 的 clone 方法，拿出来改造一下，在深度复制的过程中就可以实现 过滤相邻节点的功能了）

16 楼 batwayne 2013-03-27  

请教一个问题，今天一下午都没弄好。树t1，把里面符合条件的叶子节点加到空树t2里面，被加进去的叶子节点的父节点也需要加入新树t2里面。可是当我把父节点加进去以后，树t1中父节点下的所有叶节点都跟着进到新树t2里面了，怎么解决这个问题呢？

15 楼 wjc_3306 2013-03-20  

zTreeAPI 写道

wjc_3306 写道

wjc_3306 写道

zTreeAPI 写道

wjc_3306 写道

请问要构建一颗同步树，怎么请求url呢
如果开启了异步加载，展开无子节点父节点的时候会重新请求数据。
那这样就有问题了，因为不需要让他重新请求.该怎么做

你用的是什么版本的zTree ，默认异步加载模式下， 即使无子节点也不会每次展开都重新请求数据的。

对，不会每次请求，但第一次请求也不要，
因为数据是一次性全部返回的，我只想让此树加载一次 我用的最新版本的

谢谢回答，我的需求是，url在ztree初始化的时候配置，但只会请求一次，请求回来的数据不管父节点有没数据都不再发请求了，请问这样可以实现吗

这样呀，那你直接利用 onAsyncSuccess 回调在第一次 ajax 请求之后设置 treeObj.setting.async.enable = false 就可以了，还算 so easy 吧  

恩恩。多谢

14 楼 zTreeAPI 2013-03-20  

wjc_3306 写道

wjc_3306 写道

zTreeAPI 写道

wjc_3306 写道

请问要构建一颗同步树，怎么请求url呢
如果开启了异步加载，展开无子节点父节点的时候会重新请求数据。
那这样就有问题了，因为不需要让他重新请求.该怎么做

你用的是什么版本的zTree ，默认异步加载模式下， 即使无子节点也不会每次展开都重新请求数据的。

对，不会每次请求，但第一次请求也不要，
因为数据是一次性全部返回的，我只想让此树加载一次 我用的最新版本的

谢谢回答，我的需求是，url在ztree初始化的时候配置，但只会请求一次，请求回来的数据不管父节点有没数据都不再发请求了，请问这样可以实现吗

这样呀，那你直接利用 onAsyncSuccess 回调在第一次 ajax 请求之后设置 treeObj.setting.async.enable = false 就可以了，还算 so easy 吧  

13 楼 wjc_3306 2013-03-20  

wjc_3306 写道

zTreeAPI 写道

wjc_3306 写道

请问要构建一颗同步树，怎么请求url呢
如果开启了异步加载，展开无子节点父节点的时候会重新请求数据。
那这样就有问题了，因为不需要让他重新请求.该怎么做

你用的是什么版本的zTree ，默认异步加载模式下， 即使无子节点也不会每次展开都重新请求数据的。

对，不会每次请求，但第一次请求也不要，
因为数据是一次性全部返回的，我只想让此树加载一次 我用的最新版本的

谢谢回答，我的需求是，url在ztree初始化的时候配置，但只会请求一次，请求回来的数据不管父节点有没数据都不再发请求了，请问这样可以实现吗

12 楼 wjc_3306 2013-03-20  

zTreeAPI 写道

wjc_3306 写道

请问要构建一颗同步树，怎么请求url呢
如果开启了异步加载，展开无子节点父节点的时候会重新请求数据。
那这样就有问题了，因为不需要让他重新请求.该怎么做

你用的是什么版本的zTree ，默认异步加载模式下， 即使无子节点也不会每次展开都重新请求数据的。

对，不会每次请求，但第一次请求也不要，
因为数据是一次性全部返回的，我只想让此树加载一次 我用的最新版本的

11 楼 zTreeAPI 2013-03-19  

wjc_3306 写道

请问要构建一颗同步树，怎么请求url呢
如果开启了异步加载，展开无子节点父节点的时候会重新请求数据。
那这样就有问题了，因为不需要让他重新请求.该怎么做

你用的是什么版本的zTree ，默认异步加载模式下， 即使无子节点也不会每次展开都重新请求数据的。

10 楼 wjc_3306 2013-03-19  

请问要构建一颗同步树，怎么请求url呢
如果开启了异步加载，展开无子节点父节点的时候会重新请求数据。
那这样就有问题了，因为不需要让他重新请求.该怎么做

9 楼 zTreeAPI 2013-03-18  

vavala 写道

treeNode.reAsyncChildNodes(treeNode.getParentNode(),"refresh");
无法刷新父节点下的子节点
场景：在node1下新增一个节点node2，node2的id为默认的101，第一次编辑node2后，我希望node2的id为我数据库中的id，所以我希望编辑之后就刷新这个节点，我调用reAsyncChildNodes却无法实现

1. 请先确认你的 treeNode.getParentNode() 得到的是否正确
2. 其实在你 ajax 通知后台保存后，就应该可以利用 ajax 得到新生成的id ，然后直接修改节点数据的 id 属性即可。

8 楼 vavala 2013-03-18  

treeNode.reAsyncChildNodes(treeNode.getParentNode(),"refresh");
无法刷新父节点下的子节点
场景：在node1下新增一个节点node2，node2的id为默认的101，第一次编辑node2后，我希望node2的id为我数据库中的id，所以我希望编辑之后就刷新这个节点，我调用reAsyncChildNodes却无法实现

7 楼 zTreeAPI 2013-03-17  

vavala 写道

ztree添加一个节点的时候，为什么不直接出现一个输入框，却要new一个node出来，再去修改呢？感觉这里可以改进呀，要是改了就好了

不是每个需求都要这样的呀，但是你结合 addNodes 和 editName 两个方法一起用就可以轻松实现了， 请看Demo：http://www.ztree.me/v3/demo.php#_306

6 楼 vavala 2013-03-17  

ztree添加一个节点的时候，为什么不直接出现一个输入框，却要new一个node出来，再去修改呢？感觉这里可以改进呀，要是改了就好了

5 楼 zTreeAPI 2013-03-15  

mitudelang 写道

zTree.setEditable("false");这个方法好像不起作用哦。我弄了几次不成功

请用 true 和 false 这种 boolean 的对象，这个不支持 string 格式的

4 楼 mitudelang 2013-03-15  

zTree.setEditable("false");这个方法好像不起作用哦。我弄了几次不成功

3 楼 archy123 2013-03-13  

zTreeAPI 写道

archy123 写道

反馈一个可能的bug，因为不能确定是bug，还是我的使用有问题，按照demo例子进行修改做的。此问题在3.x系列中都存在，3.5.12 没有测试。
当点击父节点时(不是checkbox框，点击checkbox框无此问题)，父节点被选中，但是子节点全部为未选中状态。
当点击子节点时，子节点被选中，父节点checkbox只是变灰，但是没有对钩出现。
同样如果点击的是checkbox框则没有此问题。
...

万幸。。。不是bug   你在 onClick 中使用了 checkNode 这个方法，请注意该方法的第三个参数， 在 API 中 的说明：checkTypeFlag， 就是用于控制是否使用父子关联的，结果你设置成 null .....

  太尴尬了。。多谢！

2 楼 zTreeAPI 2013-03-13  

archy123 写道

反馈一个可能的bug，因为不能确定是bug，还是我的使用有问题，按照demo例子进行修改做的。此问题在3.x系列中都存在，3.5.12 没有测试。
当点击父节点时(不是checkbox框，点击checkbox框无此问题)，父节点被选中，但是子节点全部为未选中状态。
当点击子节点时，子节点被选中，父节点checkbox只是变灰，但是没有对钩出现。
同样如果点击的是checkbox框则没有此问题。
...

万幸。。。不是bug   你在 onClick 中使用了 checkNode 这个方法，请注意该方法的第三个参数， 在 API 中 的说明：checkTypeFlag， 就是用于控制是否使用父子关联的，结果你设置成 null .....

1 楼 archy123 2013-03-13  

反馈一个可能的bug，因为不能确定是bug，还是我的使用有问题，按照demo例子进行修改做的。此问题在3.x系列中都存在，3.5.12 没有测试。
当点击父节点时(不是checkbox框，点击checkbox框无此问题)，父节点被选中，但是子节点全部为未选中状态。
当点击子节点时，子节点被选中，父节点checkbox只是变灰，但是没有对钩出现。
同样如果点击的是checkbox框则没有此问题。

图片：
http://pan.baidu.com/share/link?shareid=303391&uk=3188700754

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.all-3.5.min.js"></script>
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

    <style type="text/css">
        div.zTreeDemoBackground {
            width: 250px;
            height: 20px;
            text-align: left;
        }

        ul.ztree {
            margin-top: 10px;
            border: 1px solid #617775;
            background: #f0f6e4;
            width: 220px;
            height: 20px;
            overflow-y: scroll;
            overflow-x: auto;
        }
    </style>
    <script type="text/javascript">

        var setting = {
            check: {
                enable: true,
                chkboxType: {"Y": "ps", "N": "ps"}
            },
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick,
                onCheck: onCheck
            }
        };
        var elementId = "";
        var contentId = "";
        var outId = "";
        var valueElementId = "";

        function beforeClick(treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj(treeId);
            zTree.checkNode(treeNode, !treeNode.checked, null, true);
            return false;
        }

        function onCheck(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj(treeId),
                    nodes = zTree.getCheckedNodes(true),
                    v = "";
            var vn = "";
            for (var i = 0, l = nodes.length; i < l; i++) {
                if (!isNaN(nodes[i].id)) {
                    v += nodes[i].id + ",";
                    vn += nodes[i].name + ",";
                }
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            if (vn.length > 0) vn = vn.substring(0, vn.length - 1);
            var resoObj = $("#" + elementId);
            var valueObj = $("#" + valueElementId);
            resoObj.attr("value", vn);
            valueObj.attr("value", v);
        }
        /**
         * 调用下拉树菜单
         * @param contentId 内容Id
         * @param elementId 使用树下拉的元素Id
         * @param outId     树外层的Id
         * @param valueElementId
         */
        function showMenu(contentId, elementId, valueElementId, outId) {
            this.elementId = elementId;
            this.contentId = contentId;
            this.valueElementId = valueElementId;
            this.outId = outId;
            var elenmentOBJ = document.getElementById(elementId);
            var outOBJ = document.getElementById(outId);
            var j_elenment = eval(this.GetAbsoluteLocation(elenmentOBJ));
            var j_out = eval(this.GetAbsoluteLocation(outOBJ));

            $("#" + contentId).css({left: j_elenment.absoluteLeft - j_out.absoluteLeft + "px", top: j_elenment.absoluteTop - j_out.absoluteTop + 50 + "px" }).slideDown("fast");

            $("body").bind("mousedown", onBodyDown);
        }
        function hideMenu(contentId) {
            $("#" + contentId).fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
        function onBodyDown(event) {
            if (!( event.target.id == elementId || event.target.id == contentId || $(event.target).parents("#" + contentId).length > 0)) {
                hideMenu(contentId);
            }
        }

        function GetAbsoluteLocation(element) {
            if (arguments.length != 1 || element == null) {
                return null;
            }
            var offsetTop = element.offsetTop;
            var offsetLeft = element.offsetLeft;
            var offsetWidth = element.offsetWidth;
            var offsetHeight = element.offsetHeight;
            while (element = element.offsetParent) {
                offsetTop += element.offsetTop;
                offsetLeft += element.offsetLeft;
            }
            return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
                offsetWidth: offsetWidth, offsetHeight: offsetHeight };
        }

        var zNodes = [
            {"checked": false, "children": [
                {"checked": false, "id": "62431190000", "name": "aaa", "nocheck": false, "open": false},
                {"checked": false, "id": "62431162111", "name": "bbb", "nocheck": false, "open": false},
                {"checked": false, "id": "62431169788", "name": "ccc", "nocheck": false, "open": false},
                {"checked": false, "id": "62723218811", "name": "ddd", "nocheck": false, "open": false},
                {"checked": false, "id": "62773311988", "name": "eee", "nocheck": false, "open": false},
                {"checked": false, "id": "62532016588", "name": "fff", "nocheck": false, "open": false},
                {"checked": false, "id": "62431131835", "name": "ggg", "nocheck": false, "open": false},
                {"checked": false, "id": "62431625293", "name": "hhh", "nocheck": false, "open": false},
                {"checked": false, "id": "62503213411", "name": "iii", "nocheck": false, "open": false},
                {"checked": false, "id": "62431169820", "name": "lll", "nocheck": false, "open": false}
            ], "name": "123", "nocheck": false, "open": false},
            {"checked": false, "children": [
                {"checked": false, "id": "62403112669", "name": "zzz ", "nocheck": false, "open": false},
                {"checked": false, "id": "62930696287", "name": "xxx", "nocheck": false, "open": false},
                {"checked": false, "id": "62627739777", "name": "vvv", "nocheck": false, "open": false},
                {"checked": false, "id": "62832109298", "name": "mmm", "nocheck": false, "open": false}
            ], "name": "222", "nocheck": false, "open": false}
        ];

        $(document).ready(function () {
            $.fn.zTree.init($("#userTree"), setting, zNodes);

        });
    </script>
</head>
<body>

<div id="add">
    <form method="post" id="addForm">

        <table>
            <tr>
                <td>
                    <div class="zTreeDemoBackground left" style="padding-left: 5px;">

                        <label>接收人：<input type="text" name="userNames" id="uTree"
                                          onclick="showMenu('menuContent','uTree','uValue','add');"/>
                        </label>
                    </div>
                </td>
            </tr>

            <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
                <ul id="userTree" class="ztree" style="margin-top:0; width:150px; height: 200px;">

                </ul>
            </div>

        </table>

    </form>
</div>
</body>
</html>