angularJS -tree树 解析

功能目标展示:

存在的功能:
树状展示信息,多级
点击左侧树右侧显示不同的内容
HTML部分:

					<treecontrol class="tree-material"
								 tree-model="fwggTreedata"
								 options="treeOpts"
								 filter-expression="searchTreeNode"
								 expanded-nodes="expandedNodes"
								 on-selection="treeSelected(node,selected)" >
								 />{{node.label}}
					</treecontrol>

tree-model=“fwggTreedata” : 绑定的数组数据, 显示的内容都在这个数组里面;
options=“treeOpts” : 显示数的配置 ,nodeChildren：每个孩子节点的属性名，默认是” children”。
filter-expression=“searchTreeNode”: 过滤器 (可搜索要在树上展示的内容)
expanded-nodes=“expandedNodes”: 控制节点的开和关
on-selection=“treeSelected(node,selected)” :选中节点进行控制

JS

//fwggTreedata数据 (逐级属性相同 children是默认子级)
$scope.fwggTreedata=[{
        pid: 1,
        label: "家乡菜",
        expanded: true,//控制节点打开
        children: [
            {
                pid: 2,
                label: "家乡菜",
                expanded: true,//控制节点打开
                children: [] //后台数据接收给赋值给它
            },
            {
                pid: 3,
                label: "四川菜",
                expanded: true,//控制节点打开
                children: []
            }]
    }];
    //treeOptions 配置
     $scope.treeOpts = {
                nodeChildren: "children",//决定子级是哪个属性
                dirSelectable: true,//节点的开和关
                injectClasses: {
                    ul: "a1",
                    li: "a2",
                    liSelected: "a7",
                    iExpanded: "a3",
                    iCollapsed: "a4",
                    iLeaf: "a5",
                    label: "a6",
                    labelSelected: "a8"
                }
            }
                 // 选中树节点  操作右边显示的数据
            $scope.treeSelected = function (node, isSel) {
                console.log('当前选中的树节点------',node);
                //node 对象中有可操作的数据
                $scope.funInitGrid();//操作node中数据后刷新右侧数据查询
            }
            // 搜索树节点 输入关键字可只显示关键项
            $scope.searchTreeNode = function(node){
                if(!$scope.searchkey){
                    return true;
                }
                if(node.label && node.label.indexOf($scope.searchkey)>=0){
                    return true;
                }else if(node.label && node.label.indexOf($scope.searchkey)<0 && node.children.length<1){
                    return false;
                }else{
                    var r = false;
                    for(var t=0;node.children && t<node.children.length;t++){
                        var tn = node.children[t];
                        r = $scope.searchTreeNode(tn);
                        if(r==true){
                            break;
                        }
                    }
                    return r;
                }
            }
          //获取树上节点的数据 (这里展示赋值给二级的)
          //从后台获取用于挂在数据
    $scope.funInitGridWell = function () {
        $scope.fwggTreedata[0].children[0].children.length=0;//这个是给赋值的children
        var getUrl = '某某url';
        var getdata = {params: {elems: {full:true, rules:rules}}};
        $http.get(getUrl,getdata).then(function (result) {
            let resdata=result.data;
            $scope.fwggTreedata[0].children[0].children = convertTreeData(resdata.data);//这是赋值children
            //但是因为树上挂的数据需要特定的属性所以给后台接收来的数据用push方法新增label属性
            //convertTreeData 函数就是转化数据的过程
        })
    }
    //把接受的数据转化为可以挂在树上的数据
    function convertTreeData(rows) {
        var keyNodes = {}, parentKeyNodes = {};
        for (var i = 0; i < rows.length; i++) {//循环遍历给每一条都加上
            var row = rows[i];
            row.pid = row['数据中的属性'];
            row.label = row['后台数据中要显示的数据'];//label是要显示的数据
            row.expanded =  true
            row.children = [];
            if (parentKeyNodes[row.pid]) {parentKeyNodes[row.pid].push(row);}
            else {parentKeyNodes[row.pid] = [row];}
            var children = parentKeyNodes[row.id];
            if (children) {row.children = children;}
            var pNode = keyNodes[row.pid];
            if (pNode) {pNode.children.push(row);}
        }
        var x=[];
        for(var lastItem in parentKeyNodes){
            var resultArr = Array.from(new Set(parentKeyNodes[lastItem]));
            x.push.apply(x,resultArr);

        }
        x.map(function(e){
            if(e.children){
                e.children = Array.from(new Set(e.children));
            }
        })
        return x; //选中属性中的 node 对象就是这个 (返回数据属性+fwggTreedata显示属性)
    }

这些是大概的代码,还有更多的属性功能暂时没有使用,以后再说d=====(￣▽￣*)b
参考文献:
https://blog.csdn.net/luo4105/article/details/76683444?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159764573019725222463547%2522%252C%2522scm%2522%253A%252220140713.130102334.wap%255Fall.%2522%257D&request_id=159764573019725222463547&biz_id=0&utm_medium=distribute.wap_search_result.none-task-blog-2_allfirst_rank_ecpm_v3~pc_rank_v3-8-76683444.wap_ecpm_v3_pc_rank_v3&utm_term=angular-tree-control%E6%A0%91%E7%9A%84%E5%AE%9E%E7%8E%B0&spm=1018.2118.3001.4187