javascript 使用 jstree ui 时，如何在单击时获取 jstree 中的叶节点以打开它们的超链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18611317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get I get leaf nodes in jstree to open their hyperlink when clicked when using jstree ui
提问by Paul Taylor
I display a hierachial structure using jtree, the data is as follows
我用jtree显示一个层次结构，数据如下
<div id="songchanges"><ul>
<li id="phtml_1">
<a href="#">C:</a>
<ul>
<li id="phtml_2">
<a href="#">Music</a>
<ul>
<li id="phtml_3">
<a href="#">Z</a>
<ul>
<li id="phtml_4">
<a href="#">Hans Zimmer</a>
<ul>
<li id="phtml_5"><a href="FixSongsReport_00107_2013-09-04-11-11-55_body_blqxgT7E7YOmnBbjFXQGUg==.html">C:\Music\Z\Hans Zimmer\Hannibal</a></li>
</ul>
</li>
<li id="phtml_6">
<a href="#">The Zombies</a>
<ul>
<li id="phtml_7"><a href="FixSongsReport_00107_2013-09-04-11-11-55_body_er7mjWKbAaYaf8DygP84Fg==.html">C:\Music\Z\The Zombies\Best of The Zombies</a></li>
<li id="phtml_8"><a href="FixSongsReport_00107_2013-09-04-11-11-55_body_56XgVDhsjEKWXFd4OzVldA==.html">C:\Music\Z\The Zombies\The Zombies featuring Colin Blunstone & Rod Argent</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
and it displays okay, as a filesystem.
它显示正常，作为文件系统。
This is the part of a frameset and is displayed on the left handside of the screen and when user clicks on leaf node I want it to open the attached link on the right handside (as it does before i applied jtree stuff to it)
这是框架集的一部分，显示在屏幕的左侧，当用户单击叶节点时，我希望它打开右侧的附加链接（就像在我应用 jtree 之前那样）
My jtree configuration is as follows
我的jtree配置如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="songkong.css">
<base target="main">
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript" class="source below">
$(function () {
$("#songchanges")
.jstree({
"plugins" : ["themes","html_data","ui","crrm","hotkeys"],
"core" : { "initially_open" : [ "phtml_1" ] }
})
.bind("loaded.jstree", function (event, data) {
});
$("#songchanges").bind("open_node.jstree", function (e, data) {
data.inst.select_node("#phtml_1", true);
});
});
</script></head>
I read demo3 example
我阅读了 demo3 示例
$(function () {
$("#demo3")
.jstree({ "plugins" : ["themes","html_data","ui"] })
// 1) if using the UI plugin bind to select_node
.bind("select_node.jstree", function (event, data) {
// `data.rslt.obj` is the jquery extended node that was clicked
alert(data.rslt.obj.attr("id"));
})
// 2) if not using the UI plugin - the Anchor tags work as expected
// so if the anchor has a HREF attirbute - the page will be changed
// you can actually prevent the default, etc (normal jquery usage)
.delegate("a", "click", function (event, data) { event.preventDefault(); })
});
and tried it but the .delegate option had no effect , I assume i have to remove"ui" plugin but trying that my page just looks like Ive never applied jstree.
并尝试过，但 .delegate 选项无效，我假设我必须删除“ui”插件，但尝试使我的页面看起来就像我从未应用过 jstree。
The bind option sort of worked, in that it displays an annoying alert window displaying the id every time i click on any node. So how can I change it to open the link in the right handside instead ?
绑定选项有点工作，因为它会显示一个烦人的警报窗口，每次我单击任何节点时都会显示 id。那么如何更改它以打开右侧的链接呢？
UpdateFound this answer Jstree nodes don't work when ui plugin is used
更新发现这个答案Jstree 节点在使用 ui 插件时不起作用
Adding
添加
.bind("select_node.jstree", function (e, data) {
var href = data.rslt.obj.children("a").attr("href");
// this will load content into a div:
$("#contents").load(href);
// this will follow the link:
document.location.href = href;
})
Now the link is opened when clicked on, unfortunately it replaces the lefthandside frame with the page, whereas I want it put it into the right hand pane, any ideas.
现在链接在点击时打开，不幸的是它用页面替换了左侧框架，而我希望它把它放在右侧窗格中，任何想法。
回答by Hubeyb ?zkul
for new versions;
对于新版本；
$("#demo2").jstree().bind("select_node.jstree", function (e, data) {
var href = data.node.a_attr.href;
document.location.href = href;
});
回答by Alper Aydingül
My solution for v3.3.4, it works fine!
我的 v3.3.4 解决方案，效果很好！
tree.jstree().on("click", ".jstree-anchor", function() {
document.location.href = this.href;
});
回答by Vini
I know this post is kinda old, but here what I did to make this work :
我知道这篇文章有点旧，但在这里我做了什么来完成这项工作：
html:
html：
<div id="entryPointTree">
<ul>
<li>Produits des mains
<ul>
<li><a href="http://www.google.ca" class="jstree-clicked">Lien 1</a></li>
<li>item 2</li>
</ul>
</li>
<li>Produits des pieds</li>
</ul>
</div>
js:
js：
$(document).ready(function() {
$("#entryPointTree").jstree({ "plugins" : ["themes","html_data","ui"] });
$("#entryPointTree li").on("click", "a",
function() {
document.location.href = this;
}
);
});
回答by user193887
Try This.
试试这个。
$("#demo2").jstree().bind("select_node.jstree", function (e, data) {
var href = data.rslt.obj.children("a").attr("href");
document.location.href = href;
// $("#the_div").load(href);
}) ;
回答by AlphaCactus
None of the other answers do what I want: multiple <a>tags in the title of the node. This is what worked for me:
其他答案都没有做我想要的：<a>节点标题中有多个标签。这对我有用：
HTML
HTML
<div id="object-tree">
<ul>
<li>SomeTitle <a href="/link1" target="_blank">link1><a href="/link2" target="_blank">link2</a></li>
</ul>
</div>
Javascript
Javascript
jQuery('#object-tree').jstree().bind("select_node.jstree", function (e, data) {
// Allow links to work from within jstree nodes
window.open( jQuery(data.event.originalEvent.originalTarget).attr('href'), '_blank');
});
