任何人都可以使用jstree 3.2.1
显示如何实现以下两件事的简单示例这可能看起来像是做了一些研究"问题,但我花了很长时间看: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开发工具检查时)或点击链接方面无效。
答案 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)
回答你的问题:
- 向节点添加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文档的一部分!
答案 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 =“#”),则单击该链接将不会打开窗口。它还要求用户单击节点文本或图标以触发超链接。将自定义元素添加到节点时,这特别有用。