CODEWITHSUNDEEP
jqueryjquery-plugins
NobodyMan
NobodyMan

Reputation: 2441

jQuery Treeview: programmatically open a branch

I'm using the jQuery Treeview plugin, and I'm wondering if it's possible to programatically open a branch.

I'm using a treeview in conjunction with a series of checkboxes. Each LI node contains checkbox and a label. The user may expand/collapse branches and check the desired options. However, the user may indirectly invoke an ajax call that causes some of the checkboxes to become checked (including checkboxes that are not visible because they are inside of a collapsed node).

So if my ajax callback checks any of my checkboxes I would like to open the branch that contains those checked boxes. Here was my first attempt:

$('#my_Treeview').find(":checked").closest("li").addClass("open")

Unfortunately this does not work. Because the treeview contains quite a few elements it isn't practical for me to simply expand all the branches in the first place.

Upvotes: 1

Views: 6174

Answers (3)

Harald Wirth
Harald Wirth

Reputation: 21

I had a similar problem and fixed it like this:

$("span:contains('" + something + "')").parent().addClass('open').find('ul').css({'display':'block'});

This way I search for a specific entry in the tree and open it by changing 

<ul id="browser" class="treemenu treeview">
  <li class="expandable"><span>something</span>
    <ul style="display: none;">
      <li>...</li>
      ...
    </ul>
  </li>
</ul>

into

<ul id="browser" class="treemenu treeview">
  <li class="open expandable"><span>something</span>
    <ul style="display: block;">
      <li>...</li>
      ...
    </ul>
  </li>
</ul>

...and that worked just fine!

Upvotes: 2

electron-zenit
electron-zenit

Reputation: 46

It is feasible. But not via .addClass("open"). That way was, at least for me, unsuccessful . To open only your own nodes, in state when all nodes are collapsed, try this:

.parents('ul').show();)

An example:

function openMyOwnBranchInTree(idLeaf) {                    
        $('#table' + idLeaf).parents('ul').show();                
}

Upvotes: 3

simshaun
simshaun

Reputation: 21466

It doesn't look like it contains any methods for opening branches.

To do it manually, you'll need to manually modify classes and show/hide UL visibility.

Check out their demo, take a look at what classes a UL's parents obtain when its expanded and when its collapsed. Manually apply those classes and then just do a .show() on the UL. That should be it.

Alternatively, (and this is recommended by the creator of Treeview), check out jsTree. I've used it on numerous occasions and love it. It allows you to do all that you've mentioned.

Upvotes: 0

Related Questions