oTree
oTree is a stand alone javascript tree library.
There is several good features in this library, look at the examples for more information.
It's possible to add, modify, remove, move elements dynamically. All images are customizable, it is possible to attached dynamic javascript code on events.
oTree allowed AJAX dynamic content, you can create empty "directories" which would be populate when the user will open the directory.
There is some function to open directories to a specific item too !
Simple Example Code
<div id="demo_otree" class="oTree"></div>
<script type="text/javascript">
demo = new oTree("demo");
var i = demo.add(0,1,"Directory");
demo.add(i,0,"Element 1");
demo.add(i,0,"Element 2");
demo.add(i,0,"Element 3");
demo.render("demo");
</script>
<script type="text/javascript">
demo = new oTree("demo");
var i = demo.add(0,1,"Directory");
demo.add(i,0,"Element 1");
demo.add(i,0,"Element 2");
demo.add(i,0,"Element 3");
demo.render("demo");
</script>
Serialize Data
<div id="demo2_otree" class="oTree"></div>
<script type="text/javascript">
demo2 = new oTree("demo2");
demo2.load([
{"status":1,"name":"Directory","data":[
{"status":0,"name":"Element 1"},
{"status":0,"name":"Element 2"},
{"status":0,"name":"Element 3"}
]}
]);
demo2.render("demo2");
</script>
<script type="text/javascript">
demo2 = new oTree("demo2");
demo2.load([
{"status":1,"name":"Directory","data":[
{"status":0,"name":"Element 1"},
{"status":0,"name":"Element 2"},
{"status":0,"name":"Element 3"}
]}
]);
demo2.render("demo2");
</script>
Advance Example
<div id="demo3_otree" class="oTree"></div>
<p>Selected element : <span id="demo3_selected">none</span></p>
<script type="text/javascript">
var options = {showLoading:true, loadingText:'Loading...'};
var data = [{"status":3,"name":"Directory"},{"status":0,"name":"Element","value":"Obscurelighty Project"}];
var callback = function(tree,node,ev) {
if( node.id < 6 ) {
setTimeout( function() {
tree.add(node.id, 3, 'Ajax Directory');
tree.add(node.id, 0, 'Ajax Element');
tree.add(node.id, 0, 'Ajax Element 2');
tree.update(node);
}, 1000 );
} else {
tree.add(node.id, 0, 'Last Element', 'value of last element');
tree.update(node);
}
};
var callbackSelection = function(tree,id) {
var node = tree.get(id);
var value = '';
if( node.value ) { value = '<br/>Value of Element: ' + node.value; }
document.getElementById('demo3_selected').innerHTML = '[' + node.id + '] ' + node.name + value;
}
demo3 = new oTree("demo3",options,callback,data,true);
demo3.callbackSelection = callbackSelection;
</script>
<p>Selected element : <span id="demo3_selected">none</span></p>
<script type="text/javascript">
var options = {showLoading:true, loadingText:'Loading...'};
var data = [{"status":3,"name":"Directory"},{"status":0,"name":"Element","value":"Obscurelighty Project"}];
var callback = function(tree,node,ev) {
if( node.id < 6 ) {
setTimeout( function() {
tree.add(node.id, 3, 'Ajax Directory');
tree.add(node.id, 0, 'Ajax Element');
tree.add(node.id, 0, 'Ajax Element 2');
tree.update(node);
}, 1000 );
} else {
tree.add(node.id, 0, 'Last Element', 'value of last element');
tree.update(node);
}
};
var callbackSelection = function(tree,id) {
var node = tree.get(id);
var value = '';
if( node.value ) { value = '<br/>Value of Element: ' + node.value; }
document.getElementById('demo3_selected').innerHTML = '[' + node.id + '] ' + node.name + value;
}
demo3 = new oTree("demo3",options,callback,data,true);
demo3.callbackSelection = callbackSelection;
</script>
Selected element : none
