JS Tree ссылки не активны - PullRequest
       33

JS Tree ссылки не активны

13 голосов
/ 05 декабря 2011

Я новичок в 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>"

Ответы [ 8 ]

15 голосов
/ 18 апреля 2014
            .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;
 })
3 голосов
/ 02 июня 2013

Я знаю, что это старый, но я пришел сюда в поисках быстрого решения. Lubor Bílek в основном верен, но имейте в виду, что jsTree свяжет родительский элемент <li> кликаемого элемента привязки.

Я решил это, выполнив:

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

Таким образом, событие будет привязано к дочернему элементу <a> <li> вместо самого <li>, так что вы можете иметь атрибут href на своих якорях вместо элементов списка.

2 голосов
/ 13 января 2012

Я думаю, вам нужно явно написать обработчик кликов для ссылок на узлы дерева. JsTree принимает событие click для себя и не позволяет ему перейти на страницу перенаправления.

Я бы попробовал пойти по этому пути:

$('#mainMenu').bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.attr("href"); 
});
1 голос
/ 27 августа 2014

Обычно нам нужно контролировать действие обоих «Контейнерных узлов» и «Дочерних узлов» вместе.

Таким образом, мы можем сделать что-то вроде:

$("#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, которые проверяют, не имеет ли узел дочерних элементов.

1 голос
/ 29 мая 2014

Попробуйте это:

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

Благодаря делегированию события jQuery это событие будет делегировано <a> элементам. если вы не используете делегирование событий, оно сработает только в первый раз, когда вы щелкнете каждый якорь.

1 голос
/ 21 мая 2014

Я решил эту проблему с помощью грубой силы

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

красиво и просто.

1 голос
/ 01 апреля 2014

Я пытаюсь этот код:

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

0 голосов
/ 24 марта 2014

Я нахожу простой способ.

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

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

Я обнаружил, что jstree использует класс "jstree-anchor" для списков li.Итак, я могу найти ссылку href из этого объекта, я могу создать эту ссылку без каких-либо ограничивающих функций.

...