<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.12.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="treeview.css" />
<link rel="stylesheet" href="style.css" />
<script src="treeview.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="app">
<div ng-controller="AppCtrl">
<span>sql: {{query[0].sql}}</span>
<ya-treeview ya-id="myTree" ya-model="query" ya-options="options_field" ya-context="context">
<span ng-class="{selected: context.selectedNodes.indexOf(node) > -1}">{{ node.$model.name}}</span>
</ya-treeview>
</div>
</div>
</body>
</html>
// Code goes here
angular.module('app', ['ya.treeview', 'ya.treeview.tpls', ])
.controller('AppCtrl', function($scope, $http) {
$scope.context = {
selectedNodes: []
};
$scope.options_table = {
childrenKey: 'tables'
};
$scope.load = function() {
$http.get('data.json').success(function(data) {
$scope.model = data;
});
};
$scope.options_field = {
onSelect: function($event, node, context) {
if ($event.ctrlKey) {
var idx = context.selectedNodes.indexOf(node);
if (context.selectedNodes.indexOf(node) === -1) {
context.selectedNodes.push(node);
} else {
context.selectedNodes.splice(idx, 1);
}
} else {
context.selectedNodes = [node];
}
},
childrenKey: 'fields'
};
$scope.query = [{
"sql":"select O1277_RTU, O1277_OBSDEVOL from tabla_uno where campo=value",
"table": "uno",
"name": "tabla_uno",
"fields": [{
"name": "O1277_RTU",
"comment": "Referencia transacción única de la operacion origen",
"dataType": "CHR",
"length": 0,
"scale": 30,
"precision": 0,
"nullable": false
}, {
"name": "O1277_OBSDEVOL",
"comment": "Observaciones a la devolucion",
"dataType": "VCH",
"length": 0,
"scale": 500,
"precision": 0,
"nullable": false
}]
}, {
"table": "dos",
"name": "tabla_dos",
"fields": [{
"name": "O1277_TIPOPERSD",
"comment": "Operacion de devolucion, tipo de persona solicitante del pago original",
"dataType": "CHR",
"length": 0,
"scale": 1,
"precision": 0,
"nullable": false
}, {
"name": "O1277_CODPERSD",
"comment": "Oper de devolucion, Codigo de persona del solicitante del pago original",
"dataType": "DEC",
"length": 0,
"scale": 9,
"precision": 0,
"nullable": false
}]
}]
});
/* Styles go here */
(function(exports, global) {
global["true"] = exports;
"use strict";
angular.module("ya.treeview", []).factory("YaTreeviewService", function() {
var service = {};
var hasChildren = function(node, options) {
return angular.isArray(node[options.childrenKey]) || node[options.hasChildrenKey] || false;
};
service.children = function(node, options) {
var children = node.$model[options.childrenKey];
if (angular.isFunction(children)) {
return children();
} else if (angular.isArray(children)) {
return children;
} else {
throw new Error("Children is neither an array nor a function.");
}
};
service.nodify = function(node, parent, options) {
var vnode = {
$model: node,
$parent: parent,
$hasChildren: hasChildren(node, options),
collapsed: options.collapseByDefault
};
if (vnode.$hasChildren) {
if (options.lazy) {
vnode.$children = [];
} else {
vnode.$children = service.nodifyArray(service.children(vnode, options), node, options);
}
}
return vnode;
};
service.nodifyArray = function(nodes, parent, options) {
var vnodes = [];
angular.forEach(nodes, function(node) {
vnodes.push(service.nodify(node, parent, options));
});
return vnodes;
};
return service;
}).controller("YaTreeviewCtrl", [ "$scope", "YaTreeviewService", function($scope, YaTreeviewService) {
var fillOptions = function(clientOptions) {
var options = {};
clientOptions = clientOptions || {};
options.childrenKey = clientOptions.childrenKey || "children";
options.hasChildrenKey = clientOptions.hasChildrenKey || "has_children";
options.onExpand = clientOptions.onExpand || angular.noop;
options.onCollapse = clientOptions.onCollapse || angular.noop;
options.onSelect = clientOptions.onSelect || angular.noop;
options.onDblClick = clientOptions.onDblClick || angular.noop;
options.collapseByDefault = !!clientOptions.collapseByDefault || true;
options.lazy = !!clientOptions.lazy || false;
$scope.context = clientOptions.context || {};
return validateOptions(options);
};
var validateOptions = function(options) {
if (options.lazy && !options.collapseByDefault) {
throw new Error("Yea, right... lazy load expanded tree...");
}
return options;
};
var createRootNode = function(nodes) {
var node = {};
node[options.childrenKey] = nodes;
var root = YaTreeviewService.nodify(node, null, options);
if (options.lazy) {
root.$children = YaTreeviewService.nodifyArray(nodes, node, options);
}
root.$hasChildren = true;
root.collapsed = false;
return root;
};
$scope.expand = function($event, node) {
if (node.$hasChildren && node.$children.length === 0) {
var children = YaTreeviewService.children(node, options);
node.$children = YaTreeviewService.nodifyArray(children, node, options);
}
node.collapsed = false;
options.onExpand($event, node, $scope.context);
};
$scope.collapse = function($event, node) {
node.collapsed = true;
options.onCollapse($event, node, $scope.context);
};
$scope.selectNode = function($event, node) {
$scope.context.selectedNode = node;
options.onSelect($event, node, $scope.context);
};
$scope.dblClick = function($event, node) {
options.onDblClick($event, node, $scope.context);
};
var options = fillOptions($scope.options);
$scope.node = createRootNode($scope.model);
$scope.context.nodify = function(node, parent) {
return YaTreeviewService.nodify(node, parent, options);
};
$scope.context.nodifyArray = function(nodes, parent) {
return YaTreeviewService.nodifyArray(nodes, parent, options);
};
$scope.context.children = function(node) {
return YaTreeviewService.children(node, options);
};
$scope.$watch("model", function(newValue) {
var root = createRootNode(newValue);
for (var i in root) {
if (root.hasOwnProperty(i)) {
$scope.node[i] = root[i];
}
}
});
} ]).directive("yaTreeview", function() {
return {
restrict: "AE",
replace: true,
transclude: true,
controller: "YaTreeviewCtrl",
scope: {
id: "@yaId",
model: "=yaModel",
options: "=yaOptions"
},
templateUrl: "templates/ya-treeview/treeview.tpl.html",
compile: function(tElement, tAttrs, tTranscludeFn) {
return function(scope, iElement, iAttrs, treeviewCtrl) {
treeviewCtrl.transcludeFn = tTranscludeFn;
};
}
};
}).directive("yaNode", [ "$compile", function($compile) {
return {
restrict: "AE",
replace: false,
scope: false,
templateUrl: "templates/ya-treeview/children.tpl.html",
compile: function(tElement) {
var template = tElement.clone();
tElement.empty();
return function(scope, iElement) {
if (scope.node.$hasChildren) {
iElement.append($compile(template.html())(scope));
}
};
}
};
} ]).directive("yaTransclude", function() {
return {
restrict: "AE",
replace: false,
require: "^yaTreeview",
scope: false,
template: "",
link: function(scope, iElement, iAttrs, treeviewCtrl) {
treeviewCtrl.transcludeFn(scope, function(clone) {
if (scope.node) {
iElement.append(clone);
}
});
}
};
});
angular.module("ya.treeview.tpls", [ "templates/ya-treeview/children.tpl.html", "templates/ya-treeview/treeview.tpl.html" ]);
angular.module("templates/ya-treeview/children.tpl.html", []).run([ "$templateCache", function($templateCache) {
$templateCache.put("templates/ya-treeview/children.tpl.html", '<ul ng-hide=node.collapsed><li class=node ng-repeat="node in node.$children"><div ng-show=node.$hasChildren><a ng-show=node.collapsed class="btn btn-link pull-left" ng-click="expand($event, node)"><i class="glyphicon glyphicon-chevron-right"></i></a> <a ng-hide=node.collapsed class="btn btn-link pull-left" ng-click="collapse($event, node)"><i class="glyphicon glyphicon-chevron-down"></i></a></div><div class=node-content ya-transclude="" ng-class="{\'node-children\': node.$hasChildren}" ng-click="selectNode($event, node)" ng-dblclick="dblClick($event, node)"></div><div ya-node="" class=ya-node></div></li></ul>');
} ]);
angular.module("templates/ya-treeview/treeview.tpl.html", []).run([ "$templateCache", function($templateCache) {
$templateCache.put("templates/ya-treeview/treeview.tpl.html", '<div class=ya-treeview><div ya-node="" class=ya-node></div></div>');
} ]);
})({}, function() {
return this;
}());
.ya-treeview {
font-size: 12px;
}
.ya-treeview ul {
padding-left: 0px;
}
.ya-treeview li {
list-style: none;
padding-left: 20px;
}
.ya-treeview a {
padding: 0;
margin: 0;
font-size: 11px;
outline: none;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.ya-treeview .node .node-content {
padding-left: 2px;
}
.ya-treeview .node .node-children {
margin-left: 12px;
}