TutorialEvents - mar10/fancytree GitHub Wiki
About Fancytree event handlers.
Functionality can be added (and modified) by defining event handlers (i.e. callback functions).
Every event handler is passed a event and a data argument, that contain
information about the event target.
Example:
$("#tree").fancytree({
...
activate: function(event, data){
// A node was activated: display its title:
var node = data.node;
$("#echoActive").text(node.title);
},
beforeSelect: function(event, data){
// A node is about to be selected: prevent this for folders:
if( data.node.isFolder() ){
return false;
}
}
});Some event handlers may return false to prevent default handling.
Return values other than true or false must be passed in the data.result
property:
$("#tree").fancytree({
...
lazyLoad: function(event, data){
data.result = [ {"title": "New child 1"}, {"title": "New child 2"} ];
},
...
});An alternative way to define event handlers is to bind them later to an initialized tree. Note that the event name must be converted to lower case and prefixed with 'fancytree':
$("#tree").on("fancytreebeforeselect", function(event, data){
if( data.node.isFolder() ){
return false;
}
});For more information see also
- the online sample
- the complete list of available events
- and a description of the 'data' object.
To see the event sequence for different operations, open the online sample and have a look at the browser console.
$("#tree").fancytree({
[...]
click: function(event, data) {
var node = data.node,
// Only for click and dblclick events:
// 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon'
targetType = data.targetType;
// we could return false to prevent default handling, i.e. generating
// activate, expand, or select events
},
});A standard click event does not have a data argument, so we have to use
helper functions.
$(document).click(function(event) {
var node = $.ui.fancytree.getNode(event),
// Only for click and dblclick events:
// 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon'
tt = $.ui.fancytree.getEventTargetType(event);
});$("#tree").fancytree({
...
}).on("mouseenter,mouseleave", "span.fancytree-title", function(event){
// Add a hover handler to all node titles (using event delegation)
var node = $.ui.fancytree.getNode(event);
node.info(event.type);
});