zTree 插件 - 获取当前选择节点下的全部子节点

最新推荐文章于 2022-05-12 13:35:40 发布

原创最新推荐文章于 2022-05-12 13:35:40 发布 · 1.6w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ztree #节点 #所有子节点

前端领域专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用zTree插件通过点击事件获取当前选择节点及其所有子节点的ID，包括初始化设置及点击响应事件的实现。

文章目录

zTree 插件 - 获取当前选择节点下的全部子节点id
- - - - 1、创建初始化设置
      - 2、创建点击响应事件

zTree 插件 - 获取当前选择节点下的全部子节点id

1、创建初始化设置

var setting = {
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onClick: treenodeClick
    }
};

2、创建点击响应事件

function treenodeClick(event, treeId, treeNode, clickFlag) {
    //此处treeNode 为当前节点
     var str ='' ;
     str = getAllChildrenNodes(treeNode,str);
     // 加上被选择节点自己
     str = str + ',' + treeNode.id;
     // 去掉最前面的逗号
     var ids = str.substring(1, str.length);
     // 得到所有节点ID 的数组
     var idsArray = ids.split(',');
     // 得到节点总数量
     var length = idsArray.length;

     // 做业务操作
}
 
// 递归，获取所有子节点
function getAllChildrenNodes(treeNode,result){
      if (treeNode.isParent) {
        var childrenNodes = treeNode.children;
        if (childrenNodes) {
            for (var i = 0; i < childrenNodes.length; i++) {
                result += ',' + childrenNodes[i].id;
                result = getChildNodes(childrenNodes[i], result);
            }
        }
    }
    return result;
}