CODEWITHSUNDEEP
javascriptjqueryfancytree
BCM
BCM

Reputation: 675

Get All node from fancytree plugin

I am trying to got list of all node from tree, when click button outside tree. I got list of all selected node from tree, but having problem with got list of all node from tree.

Here is my code:

$(document).on('click', '.del', function () {
    var selKeys = $.map($('#tree1111').fancytree('getTree').getSelectedNodes(), function (node) {
        return node;
    });
});

I try this but not working

var allKeys = $.map($('#tree1111').fancytree('getTree'), function (node) {
    return node;
});

$.each(allKeys, function (event, data) {
alert(data.key)
});

Upvotes: 3

Views: 9055

Answers (2)

Tamilarasi
Tamilarasi

Reputation: 71

You can try like this

var allKeys = $.map($('#tree1111').fancytree('getRootNode').getChildren(), function (node) {
        return node;
    });

$.each(allKeys, function (event, data) {
alert(data.key)
});

Upvotes: 1

JotaBe
JotaBe

Reputation: 39004

You simply have to access the source option.

If the tree is modified dynamically, you need to recover the children of the root node, and get only the properties you need. You have a lot of possible ways to do it.

var source = [
    {title: "Node 1", key: "1"},
    {title: "Folder 2", key: "2", folder: true, children: [
      {title: "Node 2.1", key: "3"},
      {title: "Node 2.2", key: "4"}
    ]}
  ];

$('#tree').fancytree({
  source: source
  });

// Get the tree
var tree = $('#tree').fancytree('getTree');

// Dynamically add new node
var folder2 = tree.findFirst('Folder 2');
folder2.addNode({title:'New node'});

// original data
var source = tree.options.source;
$('#original').html(JSON.stringify(source,null,2));


// get the tree nodes
var root = tree.getRootNode();
var nodes = root.children;
console.log(root);
console.log(nodes);
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.15.0/skin-win8/ui.fancytree.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.15.0/jquery.fancytree-all.js"></script>


<div id="tree"></div>

<b>Original data</b>
<pre id="original"></pre>

<b>Data recovered from modified tree:</b>
Please, see the console. It cannot be directly converted to JSON because it has circular references (child to parent)

Upvotes: 2

Related Questions