Question

任何人都可以使用jstree 3.2.1

显示如何实现以下两件事的简单示例

向节点添加URL锚链接。
在单击相应节点时打开链接。

这可能看起来像是做了一些研究＆＃34;问题，但我花了很长时间看：jstree网站上的文档很糟糕，有很多论坛帖子（包括这里）不适用于最新版本，或者没有工作一点都不然后，Google网上论坛上的内容将在接下来的几天内发布 - 从2014年开始，没有回复。

我已经有一个jstree，它使用对PHP脚本的ajax调用进行填充。这将以json格式返回数据。

所以我回来的一个简短例子就是这样：

[{"id" : "ajson1", "parent" : "#", "text" : "Item One"}]

我试图做的就是在文本＆＃39;第一项＆＃39;并在点击时使其作为链接。

我尝试过这样的事情：

[{"id" : "ajson1", "parent" : "#", "text" : "Item One", "attr":{"href":"http://www.example.com/"}} }]

在呈现链接（使用Chrome开发工具检查时）或点击链接方面无效。

Answer 1

好的，好久不久，我想出来了！

我原来的json中的错误是attr应该是a_attr。这将获得文本“第一项”的链接。

示例：

[{"id" : "ajson1", "parent" : "#", "text" : "Item One", 
"a_attr":{"href":"http://www.example.com/"} }]

然后，为了使其转到URL，您可以使用以下内容：

$('#jstree').bind("select_node.jstree", function (e, data) {
    var href = data.node.a_attr.href;
    window.location.href = href;
});

Answer 2

回答你的问题：

向节点添加URL锚链接。

创建节点时，可以通过以下方式设置href属性：

$("#jstree").jstree("create_node", "#", { text: "customText", a_attr: { href: "customLink" } }, "last", false, false);

在单击相应节点时打开链接。

在标准浏览器中，这应该有效：

$("#jstree").on("click", ".jstree-anchor", function(evt)
{
    var link = $(evt.target).attr("href");
    window.open(link, '_blank');
});

这些解决方案不是明确不完整的jsTree文档的一部分！

Answer 3

要回答第2个问题（对于jstree 3.2.1），以下代码将使您的超链接有效，只有在指定后且仅在单击文本时才可以使用：

$("#jstree").on("select_node.jsTree", function (evt, data) {
    if (data.node.a_attr.href != "#" & data.event.bubbles) {
        window.open(data.node.a_attr.href, data.node.a_attr.target);
    }
    //do more stuff!
});

换句话说，如果您的节点没有链接（href =“＃”），则单击该链接将不会打开窗口。它还要求用户单击节点文本或图标以触发超链接。将自定义元素添加到节点时，这特别有用。

jstree 3.2.1节点上的链接

3 个答案: