How does node selection work?

[marcboon]

I used $(#'tree').tree({data:data, selectable:true}) but nothing seems to happen when I click on a node. I would like to be able to select/deselect nodes by clicking on it, and optionally fire an event handler. I also did not see any styles defined for selected nodes in the stylesheet, do I need to do that myself?

[mbraak]

The tree triggers the 'tree.click' event. You can bind to the event like this:

$('#tree1').bind(
    'tree.click',
    function(event) {
        // The clicked node is 'event.node'
        var node = event.node;
        alert(node.name);
    }
);

You do not have to define css for selected nodes. In jqtree.css the selected elements get a blue blackground:

ul.tree li.selected > div,
ul.tree li.selected > div:hover {
    background-color: #97BDD6;
    background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#89AFCA));
    background: -moz-linear-gradient(top, #BEE0F5, #89AFCA);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

[marcboon]

Ok, the click event works, so does styling of the selected node.

How about selecting multiple nodes? Can I set/unset the selected state of each node programmatically (ie. in a the click handler)?

[mbraak]

jqTree does not support multiple selection of nodes.

However, you could do this in the click handler:

  $('#tree1').bind(
    'tree.click',
    function(e) {
      var $el = $(e.node.element);
      $el.toggleClass('multiple-select');
    }
);

[marcboon]

Thanks! That does the trick, together with a small change in the stylesheet (li.selected -> li.multi-select). I could extend it further with Ctrl-click and Shift-click behaviour, but that is not really needed in my application. Nice looking tree, by the way :-)