GithubHelp home page GithubHelp logo

Collapsing the tree? about jqtree HOT 13 CLOSED

mbraak avatar mbraak commented on May 19, 2024
Collapsing the tree?

from jqtree.

Comments (13)

mbraak avatar mbraak commented on May 19, 2024 2

jqTree has no function for that.

You could do something like this:

var $tree = $('#tree1');
$('#collapse').click(function() {
  var tree = $tree.tree('getTree');
  tree.iterate(function(node) {

    if (node.hasChildren()) {
      $tree.tree('closeNode', node, true);
    }
    return true;
  });
});

$('#expand').click(function() {
  var tree = $tree.tree('getTree');
  tree.iterate(function(node) {

    if (node.hasChildren()) {
      $tree.tree('openNode', node, true);
    }
    return true;
  });
});

from jqtree.

mbraak avatar mbraak commented on May 19, 2024

You can use the autoOpen option to open nodes when the tree is loaded. See http://mbraak.github.com/jqTree/#tree-options-autoopen

You can also use the openNode function to open a node programmatically. This function is not documented yet.

For example in demo.html:

var node = $('#tree1').tree('getNodeById', 23);
$('#tree1').tree('openNode', node);

from jqtree.

sebakerckhof avatar sebakerckhof commented on May 19, 2024

But that will expand the tree, I want to do the opposite, so collapsing (closing) the tree

from jqtree.

mbraak avatar mbraak commented on May 19, 2024

Oops. There is no function for that yet. Would be a nice feature for the next release.

from jqtree.

mbraak avatar mbraak commented on May 19, 2024

The dev branch now contains the function closeNode.

var node = $('#tree1').tree('getNodeBydId', 23);
$('#tree1').tree('closeNode', node);

To close a node without animation:

$('#tree1').tree('closeNode', node, true);

from jqtree.

jprf avatar jprf commented on May 19, 2024

Hello,

Is there a way to do an expand all/collapse all?

Thanks,
~/Jota

from jqtree.

arunkumar2014 avatar arunkumar2014 commented on May 19, 2024

Hello
I need to append my child node below their parent node dynamically from db through ajax call. I tried with openNode, addNodeAfter its not viewing. But i tried with append node its showing the child node last of all the parent node.

from jqtree.

mbraak avatar mbraak commented on May 19, 2024

Let me see if I understand you correctly. You want to add a child node to a parent node; the new node must be the first child.

Is that correct?

from jqtree.

arunkumar2014 avatar arunkumar2014 commented on May 19, 2024

yes

from jqtree.

mbraak avatar mbraak commented on May 19, 2024

There is no 'add-first-child' function. But you can use the addNodeBefore function.

Here is an example:

// appendNodeFirst: add 'new_node' as first child to 'parent_node'
function appendNodeFirst($tree, new_node, parent_node) {
    if (parent_node.children && parent_node.children.length != 0) {
        // Parent has children; add before first child
        var first_child = parent_node.children[0];

        $tree.tree('addNodeBefore', new_node, first_child);
    }
    else {
        // Parent has no children; append node
        $tree.tree('appendNode', new_node, parent_node);
    }
}

var parent_node = $tree.tree('getNodeById', 1);

var new_node = {
    label: 'new child',
    id: 6
};

from jqtree.

urprasu avatar urprasu commented on May 19, 2024

how to merge the nodes

from jqtree.

urprasu avatar urprasu commented on May 19, 2024

how to replace rootnode child nodes

from jqtree.

mbraak avatar mbraak commented on May 19, 2024

@urprasu
Can you give give an example of how you want to merge nodes?

from jqtree.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.