angularjs-tree-grid/angularjs-tree-grid.js at master · seanmcilvenna/angularjs-tree-grid · GitHub

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
angular.module('angular-tree-grid', [])
    .run(function($templateCache) {
        var treeGridHtml = `
<style type="text/css">
    .tree-grid tr.highlight {
        background-color: inherit;
        font-weight: bold;
    }

    .tree-grid tr.no-children td:first-child {
        padding-left: 26px;
    }
</style>
<div class="tree-grid">
    <table class="table table-striped">
        <thead>
            <tr>
                <th ng-repeat="c in options.columns">{{c.header}}</th>
            </tr>
        </thead>
        <tbody>
            <tr class="clickable" ng-repeat="node in flattenedNodes" ng-class="{ 'highlight': node.Constraint, 'danger': selectedNode == node, 'no-children': !nodeHasChildren(node) }">
                <td ng-repeat="c in options.columns" ng-click="toggleSelect(node, $event)">
                    <span ng-if="$index == 0">
                        <span style="white-space: pre">{{getNodeTabs(node)}}</span>
                        <i ng-show="nodeHasChildren(node)" class="glyphicon clickable" ng-class="{ 'glyphicon-plus': !node.$expanded, 'glyphicon-minus': node.$expanded }" ng-click="toggleExpand(node, $event)"></i>
                    </span>
                    <span>{{node[c.key]}}</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>
`;
        $templateCache.put('/template/treeGrid.tpl.html', treeGridHtml);
    })
    .directive('treeGrid', function($templateCache) {
        return {
            restrict: 'E',
            template: $templateCache.get('/template/treeGrid.tpl.html'),
            transclude: true,
            scope: {
                nodes: '=nodes',
                onNodeSelected: '&nodeSelected',
                onNodeExpanded: '&nodeExpanded'
            },
            link: function ($scope, $element, $attributes, $controller, $transclude) {
                $scope.options = {
                    columns: []
                };

                $transclude(function(options) {
                    $scope.options.childrenKey = $(options[1]).attr('children-key');

                    var columns = options.find('columns > column');

                    for (var i = 0; i < columns.length; i++) {
                        var column = {};
                        column.key = $(columns[i]).attr('key');
                        column.header = $(columns[i]).attr('header');
                        $scope.options.columns.push(column);
                    }
                });

                $scope.flattenedNodes = [];
                $scope.selectedNode = null;

                $scope.nodeHasChildren = function(node) {
                    if ($scope.options.hasNodesKey) {
                        return node[$scope.options.hasNodesKey];
                    } else {
                        var children = node[$scope.options.childrenKey];
                        return children && children.length > 0;
                    }
                };

                $scope.getNodeTabs = function (node) {
                    var tabs = '';

                    for (var i = 0; i < node.$level; i++) {
                        tabs += '    ';
                    }

                    return tabs;
                };

                $scope.toggleExpand = function (node, $event) {
                    node.$expanded = !node.$expanded;
                    $scope.onNodeExpanded({ node });
                    $scope.flattenedNodes = getFlattenedNodes();

                    if ($event) {
                        $event.stopPropagation();
                    }
                };

                $scope.toggleSelect = function (node, $event) {
                    if ($scope.selectedNode == node) {
                        $scope.selectedNode = null;
                    } else {
                        $scope.selectedNode = node;
                    }

                    $scope.onNodeSelected({
                        selectedNode: $scope.selectedNode
                    });
                };

                var getFlattenedNodes = function () {
                    var flattenNodes = function (flattened, parent, level) {
                        for (var i = 0; i < parent[$scope.options.childrenKey].length; i++) {
                            var node = parent[$scope.options.childrenKey][i];

                            node.$level = level;
                            flattened.push(node);

                            if (node.$expanded) {
                                flattenNodes(flattened, node, level + 1);
                            }
                        }
                    };

                    var flattened = [];
                    var rootNode = {};
                    rootNode[$scope.options.childrenKey] = $scope.nodes;
                    flattenNodes(flattened, rootNode, 0);
                    return flattened;
                };

                $scope.$watch('nodes', function () {
                    $scope.flattenedNodes = getFlattenedNodes();
                }, true);
            }
        };
    });