前端控件组织树tree算法剖析

说明：基于jq

特别强调：

数组包含对象时，用数组中的对象给一个对象或变量赋值，只是给将数组对应的指针地址赋给对应的对象或者变量。因此修改这个对象或者变量，就会修改对应的数组值。

1、循环渲染元素结构

 数据结构如下所示：

list:[

        {

            label:'贵州省',

            children:[

                {

                    label:'贵阳市',

                    children:[

                     ....

                    ]

                }

          ]        

     }

]

算法实现：

let menu = "";

    function func (data){

        $.each(data,function(i,list){

            if(list.children && list.children.length != 0){

                menu += "<ul>";

                menu += "<li><span>"+list.label+"</span>";

                func(list.children);

                menu += "</li>";

                menu += "</ul>"

            }else{

                menu += "<ul><li><span>"+list.label+"</span></li></ul>";

            }

         })

    }

    func(treeArr);

最后将menu字符串写入对应的元素。

 

2、将如下数据结构转成所需渲染的组织树数据结构算法