jstree 3.2.1节点上的链接

时间:2016-08-22 14:07:03

标签: jquery jstree

任何人都可以使用jstree 3.2.1

显示如何实现以下两件事的简单示例
  1. 向节点添加URL锚链接。
  2. 在单击相应节点时打开链接。
  3. 这可能看起来像是做了一些研究"问题,但我花了很长时间看:jstree网站上的文档很糟糕,有很多论坛帖子(包括这里)不适用于最新版本,或者没有工作一点都不然后,Google网上论坛上的内容将在接下来的几天内发布 - 从2014年开始,没有回复。

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

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

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

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

    我尝试过这样的事情:

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

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

3 个答案:

答案 0 :(得分:3)

好的,好久不久,我想出来了!

我原来的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;
});

答案 1 :(得分:0)

回答你的问题:

  
      
  1. 向节点添加URL锚链接。
  2.   

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

$("#jstree").jstree("create_node", "#", { text: "customText", a_attr: { href: "customLink" } }, "last", false, false);
  
      
  1. 在单击相应节点时打开链接。
  2.   

在标准浏览器中,这应该有效:

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

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

答案 2 :(得分:0)

要回答第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 =“#”),则单击该链接将不会打开窗口。它还要求用户单击节点文本或图标以触发超链接。将自定义元素添加到节点时,这特别有用。