JS ZTREE 的用法

最新推荐文章于 2019-06-17 21:54:33 发布

陈勇士

最新推荐文章于 2019-06-17 21:54:33 发布

阅读量874

点赞数

分类专栏： Cordys JavaScript

本文链接：https://blog.youkuaiyun.com/chenyongtu110/article/details/47122695

版权

Cordys 同时被 2 个专栏收录

70 篇文章

订阅专栏

JavaScript

19 篇文章

订阅专栏

本文介绍了JS ZTREE的使用方法，特别是如何将选中的树节点连同父节点复制到右树中。同时，讲解了JQuery Extend的功能，通过示例展示了其用于合并settings和options并修改settings的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果图：把选中的树节点带上父节点复制到右树种

知识营养补给

JQuery Extend用法：

示例

描述:

合并 settings 和 options，修改并返回 settings。

jQuery 代码:

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

结果:

settings == { validate: true, limit: 5, name: "bar" }

描述:

方法实现

    /**
     * 得到左树的选中节点的关系节点数组
     * @returns {Array}
     */
    function getLeftTreeNodes(treeNode) {
        var addedNodes = [];

        var _leftNode = {};
		
        _leftNode = $.extend(_leftNode, treeNode);//深复制选中的节点

        while (_leftNode) {
            var tmpNode = {};
            tmpNode['id'] = _leftNode['id'];
            tmpNode['tenant_menu_id'] = _leftNode['tenant_menu_id'];
            tmpNode['pId'] = _leftNode['pId'];
            tmpNode['isParent'] = true;
            tmpNode['name'] = _leftNode['name'];
            tmpNode['open'] = false;
            addedNodes.push(tmpNode);
            _leftNode = leftTree.getNodeByTId(_leftNode['parentTId']);
        }
        return addedNodes;
    }

    /**
     * 与右树比较，返回差异节点数组
     * @param arr 左树关系节点数组
     */
    function getDiffTreeNodes(arr) {
        var rightTreeNodes = rightTree.transformToArray(rightTree.getNodes());
        var resultArr = [];
        arr.forEach(function (_leftNode) {
            var _flag = true;
            rightTreeNodes.forEach(function (_rightNode) {
                if (_leftNode['id'] === _rightNode['id']) {
                    _flag = false;
                }
            });
            if (_flag)
                resultArr.push(_leftNode);
        });
        return resultArr;
    }

在线演示 Splice用法：

<html>
<body>

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,1)//第三节点开始的 一个值
document.write(arr)

</script>

</body>
</html>

/**
 * 点击节点的事件，把左树节点以及相关节点添加到右树中
 * @param e
 * @param treeId
 * @param treeNode 被点击的节点
 */
function treeClick(e, treeId, treeNode) {
    console.log(e, treeId, treeNode);

    var rightTree = $.fn.zTree.getZTreeObj("owenTree");
    var leftTree = $.fn.zTree.getZTreeObj('treeDemo');
    var addedNodes = getDiffTreeNodes(getLeftTreeNodes(treeNode));

    while (addedNodes.length)
        addedNodes.forEach(function (_diffNode, _diffArrIndex) {
            var rightTreeNodes = rightTree.transformToArray(rightTree.getNodes());

            rightTreeNodes.forEach(function (_rightNode) {
                if (_diffNode['pId']) {
                    if (_diffNode['pId'] === _rightNode['id']) {
                        rightTree.addNodes(rightTree.getNodeByTId(_rightNode['tId']), _diffNode);
                        addedNodes.splice(_diffArrIndex, 1);
                    }
                }
            });

            if (!_diffNode['pId']) {
                rightTree.addNodes(null, _diffNode);
                addedNodes.splice(_diffArrIndex, 1);
            }
        });

    rightTree.expandAll(true);

var setting = {
    check: {
        enable: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onClick: treeClick
    }
};

//查询本租户下所有菜单
function getAllMenus() {
    $.cordys.utils.sendCordysAjax({
        method: "GetMenusByTenant",
        namespace: "http://com.unicom.bopm/organization",
        parameters: {
            tenant_dn: window.globalParam.role['TENANT_DN']
        }
    }).done(function (result) {
        var zNodes = [];

        result = $.cordys.utils.formatCordysAjaxQueryEntity(result);
        if (result.length) {
            $.each(result, function (n, value) {
                var node = {};
                node.id = value['MENU_ID'];
                node.name = value['MENU_NAME'];
                node.pId = value['PARENT_ID'];
                node.open = false;
                node.isParent = true;
                node.tenant_menu_id = value['TENANT_MENU_ID'];
                zNodes.push(node);
            });
        } else {
            alert('没有在本租户下找到菜单');
        }

        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    }).fail(function (err) {
        alert('发送服务器请求失败！');
        console.log(err);
    });
}

//ztree设置
var setting2 = {
    edit: {
        enable: true,
        showRemoveBtn: true,
        removeTitle: '移除'
    },
    data: {
        simpleData: {
            enable: true
        }
    }
};


//通过角色id，查询本租户下，本角色拥有的菜单
function getOwnMenus(role_id) {
    role_id = role_id ? role_id : $.cordys.utils.getUrlParameter("id");
    $.cordys.utils.sendCordysAjax({
        method: "GetAllMenusByRoleId",
        namespace: "http://com.unicom.bopm/organization",
        parameters: {
            roleId: role_id
        }
    }).done(function (result) {
        result = $.cordys.utils.formatCordysAjaxQueryEntity(result);
        if (result.length) {
            var zNodes = [];
            $.each(result, function (index, value) {
                var node = {};
                node.id = value['MENU_ID'];
                node.name = value['MENU_NAME'];
                node.pId = value['PARENT_ID'];
                node.tenant_menu_id = value['TENANT_MENU_ID'];
                node.open = false;
                node.isParent = true;
                zNodes.push(node);
            });
        } else {
            alert("角色尚未分配菜单，请分配");
        }
        $.fn.zTree.init($("#owenTree"), setting2, zNodes);
        $.fn.zTree.getZTreeObj("owenTree").expandAll(true);
    }).fail(function (err) {
        alert("查询角色菜单失败，请重试。");
        console.log(err);
    });
}

HTML 代码

<script src="../common/ztree/js/jquery.ztree.core-3.5.js"></script>
<script src="../common/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<script src="../common/ztree/js/jquery.ztree.exedit-3.5.js"></script>

<div class="fixed-table-container">
	<div class="span-half-left">
		<label>可分配的菜单：</label>
		<ul id="treeDemo" class="ztree" style="height: 400px;"></ul>
	</div>
	<div class="span-half-right">
		<label>已拥有的菜单：</label>
		<ul id="owenTree" class="ztree" style="height: 400px;"></ul>
	</div>
</div>