Question

当我点击树外的按钮时，我试图从树中获取所有节点的列表。我从树中获得了所有选定节点的列表，但是从树中得到了所有节点列表的问题。

这是我的代码：

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

我试试这个但没有工作

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

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

Answer 1

您只需访问source选项。

如果动态修改树，则需要恢复根节点的子节点，并仅获取所需的属性。你有一个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)

Answer 2

您可以尝试这样

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

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

从fancytree插件获取所有节点

2 个答案: