jQuery Tree Widget

Overview

daredevel’s jQuery Tree is a jQuery UI widget that you can use to add advanced features to an html tree built using nested unordered lists.

It’s designed to be fast, lightweight, simple to deploy and setup and highly configurable.

Documentation

Events

deselect

Options

checkbox

Type: Boolean
default: true

Defines if tree nodes will have a checkbox field.

Documentation index


collapseDuration

Type: Integer
default: 500

Defines duration of collapse effect in ms. Works only if collapseEffect is not null.

Documentation index


collapseEffect

Type: String
default: ‘blind’

Defines the effect used for collapse node.

Documentation index


collapseUiIcon

Type: String
default: ‘ui-icon-triangle-1-e’

Defines jQueryUI icon class used for collapse anchor.

Documentation index


collapsible

Type: Boolean
default: true

Define if tree nodes can be collapsed.

Documentation index


dnd

Type: Boolean
default: true

Defines if tree has drag and drop feature active.

Documentation index


expandDuration

Type: Integer
default: 500

Defines duration of expand effect in ms. Works only if expandEffect is not null.

Documentation index


expandEffect

Type: String
default: ‘blind’

Defines the effect used for expand node.

Documentation index


expandUiIcon

Type: String
default: ‘ui-icon-triangle-1-se’

Defines jQueryUI icon class used for expand anchor.

Documentation index


leafUiIcon

Type: String
default: ”

Defines jQueryUI icon class used for leaf anchor.

Documentation index


selectable

Type: Boolean
default: true

Defines if tree nodes are selectable.

Documentation index


selectUiClass

Type: String
default: ‘ui-state-active’

Defines jQueryUI class used for selected labels.

Documentation index


Methods

addNode( attributes, parentLi, position )

Returns: void

Add a new node as children of passed one

attributes

Type: Object

New node attributes.

parentLi

Type: String or Object

Node under which new node will be attached. Object or selector string.

position

Type: Integer

Position of the node between brothers (expressed as positive integer).

Documentation index


check( li )

Returns: void

Check node

li

Type: String or Object

Node to check. Object or selector string.

Documentation index


checkAll( )

Returns: void

Check all tree elements

Documentation index


collapse( li, effect, force )

Returns: void

Collapse node

li

Type: String or Object

Node to collapse. Object or selector string.

effect

Type: Boolean

Apply effect.

force

Type: Boolean

Force to already collapse node.

Documentation index


collapseAll( )

Returns: void

Collapse all nodes of the tree

Documentation index


deselect( )

Returns: void

Deselect selected node

Documentation index


destroy( )

Returns: void

Cleanup DOM elements removing plugin instance

Documentation index


expand( li, effect, force )

Returns: void

Expand node

li

Type: String or Object

Node to expand. Object or selector string.

effect

Type: Boolean

Apply effect.

force

Type: Boolean

Force to already expanded node.

Documentation index


expandAll( )

Returns: void

Expand all nodes of the tree

Documentation index


isRoot( li )

Returns: Object

Check if passed node is a root

li

Type: String or Object

Node to check if is root. Object or selector string.

Documentation index


moveNode( li, parentLi, position )

Returns: void

Move a node under new parent

li

Type: String or Object

Node to move. Object or selector string.

parentLi

Type: String or Object

Node under which node will be attached. Object or selector string.

position

Type: Integer

Position of the node between brothers (expressed as positive integer).

Documentation index


option( optionName )

Returns: Object

Gets the value currently associated with the specified optionName.

optionName

Type: String

The name of the option to get.

Documentation index


option( )

Returns: PlainObject

Gets an object containing key/value pairs representing the current datepicker options hash.

Documentation index


option( optionName, value )

Returns: void

Sets the value of the datepicker option associated with the specified optionName.

optionName

Type: String

The name of the option to set.

value

Type: Object

A value to set for the option.

Documentation index


option( options )

Returns: void

Sets one or more options for the datepicker.

options

Type: Object

A map of option-value pairs to set.

Code examples:

$( ".selector" ).tree( "option", { collapseDuration: 1000 } );

Documentation index


parentNode( li )

Returns: Object

Return parent li of the passed li

li

Type: String or Object

Node you want to get parent of. Object or selector string.

Documentation index


removeNode( li )

Returns: void

Remove a node from tree (node is not actually delete, but still in memory)

li

Type: String or Object

Node to remove. Object or selector string.

Documentation index


select( li )

Returns: void

Return a node

li

Type: String or Object

Node to select. Object or selector string.

Documentation index


selected( )

Returns: Object

Return selected node

Documentation index


uncheck( li )

Returns: void

Uncheck node

li

Type: String or Object

Node to uncheck. Object or selector string.

Documentation index


uncheckAll( )

Returns: void

Uncheck all tree elements

Documentation index


Events

add( event, element )

move( event, element )

remove( event, element )

collapse( event, element )

expand( event, element )

deselect( event, element )

Type: treedeselect

Defines function to handle deselect event

event

element

Documentation index


drop( event, element )

Type: treedrop

Defines function to handle drop event

