js递归树

本文介绍了一位开发者如何通过JavaScript实现递归遍历ZTree中的节点,将同一层级的节点信息存储到相应数组下标,以此简化获取特定层级节点的操作。

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

今天有个同事,问了一个关于ztree的问题, 怎么找到树的最后一个节点。闲着有空,自己按着思路写了一个存放树节点信息的程序,把对应层的节点信息放到对应的数组下标中。

        var tree = 
            {
                "name": "Root",
                "childrens" : [
                    {
                        "name" : "node1",
                        "childrens": [{
                            "name" : "node2",
                            "childrens" :[{
                                "name" : "node3"
                            }]
                        },{
                            "name": "node4"
                        }]
                    },{
                        "name" : "node5"
                    }
                ]
            }
        ;

        var indexData = []; //存储树节点信息, 对应的层放对应的节点信息

        //过滤childrens节点的信息
        var filter = function(source){
            var destince = new Object();
            for(var key in source){
                if(key == "childrens") continue;
                destince[key] = source[key];
            }
            return destince;
        }


        var writeTreeData = function(node){
            for(var i = 0; i<node.childrens.length; i++){
                var childNode = node["childrens"][i];
                childNode.index = node.index + 1;
                if(indexData[childNode.index] == undefined){
                    indexData[childNode.index] = new Array();
                }
                indexData[childNode.index].push(filter(childNode));
                if(childNode.childrens && childNode.childrens.length > 0){
                    getTreeData(childNode);
                }
            }
        }
        tree.index = 0;
        //存放第1个节点的信息
        indexData[tree.index] = [filter(tree)];

        writeTreeData(tree);

        console.info(indexData);

这样,找对应层数的树节点信息就更加方便了。^-^~

var myTree = null; function CreateTree() { myTree = new ECOTree('myTree','myTreeContainer'); myTree.config.colorStyle = ECOTree.CS_LEVEL; myTree.config.nodeFill = ECOTree.NF_FLAT; myTree.config.selectMode = ECOTree.SL_NONE; //是否允许给节点加链接,是否允许给节点加图片 myTree.config.useTarget = false; myTree.config.useImg = true;   //设置节点的大小和间隔 myTree.config.defaultNodeWidth = 95; myTree.config.defaultNodeHeight = 140; myTree.config.iSubtreeSeparation = 50; myTree.config.iSiblingSeparation = 15; myTree.config.iLevelSeparation = 30; //此处通过从数据库或其它地方读取节点信息,生成添加节点的代码 //参数前三位是必须的; //第一位是本节点id,第二位是父节点id、根节点的父节点为-1,第三位为节点文本; //第四位为节点上显示的图片/照片、图片放到img下并在数据库中记录名称即可,未设参数则取默认图片; //第五位为超链接、最好是访问统一程序传入本节点id; //第六、七位为节点的个性化宽、高。 myTree.add('01',-1,'总裁','./img/0.jpg','http://www.jq-school.com'); myTree.add('02','01','技术副总裁','./img/1.jpg'); myTree.add('03','01','总裁助理','./img/2.jpg','http://www.jq-school.com',95,130); myTree.add('04','01','分公司','./img/3.jpg','http://www.jq-school.com',95,130); myTree.add('0201','02','技术经理','./img/4.jpg','http://www.jq-school.com',95,130); myTree.add('0202','02','技术员','./img/5.jpg','http://www.jq-school.com',95,130); myTree.add('0301','03','秘书','./img/5.jpg','http://www.jq-school.com',95,130); myTree.add('0302','03','助理','./img/6.jpg','http://www.jq-school.com',95,130); myTree.add('0401','04','总经理','./img/6.jpg','http://www.jq-school.com',95,130); myTree.add('0402','04','财务','./img/7.jpg','http://www.jq-school.com',95,130); myTree.UpdateTree(); } 包含有例子和源码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值