For one of the Confluence plugins that I developed (Tags Plugin), I needed a client side tree. After a little research I decided to use jsTree. This is a jQuery plugin that is feature reach and so far I have been able to customize for my needs.
One of the features that I wanted was to allow users to edit a node on the tree when they double click it. It turn out to be super simple, first here the tree declaration (simplified from tag-macro.view.js):
treeContainer.jstree({
"json_data": {
"data": [ that.getTreeNodes() ]
},
"crrm":{
"input_width_limit":2000
},
"plugins": ["json_data", "ui", "crrm" ]
})The important bit is to include the “crrm” plugin, I customized it to increase the size of the input field when the node is in edit mode. Once this is setup, putting a node into edit mode is as simple as:
$('.jstree-leaf').live('dblclick', function(){
treeContainer.jstree("rename");
});Yeah, yeah, “live” is deprecated, but as far as I know the jQuery version provided by Confluence is not the lastest. This will auto-magically set the node to edit mode and listen for the ENTER key to trigger the “rename.jstree” event. So, how do you handle this event? You bind to the event when you declare the tree:
treeContainer.jstree({
//...
})
.bind("rename.jstree", function(e, data){
var oldText = data.rslt.old_name;
var newText = data.rslt.new_name;
//do your thing
});
If you need a client side tree, you may want to give jsTree a shot.![]()