Original Repos:
- JQuery Tree: https://github.com/a19836/jquery-tree/
- Bloxtor: https://github.com/a19836/bloxtor/
JQuery Tree is a lightweight JavaScript library that transforms 'ul' and 'li' elements into an intuitive, user-friendly tree view, listing these nodes into a collapsible and hierarchical tree structure, ideal for file system navigation.
Check out a live example by opening index.html.
Requirements:
- jquery library
<html> <head> <!-- Add jquery lib --> <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <!-- Add jquerymytree lib --> <link rel="stylesheet" href="css/style.min.css" type="text/css" charset="utf-8" /> <script language="javascript" type="text/javascript" src="js/mytree.js"></script> </head> <body> <script> $(function () { var mytree = new MyTree(); mytree.init("file_tree"); }); </script> <div id="file_tree" class="hidden"> <ul> <li class="jstree-open"> <label>Folder A</label> <ul> <li><a onClick="window.open('//bloxtor.com')">Link</a></li> </ul> </li> <li> <label>Folder B</label> <ul> <li class="jstree-open"> Sub-Folder C <ul> <li data-jstree='{"icon":"jstree-file"}'> <label>test</label> <ul> <li data-jstree='{"icon":"jstree-folder"}'>subtest</li> </ul> </li> </ul> </li> <li data-jstree='{"icon":"jstree-file"}'>file.xml</li> </ul> </li> <li data-jstree='{"icon":"jstree-folder"}'>Fake Folder</li> <li>Through Ajax on open <ul url="http://some_url_with_json_response/to/be/called/on/open/or/click"></ul> </li> </ul> </div> </body> </html>
Create new tree object:
var mytree = new MyTree({
multiple_selection : false, //allow multiple selection
toggle_selection : false, //click one to select, click again to deselect
toggle_children_on_click : true, //toggle children on click the element, besides clicking the arrow icon
ajax_callback_before : func1, //on ajax request, after getting json response from server this gets called as second callback, before the initChilds. This function is responsible to parse the json_obj and convert it into html nodes inside of the ul node: func1(ul, json_obj, mytree);
ajax_callback_after : func2, //on ajax request, after getting json response from server this gets called as third callback, after the initChilds: func2(ul, json_obj, mytree);
ajax_callback_error : func3, //on ajax request error callback: func3(ul, jqXHR, textStatus, errorThrown, mytree)
});
Get html element initialized as tree:
var elm = mytree.tree_elm;
Get options:
var options = mytree.options;
Converts a html element into a tree based in its id:
mytree.init(tree_elm_id);
Converts a html element into a tree:
mytree.initNodeChilds(node);
Selects a node based in its id:
mytree.selectNode(node_id);
Checks if a node is selected based in its id:
var selected = mytree.isNodeSelected(node_id);
Deselects all nodes:
mytree.deselectAll();
Gets all selected nodes:
var nodes = mytree.getSelectedNodes();
Refreshes children based in a node selector:
mytree.refreshNodesChilds(selector);
Refreshes children based in a node id:
mytree.refreshNodeChildsByNodeId(id);
Refreshes children based in a node element:
mytree.refreshNodeChilds(node, {
ajax_callback_first : func1, //on ajax request, after getting json response from server this gets called as first callback, before the initChilds. This function is responsible to parse the json_obj and convert it into html nodes inside of the ul node: func1(ul, json_obj);
ajax_callback_last : func2, //on ajax request, after getting json response from server this gets called as fourth callback, after the initChilds: func2(ul, json_obj, mytree);
ajax_callback_error : func3, //on ajax request error callback: func3(ul, jqXHR, textStatus, errorThrown, mytree)
});