AngularJS : Tree Component

Standard

Tree Control is an AngularJS component that cad add siblings, child and remove them. It doesn’t depend on jQuery.

I have tried number of tree control but none is available out in open source community which can assist you to add siblings too. Since I want to control number of childs that can be added to single node. So I came up with my own tree control implementation.

Features

  • Data binding for the tree model
  • Data binding for the selected node in the tree
  • Adding siblings
  • Customize number of childs to be added on a single node(Default: 6)
  • Remove node
  • Recusive controller and Html code
  • Can be customized with CSS

Github Link

Initial State:

2016-07-06 14_28_36-index html

After adding multiple siblings and children:

2016-07-06 14_34_26-index html

Alert if you remove parent with children:

2016-07-06 14_34_43-index html

Alert if number of childs exceeds:

2016-07-06 14_38_26-index html

 

Angular Code:

(function () {
    'use strict';
    
    var app = angular
        .module('sampleApp', []);
    
    app.controller('HomeController', homeController);
 
    homeController.$inject = [];
 
    function homeController() {
        var vm = this;
 
        init();
 
        function init() {
            vm.detailList = [];
            vm.ID = 0;
            vm.parentRecord = {};
            addRootNode();
            vm.AddSibling = AddSibling;
            vm.AddChild = AddChild;
            vm.Delete = Delete;
        }
 
        ////////////////////////////Implementation//////////////////////////////////////
 
        function AddSibling(item) {
            if (item.parentId == 0) {
                addRootNode();
            }
            else {
                findParentRecord(vm.detailList, item.parentId);
                if (vm.parentRecord) {
                    AddChild(vm.parentRecord);
                }
            }
        }
 
        function AddChild(item) {
            var depth = findNodeLevel(vm.detailList, item.ID);
            if (depth < 7) {
                vm.ID = vm.ID + 1;
                item.nodes.push({
                    nodes: [],
                    parentId: item.ID,
                    ID: vm.ID
                });
            }
            else
                alert('maximum level has been reached');
        }
 
        function Delete(item) {
            if (item.nodes.length > 0)
                alert('delete children first');
            else {
                DeleteChild(vm.detailList, item.parentId, item);
            }
        }
 
        ////////////////////////////Helping Function//////////////////////////////////////
 
        function addRootNode() {
            vm.ID = vm.ID + 1;
            vm.detailList.push({
                nodes: [],
                parentId: 0,
                ID: vm.ID
            });
        }
 
        function findParentRecord(arr, parentId) {
            for (var i in arr) {
                if (typeof (arr[i]) == "object") {
                    if (arr[i].ID == parentId) {
                        vm.parentRecord = arr[i];
                        break;
                    }
                    else
                        findParentRecord(arr[i], parentId);
                }
            }
        }
 
        function DeleteChild(arr, parentId, item) {
            for (var i in arr) {
                if (typeof (arr[i]) == "object") {
                    if (arr[i].ID == parentId) {
                        var childrenList = arr[i].nodes;
                        var index = findIndex(childrenList, item.ID);
                        if (index > -1)
                            childrenList.splice(index, 1);
                        break;
                    }
                    else
                        DeleteChild(arr[i], parentId, item);
                }
            }
        }
 
        function findIndex(arr, selectedItemID) {
            for (var i in arr) {
                if (arr[i].ID == selectedItemID)
                    return i;
            }
            return -1;
        }
 
        function findNodeLevel(arr, id) {
            var level = 1;
            findParentRecord(arr, id)
            while (vm.parentRecord.parentId > 0) {
                level = level + 1;
                findParentRecord(arr, vm.parentRecord.parentId);
            }
            return level;
        }
    };
})();

 

Angular HTML Code:

<html>
    <body ng-app="sampleApp" class="ng-cloak">
        
                             
                                                                                                                                               
                            
  •                     
                
            </script>             
                
                
                    
                            
  •                     
                
            </div>             
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s