关于jquery ztree 的使用

最新推荐文章于 2021-08-05 16:43:32 发布

lxysoid

最新推荐文章于 2021-08-05 16:43:32 发布

阅读量310

点赞数

分类专栏： jquery 文章标签： jquery-ztr jquery

本文链接：https://blog.youkuaiyun.com/lxysoid/article/details/78936936

版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

由于在项目中需要使用展示树，但又得要支持IE8的插件，所以使用jquery ztree

自己在项目中的使用参照部分文档以及优快云中的部分博主

写此博文除了记一下自己的操作过程方便自己日后的使用

还主要为了同样使用此插件的各位提供方便

首先在优快云中的博主找到了一个ztree的压缩包

<script type="text/javascript" src="~/Content/Base/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="~/Content/Base/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="~/Content/Base/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="~/Content/Base/ztree/js/jquery.ztree.exedit-3.5.js"></script>

原文件里是引用的就query1.4的版本，我因为项目需要把版本改为1.8.应当差别不大，可以适应各版本的jquery

jquery ztree下载的压缩包里面包括了文档以及示例文件，可参照上面的代码去修改，

看了文档以及示例代码还是能够了解大部分的东西

var setting = {
            async: {
                enable: true,
                url: "/Apply/getListShu",//此路径是我动态抓取数据的路径
                autoParam: ["id", "name=n", "level=lv"],
                otherParam: { "otherParam": "zTreeAsyncTest" },
                dataFilter: filter
            },
            view: {
                removeHoverDom: removeHoverDom,
                fontCss: { 'font-family': '微软雅黑' },//控制节点的样式，后续在文件内部修改了，此参数便没有使用
                selectedMulti: true
            },
            edit: {
                enable: true,
                showLine: false,
                showRemoveBtn: showRemoveBtn
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: zTreeOnClick,//点击节点调用的函数
                beforeDrag: beforeDrag,
                beforeRemove: beforeRemove
            }
        };
        setting.edit.showRemoveBtn = false;
        setting.edit.showRenameBtn = false;

由于项目变改比较频繁，所以导致代码有部分东西写的比较冗余，后期才去处理，又部分引用若不清楚可查询文档

<div style="width:25%; float:left;" class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>

$(document).ready(function () {
            //$.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $.fn.zTree.init($("#treeDemo"), setting);
            setEdit();
            $("#remove").bind("change", setEdit);
            $("#removeTitle").bind("propertychange", setEdit).bind("input", setEdit);
        });

这部分是js最后的结尾，是调用tree最重点的地方，部分函数其实大部分都没有需要到。
最主要是 $.fn.zTree.init($ (“#treeDemo”), setting);对盒子渲染树

var log, className = "dark";
        function beforeDrag(treeId, treeNodes) {
            return false;
        };

        function beforeRemove(treeId, treeNode) {
            className = (className === "dark" ? "" : "dark");
            showLog("[ " + getTime() + " beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
        };

        function setEdit() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            remove = $("#remove").attr("checked"),
            removeTitle = $.trim($("#removeTitle").get(0).value);
            zTree.setting.edit.showRemoveBtn = remove;
            zTree.setting.edit.removeTitle = removeTitle;
            showCode(['setting.edit.showRemoveBtn = ' + remove, 'setting.edit.removeTitle = "' + removeTitle + '"']);
            //删除节点后应该进后台在数据库中删除该节点，并返回
        };
        function showCode(str) {
            var code = $("#code");
            code.empty();
            for (var i = 0, l = str.length; i < l; i++) {
                code.append("<li>" + str[i] + "</li>");
            }
        };

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
                return false;
            });
            //添加后执行后台的操作，将添加的节点传回后台保存到数据库
        };

        function showLog(str) {
            if (!log) log = $("#log");
            log.append("<li class='" + className + "'>" + str + "</li>");
            if (log.children("li").length > 8) {
                log.get(0).removeChild(log.children("li")[0]);
            }
        };

        function getTime() {
            var now = new Date(),
            h = now.getHours(),
            m = now.getMinutes(),
            s = now.getSeconds(),
            ms = now.getMilliseconds();
            return (h + ":" + m + ":" + s + " " + ms);
        };
        //指定第一个节点不可被删除
        function showRemoveBtn(treeId, treeNode) {
            return !treeNode.isFirstNode;
        };

这部分是我在初始化的地方有调用到的地方，可供大家参考，但其实大部分文档或者示例都是有

可直接看文档及示例会比较清晰

由于项目中需要记录点击的节点，添加节点后，必须根据各种不同情况放在不同的地方，

并且需要记录点击的节点名到新创建的节点过去，所以主要记录下自己使用的方法

点击节点时最终拿取所点击节点的信息

var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = zTree.getSelectedNodes(),
            treeNode = nodes[0];

ztree就是读取你该div下的树，nodes为你所点击的节点的集合

需要主要的时，除非你开启了多选节点的属性，不然nodes只能返回一个你所点击的节点

treeNode = zTree.addNodes(parntNode, { id: (100 + Math.round(Math.random() * 1000)), pId: pidData, isParent: false, name: cAEName, value: "CAE", CAEObject: CAEObjectList });

此方法是向树添加节点，id和pid为树节点最重要的参数，
后续的name和value、CAEObject是我自己加上去的，jquery ztree的活用性在于添加节点时，给该节点的属性参数没有限制，可由自己添加，只要名字不与文档已存在的参数重复即可。

parntNode为添加的节点的父节点，假若pid填写不正确，为自动获取父节点的id为你的pid

所以当你的节点需要添加在哪个节点下，需要找出正确的父节点

var parntNode = treeNode.getParentNode();

此方法是通过子节点可拿到父节点

由于使用每个人的不同需求，需要更改代码，这是我在使用过程的一个记录