在 JavaScript 中访问 FancyTree 节点数据

Question

我是第一次使用 FancyTree，我想定义一些自定义节点数据，特别是用于创建树的 HTML 数据中名为“content”的属性：

    <li id="xxxx" data-content="true"  class="folder">

我有一个用 JavaScript 编写的 init 事件处理程序，我想在那里访问我的自定义数据属性：

init: function(event, data, flag)
   {
    var tree = $("#tree").fancytree("getTree");
    node = tree.getNodeByKey(key);
    var data = node.data;

在一个在线教程中，我看到我的自定义属性可以作为 node.data.content 访问，但我无法在 alert 框中显示我的自定义属性来证明它是实际定义。如何在我的 JavaScript 函数中访问我的自定义数据属性？

谢尔顿

Answer 1

好的，所以我终于让它工作了。你接近得到你的结果。

key 变量是一个字符串，代表树中每个 LI 元素的“id”属性。您将获得具有该密钥的节点。获取节点后，您可以检索与该节点关联的自定义数据属性。由于我们的“数据”变量是一个包含键/值的对象，因此您需要在数据对象上调用它的“键”名称来检索值，例如“data.content”。

JS

$(function () {
    // using default options
    //Caching DOM element
    var $myTree = $("#tree").fancytree();
    // Get the DynaTree object instance
    var tree = $myTree.fancytree("getTree");
    //Set my key
    var key = "id1";
    //Get the node
    var node = tree.getNodeByKey(key);
    //Get the custom data attribute associated to that node
    var data = node.data;
    //data is an object so, data.content will give you the value of the attribute
    alert(data.content);
});

JSFIDDLE

希望这会有所帮助！