Question

我使用JSTree显示具有以下语法的树：

<ul>
    <li>Node 1
       <ul>
          <li url="anUrl.html">child node 1</li>
          <li url="anSecondUrl.html">child node 2</li>
       </ul>
    </li>
</ul>

当我们选择子节点1时如何找到相应的URL？

由于

Answer 1

您必须使用activate_node.jstree事件。它传入包含节点的数据对象。您从节点获取ID并在DOM中查找，然后您可以访问相关的属性。我的示例可能与您使用分层JSON数据对象初始化树时的情况略有不同。

var treeMain;

$(document).ready(function ()
{

    treeMain = $('#treeMenus').jstree({
        core: {                                // this is just my optional configuration stuff for the tree
            data: sData,                       // I pass in a hierarchical JSON datasource calls sData
            multiple: false,
            error: function (evt, data) {
                alert(evt);
            },
            check_callback: null,              // had to include this to get the builtin popup menu to work
        }, 
        themes: { stripes: true },
        plugins: ["contextmenu", "dnd", "search", "state", "types", "wholerow"]

    });

    treeMain.on("activate_node.jstree", function (evt, data) {
        var oElement = $("#" + data.node.id)[0];
        var sURL = oElement.attributes["class"].value;  // you would use URL here, I used class in my test since I knew it would have that attribute
    });
}

Answer 2

好的！经过长时间搜索后，对我来说工作正常。

我一直在寻找根据节点类型（类别或产品）隐藏或显示Div的方式。我在li：或

中添加了type属性

这是我的代码：

$(function () {

    $('#jstree').jstree();

    // To show or hide a specific DIV according to the type value
    $('#jstree').on('changed.jstree', function (e, data) {
        var oElement = $("#" + data.node.id)[0];
        var type = oElement.attributes["type"].value;   
        if (type == 'prod') {
            show_prod();
        } else {
            hide_prod();   
        }
    }); 
});

JSTree：获取节点的属性

2 个答案: