访问 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 访问，但我无法在警报框中显示我的自定义属性以证明它实际上已被定义。如何在我的 JavaScript 函数中访问我的自定义数据属性？

谢尔顿

Answer 1

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

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

希望对您有所帮助！

访问 JavaScript 中的 FancyTree 节点数据

Accessing FancyTree Node Data in JavaScript

javascript

html

fancytree