js展开一颗树

Tree View 指令不支持树结构数据源,只支持单层数组。(也许是我没发现,人家可以设置)。我只能把树展开,变成单层数组。然后还要记录已经递归到第一层了。比如这样。

<!doctype html>

<html lang="en-US">

<head>

   <meta charset="UTF-8">

   <title></title>

</head>

<body>

<scripttype="text/javascript">

   var self = this;

   self.list =  [

       {

           "id": 1,

           "title": "node1",

           "children": [

                {

                    "id": 11,

                    "title":"node1.1",

                    "children": [

                        {

                            "id": 111,

                            "title":"node1.1.1"

                        }

                    ]

                },

                {

                    "id": 12,

                    "title":"node1.2",

                    "children": []

                }

           ]

       },

       {

           "id": 2,

           "title": "node2",

           "nodrop": true,

           "children": [

                {

                    "id": 21,

                    "title": "node2.1",

                    "children": []

                },

                {

                    "id": 22,

                    "title":"node2.2",

                    "children": []

                }

           ]

       },

       {

            "id": 3,

           "title": "node3",

           "children": [

                {

                    "id": 31,

                    "title":"node3.1",

                    "children": []

                }

           ]

       }

   ];

   function flatten (arr,level){

       var result = [],

                recursion = function(arr,level) {

                    arr.level = arr.level ||level || 0;

                    //这里用了个巧妙的方法,记录该数组的level。有就用它自己的,没有就判断是不是别人给它的,别人给的一般代表自己是子树。然后给的时候 +1

                    arr.forEach(function (item){

                        item.$$treeLevel =  arr.level;

                        result.push(item);

                        item.children&& recursion(item.children,arr.level + 1);

                    });

                    delete arr.level;

                };

       recursion(arr);

       return result;

   };

   self.arr = flatten(self.list);

   console.log(self.arr);

</script>

</body>

</html>


资料领取群598399936


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值