Componente TreeView de JavaScript puro-aimaraJS
| Autor: | rafaelthca |
|---|---|
| Views Total: | 6,278 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 1, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
aimaraJS es una biblioteca de JavaScript robusta y eficaz para representar una estructura de árbol editable, ampliable y plegable que cuenta con eventos personalizados, menú contextual e iconos de nodo.
¿Cómo funciona?
Enlace a aimara. CSS y aimara. js.
<link rel="stylesheet" href="css/Aimara.css"> <script src="lib/Aimara.js"></script>
Cree un elemento DIV HTML para la estructura de árbol.
<div id="div_tree"></div>
Cree el menú contextual para los nodos de árbol.
var contex_menu = {
'context1' : {
elements : [
{
text : 'Node Actions',
icon: 'images/blue_key.png',
action : function(node) {
},
submenu: {
elements : [
{
text : 'Toggle Node',
icon: 'images/leaf.png',
action : function(node) {
node.toggleNode();
}
},
{
text : 'Expand Node',
icon: 'images/leaf.png',
action : function(node) {
node.expandNode();
}
},
{
text : 'Collapse Node',
icon: 'images/leaf.png',
action : function(node) {
node.collapseNode();
}
},
{
text : 'Expand Subtree',
icon: 'images/tree.png',
action : function(node) {
node.expandSubtree();
}
},
{
text : 'Collapse Subtree',
icon: 'images/tree.png',
action : function(node) {
node.collapseSubtree();
}
},
{
text : 'Delete Node',
icon: 'images/delete.png',
action : function(node) {
node.removeNode();
}
},
]
}
},
{
text : 'Child Actions',
icon: 'images/blue_key.png',
action : function(node) {
},
submenu: {
elements : [
{
text : 'Create Child Node',
icon: 'images/add1.png',
action : function(node) {
node.createChildNode('Created',false,'images/folder.png',null,'context1');
}
},
{
text : 'Create 1000 Child Nodes',
icon: 'images/add1.png',
action : function(node) {
for (var i=0; i<1000; i++)
node.createChildNode('Created -' + i,false,'images/folder.png',null,'context1');
}
},
{
text : 'Delete Child Nodes',
icon: 'images/delete.png',
action : function(node) {
node.removeChildNodes();
}
}
]
}
}
]
}
}; Cree la estructura de árbol.
tree = createTree('div_tree','white',contex_menu); Modelizar el árbol.
tree.drawTree();
Agregar nodo después de árbol ya está representado.
tree.createNode('Real Time',false,'images/leaf.png',null,null,'context1');
