Question

我是Jquery和JS Tree的新手，但学会喜欢它。我已经设定使用php生成的xml建立树状菜单（参见下面的代码）。它起作用预期有一个例外 - 链接未激活。

我知道有些基本的东西我不明白。短期我只是希望链接作为普通链接。长期我希望他们触发ajax调用，重新加载页面上的特定div。

有人能指出我正确的方向吗？非常感谢你的帮助！

$(function () {
        $("#mainMenu").jstree({
                xml_data : { data : <?php $menu->deliver(); ?> },
                core : { animation : 1000 }
                ui : { select_limit : 1, selected_parent_close : false },
                themes : { theme : "default", dots : true, icons : false },
                types : { types : { "heading" : { select_node : true } } },
                plugins : [ "themes", "xml_data", "ui", "types" ]
        });
});

示例xml（单项）：

"<root><item id='pubPages_home' parent_id='0'><content><name href='?
a=pubPages&amp;f=home'>Public Home</name></content></item><root>"

Answer 1

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

jstree版本：“3.0.0”， jquery：最后

<强>更新或者对我来说最好的方式：

.bind("select_node.jstree", function (e, data) {
  $('#jstree').jstree('save_state');
 }) ;

.on("activate_node.jstree", function(e,data){
   window.location.href = data.node.a_attr.href;
 })

Answer 2

我知道这是旧的，但我来到这里寻找快速解决方案。 LuborBílek大多是正确的，但请记住，jsTree将绑定所单击的锚元素的父<li>。

我通过以下方式解决了这个问题：

.bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.find('a').attr("href"); 
});

这样，该事件将绑定到<a>的子<li>而不是<li>本身，这样您就可以在锚点上使用href属性而不是列表项目

Answer 3

我认为您需要为树节点链接显式编写单击处理程序。 JsTree为自己接受click事件，不要让它进入重定向页面。

我会尝试这样：

$('#mainMenu').bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.attr("href"); 
});

Answer 4

我试试这段代码：

window.location.href = data.rslt.obj.find('a').attr("href");

它引发了data.rslt未定义的错误，所以我无法用它来获取href！

这是我的可用代码：

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

与jstree的版本有关吗？我的jstree版本：3.0.0-bata10

Answer 5

我现在用一点暴力解决了这个问题

<li id="child_node_1"><span onClick="javascript:window.location.href='your_page.html'" title="Lassie come home!">your text here</span></li>

美好而轻松。

Answer 6

试试这个：

jQuery("#mytree ul").on("click","li.jstree-node a",function(){
    document.location.href = this; 
});

感谢jQuery event delegation，此活动将委托给<a>元素。如果您不使用事件委派，则只会在您第一次单击每个锚点时触发。

Answer 7

通常我们需要同时控制“容器节点”和“子节点”的操作。

所以我们可以这样做：

$("#jstree-div").jstree().delegate("a","click", function(e) {
            if ($("#jstree-div").jstree("is_leaf", this)) {
                document.location.href = this;
            }
            else {
                $("#jstree-div").jstree("toggle_node", this);
            }
        });

“is_leaf”是jsTree函数之一，用于检查节点是否没有子节点。

Answer 8

我找到了一个简单的方法。

$('#'+target).jstree({ 'core' : {
    'data' : treeInfo
} });

$(".jstree-anchor").click(function()
{
    document.location.href = this; 
});

我发现jstree使用了＆＃34; jstree-anchor＆＃34; li列表的类。所以，我可以从这个对象找到href链接，我可以在没有任何边界函数的情况下建立这个链接。

JS Tree链接未激活

8 个答案: