bootstrap - Ya tree

by Amitesh Kumar

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.2/angular.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="app" ng-cloak>
    <div ng-controller="TreeController">
        <div>
            <button ng-click="addChild(data, $event)">+ New</button>
        </div>
        <div class="tree well">
            <ul>
                <li ya-tree="child in data.children at ul" ng-init="child.minimized=false" ng-class="{minimized:child.minimized}"> <span> 
                    <i class="glyphicon" ng-class="{'glyphicon-minus-sign':!child.minimized,'glyphicon-plus-sign':child.minimized,'glyphicon-leaf':!child.children.length }" ng-click="toggleMinimized(child)"></i> 

 <span>{{nodeLabel[$depth]}}</span>

                    <select ng-options="item.text for item in DDWOptions[$depth] track by item.value" ng-model="child.selectedItem" ng-change="onSelect(child.selectedItem, $depth)">
                        <option style="display:none" value="">--select --</option>
                    </select> <span ng-if="$depth < LEAF_NODE_HEIGHT">
                        <button ng-click="addChild(child, $event)">+</button>
                        <button ng-click="remove(child)" style='color:red'>x</button>
                            </span>
</span>
                    <div class="roi-details" ng-if="child.selectedItem && $depth === LEAF_NODE_HEIGHT">This is grid view for selected item, can be opened in the modal popup as well.</div>
                    <ul ng-class="{'inner-tree':child.children.length}"></ul>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

.tree {
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#fbfbfb;
    border:1px solid #999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    /*-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;*/
    display:inline-block;
    padding:3px 8px;
    text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}
li.minimized li{
    display:none;
}

JavaScript

var app = angular.module('app', []);

app.controller('TreeController', ['$scope', function ($scope) {
    $scope.data = {
        children: [{
            selectedItem: {
                value: 1,
                text: 1
            },
            children: [{
                selectedItem: {
                    value: 11,
                    text: 12
                },
                children: [{
                    selectedItem: {
                        value: 'R',
                        text: 'R'
                    },
                    children: [{
                        selectedItem: {
                            value: 111,
                            text: 111
                        },
                        children: [{
                            selectedItem: {
                                value: 123,
                                text: 123
                            },
                            children: [{
                                children: []
                            }]
                        }]
                    }]
                }]
            }]
        }]
    };

    var dd1 = [{
        value: 1,
        text: 1
    }, {
        value: 2,
        text: 2
    }];
    var dd2 = [{
        value: 11,
        text: 11
    }, {
        value: 12,
        text: 12
    }];
    var dd3 = [{
        value: 'P',
        text: 'P'
    }, {
        value: 'R',
        text: 'R'
    }];
    var dd4 = [{
        value: 111,
        text: 111
    }, {
        value: 123,
        text: 123
    }];
    var dd5 = [{
        value: 111,
        text: 111
    }, {
        value: 123,
        text: 123
    }];
    var dd6 = [{
        value: 111,
        text: 111
    }, {
        value: 123,
        text: 123
    }];

    $scope.DDWOptions = [dd1, dd2, dd3, dd4, dd5, dd6];
    $scope.LEAF_NODE_HEIGHT = $scope.DDWOptions.length - 1; // 5; //0 based index
    $scope.nodeLabel = ['Association', 'Network', 'Pin Indicator', 'Label 4', 'Label...