event

element

Documentation index


select( event, element )

Type: treeselect

Defines function to handle select event

event

element

Documentation index


  • Frank

    HI very nice app. I think there’s one issue with the tree.
    In my opinion the parent box shouldn’t be checked unless ALL the children are checked first.
    Right now if there is more than one child and I check just one , its parent is checked and it shouldn’t be unless I check them all.

    • Valerio Galano

      Hi Frank,
      you should use this option:

      onCheck: { ancestors: ‘checkIfFull’ }

      I know: it is not documented yet. Sorry for this, I’m working on documentation.

  • Jon Anderson

    Hi Valerio,

    I’ve been using your jquery tree for a month or so and have come across a bug which I haven’t been able to solve. I have gathered a good deal of information about it though!

    When moving one node (A) into another node (B), the new parent node (B) gains two span types of elements (a ‘droppable-label ui-droppable’ and a ‘prepended ui-droppable’).
    This wouldn’t be a problem except that the parent node gains these elements exponentially. In fact, the number of sets of spans can be calculated by the equation
    s = ((3^x) + 1) / 2
    { where x is the number of times elements have been moved into the node }

    It appears that the moveNode:function code is causing this – using breakpoints, I have determined that the moveNode code is running the same number of times as is calculated by the above equation.
    This might not normally cause much of a problem, but it does slow down the page when you get to about 7 children elements moved into a parent (over 2000 spans).

    Any insight you could give towards fixing this bug would be excellent! Thanks!”

    • Valerio Galano

      Thanks for your detailed description of the problem. I’m going to open an issue on github about it.

  • Mark

    How are you licensing it? One of the source files hints at MIT, but it’s somewhat unclear to me whether I can actually use this.

    • Valerio Galano

      You are right. Sorry.

      It is under MIT license.

      I will specify it better in code.

  • Hi Valerio,
    If I put the “checkIfFull” ancestors options, I get a js error “too much recursion”.
    Do you know why? Thanks a lot!

  • Anubhav

    Hi Valerio,
    I want to build a tree which has a favorite icon and a lock icon after the node names. I am not able to insert the images after the node names in the tree.

    For more clarification my problem statement is :
    As i will fetch the tree all the nodes of trees should have locked (grey) and favorite icon (grey)after them. On click on the icon i will associate a action to it and change the fav or locked status for the node and turn the icon to a yellow ones.
    Can you please help me out by providing an example for inserting the images after the nodes of a tree.
    Thanks
    Anubhav

    • Valerio Galano

      Actually, you can simply put img tag after span tag for each node. This will work if you don’t add node dinamically and don’t need drag and drop.
      Then, you have to change icons using “collapse” and “expand” events that are not documented yet (sorry for this).

      If you need more specific help, please open a issue on https://github.com/daredevel/jquery-tree and upload some example code.

      Thanks.

  • karl

    a query,
    for the tree collapsed starts?

    • Valerio Galano

      Hi Karl,
      to understand how to set node’s initial state, please look at demo page (you can find link on top of this page).

  • How to set collapseAll default when begin start tree, Help me, thank so much!.

    • Valerio Galano

      Hi NamPN,
      look ad Live demo on top. Your tree should have class=”collapsed” attribute in each li element.

  • Hi Valerio,
    i found your onCheck – Event Option:
    onCheck: { node: ‘expand’ }
    How do i implement my own function here?
    onCheck: { myFunction() }
    won’t work….
    Best

  • Hi, Is there any way I can just append HTML to my already existing tree and ‘refresh’ the tree to accomodate all changes? I am planning to use AJAX

    • Valerio Galano

      Hi Varktohr,
      please give a look at live demo: tree manipulation example.

  • Perfect. This helps! Thank you!

  • varkhtohr

    Hi, Is there a way to NOT automatically check the descendants if I check ancestors?

    • Valerio Galano

      Try with option
      onCheck: {
      descendants: null
      }

  • Gondias

    Hello,
    I am using your tree and i would like to know if it is possible to uncheck a parent node when the last of the child nodes is unchecked. This way if a node has child nodes it would only be checked if there is at least one checked child node.

    Thanks in advance for your help and congrats for the great work you have done.

    • Valerio Galano

      Hi Gondias,
      I’m glad you like my work. I’m afraid that feature you described is actually missing.

      Please, if you want I work on this, open a issue at

      http://github.com/daredevel/jquery-tree/issues

      Thanks for your collaboration.

  • Hi, thanks for being very prompt in your responses, I have another question for you – Is there a way I can exclude a specific class of checkboxes from this tree behavior? For example i don’t want to check the descendants of a particular class of checkboxes. OR maybe I don’t want to automatically check all descendants when I check the top most checkbox in the tree. But I want to check descendants when I check any checkbox except this top most checkbox.

    Thanks for your help!

  • karl77

    hi brither
    I have a problem when you select a check box , when the father has only a child happens to me that problem that will not let me select the check box son.
    it should ete problem?
    thank’s bro

    • karl77

      jeje
      I found the solution a few comments above C:
      onCheck: {
      descendants: null
      }

  • Varkhtohr

    Hi. Does your code allow for disabled checkboxes?

  • Paul N

    I’m rather new to jQuery… sorry for what is probably a beginner question:
    How do I set “dnd” to “false” for the tree?

  • Paul N

    (nevermind… I was doing dnd:’false’ instead of dnd:false)

  • Amit Kumar Singh

    How to refresh checkbox tree jquery?

  • Gwenael

    Hi very nice work. I am trying to use it and I have a problem with the “selected” function. It doen’t seem to work even on your live demo page. Indeed there is no alert when you select or deselect and the button gives no result. Could you tell me if it’s possible to get the value of the checkbox and how?

    Thanks.

    • Valerio Galano

      Hi Gwenael,
      sorry for late reply. I think you found a bug. Last time I check this feature works correctly, while now is broken.

      Please, open an issue at http://github.com/daredevel/jquery-tree/issues about your problem and I’ll try to fix ASAP.

      Thanks you.

      • Pkumar

        Is this fixed. I am trying to use Selected and it’s not working with current code.

  • abellong

    Hi, it seems that lazy loading doesn’t work in the demo in http://htmlpreview.github.io/?https://github.com/daredevel/jquery-tree/blob/master/index.html
    `Initialize tree via ajax (lazy loading)’ shows nothing in my browser.

    • Valerio Galano

      Hi abellong,
      I’ll check as soon as possible. I’m sorry: this feature is a bit unstable.

      Thanks you.

  • its very usefull 🙂 thumbs up mirchu.net Team

    • Valerio Galano

      Thanks you!

  • Richeek

    Hey guys,
    I am using this plugin for my project. It has been super useful so far and does exactly what I want! However, when I try to create a big tree it becomes slow. I have summarizes by query in three questions:

    1. My Json string is around 400KB with a depth of 3 (parent -> children -> lots of grandkids 🙂 ) and it takes around 15s for the page to load if server passes full data (most of the time is spend by this plugin unfortunately). Is there a lazy loading kind of system where only say level 0 nodes are loaded then as user clicks on any node next level is loaded so on and so forth. I think its not present currently. So comes my second question:
    2. As a second approach maybe I will add children nodes dynamically, by making additional GET request to server and fetch additional data only when user clicks on parent node. I will then call addNode method to add node dynamically. However I can not get this addNode method to work as I want. Could you please tell me how to set “name”, “id”, “label” etc. to this method? I tried something like this (Node + Express):

    // To load the tree
    script.
    $(document).ready(function() {
    var data = !{JSON.stringify(pdses)};
    $(‘.pds-tree-data’).append(write2(JSON.stringify(data))); // Populate HTML
    $(‘#tree’).tree({}); // Apply tree formatting
    });

    // To add nodes dynamically
    script.
    $(document).ready(function() {
    $(‘.headers’).change(function(e) {
    var parentId = “#” + e.target.id;
    console.log(“ID ” + parentId);
    var tree10 = $(‘#tree’).tree({});
    tree10.tree(‘addNode’, {li: {‘class’: ‘leaf’}, label: “NAME”}, $(this)); // This works by node name is always “new node”
    $(this).addNode(li: {‘class’: ‘leaf’}, label: “NAME”}, $(this), 0); // This does not work
    e.stopPropagation();
    });
    //$(‘.leaf’).append(“MY new name”); // I can do this but its ugly
    });

    And in HTML I have something like this:

    div.form-group(id=”tree”, name=”myTree”)
    label.col-sm-2.control-label This is a tree
    div.col-xs-8.pds-tree-data

    3. I was looking at demo and got confused about how to call these methods. Does this code, creates a new tree every time its called or it will return some persistence object:
    var tree10 = $(‘#tree’).tree({});
    Reason I am asking is because to call any function, I need this object. So will calling ‘addNode’ create the tree over and over again? Forgive my ignorance if something is really obvious here, I am coming from Java world and trying to understand JQuery 🙂

  • Muhammed Riyas T

    Hi, its very usefull.

    I like to know how this tree work from json data, give me a sample node json object details(properties)

  • Hi, I faced with this error “Maximum call stack size exceeded”. Does anybody know how to fix it?. Thanks.

  • kathy

    Hi. I set collapsed and expand icon, but don’t show the icon. This is what I set

    .ui-icon-plus{
    background:transparent url(“~/Content/images/bullet_toggle_plus.png”);
    cursor:pointer;
    }

    .ui-icon-minus{
    background:transparent url(“~/Content/images/bullet_toggle_minus.png”);
    cursor:pointer;
    }

    $(document).ready(function () {
    $(‘#tree’).tree({
    collapseUiIcon: ‘ui-icon-plus’,
    expandUiIcon: ‘ui-icon-minus’,

    onCheck: {
    node: ‘collapse’
    },
    onUncheck: {
    node: ‘expand’
    },

    });

    Please let me know what I am wrong. Thanks.

  • Jorge Espartero

    HI,

    How to select node when node is checked. And How to deselect node when node is unchecked.