递归算法在组织架构的应用

Javascript

在解决一些复杂问题的时候，我们需要复杂的算法，最近做组织架构就需要用递归的算法，对此总结一下组织架构对递归算法的应用。

首先我们看一下什么是递归算法，说简单点就是函数自己调用自己，对于递归，我们需要有个明确的退出条件，不然就成死循环了。

但是网上也有提到递归算法解题通常显得很简洁，但递归算法解题的运行效率较低，所以一般不提倡用递归算法设计程序。不过个人感觉，在解决组织架构这块递归还是很方便的。

好了不多说了，关于实际问题，我们直接看代码。

一、我们如果处理一个单层的数组，把它重组成我们需要的层级关系。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
var data = [
	{
    	id: 1,
        parent: 0,
    	name: '公司'
    },
    
    {
    	id: 2,
        parent: 1,
        name: '中心一'
    },
    
    {
    	id: 3,
        parent: 2,
        name: '部门一'
    },
    
    {
    	id: 4,
        parent: 2,
        name: '部门二'
    },
    
    {
    	id: 5,
        parent: 1,
        name: '中心二'
    },
    
    {
    	id: 6,
        parent: 5,
        name: '部门三'
    },
    
    {
    	id: 7,
        parent: 5,
        name: '部门四'
    }
];

var getChildren = function (all, id) {
    var nodes = all.filter(function (item) {
        return item.parent == id;
    });

    nodes.forEach(function (item) {
        item['children'] = getChildren(all, item.id);
    });

    return nodes;
}

getChildren(data, 0);

/**
结果为：
[
    {
        "id": 1,
        "parent": 0,
        "name": "公司",
        "children": [
            {
                "id": 2,
                "parent": 1,
                "name": "中心一",
                "children": [
                    {
                        "id": 3,
                        "parent": 2,
                        "name": "部门一",
                        "children": []
                    },
                    {
                        "id": 4,
                        "parent": 2,
                        "name": "部门二",
                        "children": []
                    }
                ]
            },
            {
                "id": 5,
                "parent": 1,
                "name": "中心二",
                "children": [
                    {
                        "id": 6,
                        "parent": 5,
                        "name": "部门三",
                        "children": []
                    },
                    {
                        "id": 7,
                        "parent": 5,
                        "name": "部门四",
                        "children": []
                    }
                ]
            }
        ]
    }
]*/
二、我们如何在页面实现一个树的渲染，我们以angular为例，通过指令来写一个简单的树形结构的插件。

我们避免不了要用到循环，我们需要用到ng-repeat；我们以递归的思想，所以在循环的通过ng-include来调用自己。

下面我们来实现一个简单的树的插件。

treeView.html

1
2
3
4
5
<ul class="nav nav-list">
    <li  class="tree-view-row" ng-repeat="row in treeData track by $index" ng-include="'treeItem.html'">

    </li>
</ul>

treeItem.html

1
2
3
4
5
6
7
8
9
<a sglclick="onSelect(row)" ng-dblclick="itemExpended(row, $event);" ng-init="row.$$isExpend = true">
    <span class="indented tree-label ng-binding">{{row.name}}</span>
</a>

<ul class="nav nav-list tree-item-box" ng-if="row.children && row.children.length > 0" ng-show="row.$$isExpend">
    <li class="tree-view-row" ng-repeat="row in row.children track by $index" ng-include="'treeItem.html'">  <!---重点-->

    </li>
</ul>

treeView.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
angular.module('treeView', [])
.directive('treeView', ['$timeout', function ($timeout) {
        return {
            restrict: 'E',
            replace: true,
            controller: "TreeViewController",
            controllerAs: "TVCtrl",
            bindToController: {
                treeData: '=',
                onSelect: '&'
            },
            scope: true,
            templateUrl: "treeView.html"
        };
    }
])

.controller('TreeViewController', ['$scope', function ($scope) {
    $scope.itemExpended = function(item, $event){
        item.$$isExpend = !item.$$isExpend;
        $event.stopPropagation();
    };
}]);

treeView.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.tree-view-row {

}

.tree-item-box {
    padding-left: 20px;
}

li.tree-view-row > a {
    padding: 5px 10px;
}

li.tree-view-row > a .pull-right {
    display: none;
    margin-top: 3px;
}

li.tree-view-row > a:hover .pull-right {
    display: inline-block;
}

li.tree-view-row > a.active {
    background-color: #3db1fa;
}

index.html

1
<tree-view tree-data="treeData"></tree-view>