jsTree with support for label toggle_node action AND leaf HREF click actions

You can enable node opening/closing on the label click using the UI plugin and binding the select_node.jstree event to your tree. A consequence of this method means that any leafs with a valid HREF attribute will no longer click through as expected.

The method below demonstrates how to have a toggle action on clicking a node, and still allowing a click on a leaf node to (in this case) start a file download.

$('#tree').jstree({
  plugins: ['themes','xml_data'],
  xml_data: {
    ajax: {
      url: '/path/to/xmlresponse'
    }
  }
});
 
$("#tree").delegate("a","click", function (e) { 
  if (this.className.indexOf('icon') == -1) {  // is the node clicked a leaf?
    $("#tree").jstree("toggle_node", this); 
    e.preventDefault(); 
    return false;
  }
});
This entry was posted in JavaScript and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. Frank van Eykelen
    Posted June 7, 2011 at 10:59 am | Permalink

    Great! Thanks.

  2. Andy B
    Posted December 2, 2011 at 3:34 am | Permalink

    Sweet! and easy too! Thanks!

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">