TutorialApi - mar10/fancytree GitHub Wiki
About Fancytree API.
Fancytree exposes an extensive, object oriented interface to query and manipulate the data model. The API functions and properties are exposed by different interfaces:
-
Static methods in the
$.ui.fancytreenamespace. - Widget methods on the Fancytree jQuery widget instance.
- Tree methods on the Fancytree object instance.
- Node methods on the FancytreeNode object instances.
You find a complete overview in the Fancytree API Reference.
Static functions and properties are directly available from the $.ui.fancytree namespace:
alert($.ui.fancytree.version);
var node = $.ui.fancytree.getNode(event);See also the list of static functions.
Widget methods and properties require a jQuery Widget instance.
They are called using the special .fancytree(COMMAND) syntax:
// Get or set an option (note: tree.getOption() is the preferred method)
var autoScroll = $("#tree").fancytree("option", "autoScroll");
$("#tree").fancytree("option", "autoCollapse", true);
// Disable the tree
$("#tree").fancytree("disable");
// Get the Fancytree instance for a tree widget
var tree = $.ui.fancytree.getTree("#tree");See also the list of widget methods.
Note: Widget methods are deprecated and can mostly be replaced by native API calls:
// Get the Fancytree instance
var tree = $.ui.fancytree.getTree("#tree");
var autoScroll = tree.getOption("autoScroll");
tree.setOption("autoCollapse", true);
tree.setEnabled(false);We can get all Fancytree widgets using a special selector:
var $allTrees = $(":ui-fancytree");
$allTrees.fancytree("disable");Tree methods and properties require a Fancytree object instance:
// Get the Fancytree instance
var tree = $.ui.fancytree.getTree("#tree");
// Use the API
alert("We have " + tree.count() + " nodes.");
tree.reload();See also the list of Fancytree methods
Node methods and properties require a FancytreeNode object instance. Node objects are returned by many functions or passed as argument to event handlers.
// Get a FancytreeNode instance
var tree = $.ui.fancytree.getTree("#tree");
var node = tree.getActiveNode();
// Use the API
node.setTitle("New title");$("#tree").fancytree({
...
activate: function(event, data){
// A node was activated: display its title:
var tree = data.tree,
node = data.node;
$("#echoActive").text(node.title);
},
});See also the list of FancytreeNode methods
Additional information:
- Have a look at the API Reference for details, especially Fancytree methods and FancytreeNode methods.
- See the demo page.
var tree = $.ui.fancytree.getTree("#tree");
var node = tree.getActiveNode();
// set the 'selected' status and update the display:
node.setSelected(true);
// changing other attributes may require explicit rendering:
node.title = node.title + "_copy";
node.tooltip = "new";
node.selected = true;
node.render();Fancytree returns jQuery deferreds / promises for most asynchronous methods:
var tree = $.ui.fancytree.getTree("#tree"),
activeNode = tree.getActiveNode();
activeNode.setExpanded(true).done(function(){
// The 'done' function is called after the expansion animation finished.
alert("Node was expanded");
}).fail(function(){
// The 'fail' function is called on error
}).always(function(){
// The 'always' function is always called.
}); var tree = $.ui.fancytree.getTree("#tree");
// Expand all tree nodes
tree.visit(function(node){
node.setExpanded(true);
}); var tree = $.ui.fancytree.getTree("#tree");
var activeNode = tree.getActiveNode();
activeNode.addChildren({
title: "Document using a custom icon",
icon: "customdoc1.gif"
});