Загрузить с помощью jsTree - PullRequest
Новая
       20

Загрузить с помощью jsTree

1 голос
/ 24 июня 2011

Я помогаю другу попытаться настроить jsTree.Мы пытаемся сделать так, чтобы при щелчке по узлу страница загружалась в другой раздел в сторону.Тем не менее, кажется, что все работает, но .load по какой-то причине не срабатывает.Я использовал оповещение для проверки thisItem, и оно определено и является правильной переменной.

$(function() {

    $('.tree').jstree().delegate("a", "click", function(event, data){
        event.preventDefault();
        var thisItem = $(this).attr('id');
        thisItem += ".html";
        alert(thisItem);
        $('.table').load(thisItem);
        });

});

Это HTML-код: 

<div class = "tree">  
    <ul>
    <li id = "1"><a href = "" id = "1">Test 1</a>
        <ul>
        <li id = "2"><a href = "" id = "2">Test 2</a></li>
        </ul>
    </li>
    </ul>
</div>
<div class = "table">
</div>

У меня есть страницы, соответствующие этим идентификаторам, которые я хочу загрузить в table.Это работает без jstree с обычным .click ... но я бы хотел использовать его с jstree.

Я просто не могу понять, почему он не загружает страницу при использовании jstree ... но он будет работать, когда я не использую jstree.Я даже пытался сделать .click на .tree li вне jstree, но это тоже не сработало.(Если я избавлюсь от всего, что связано с jstree, этот код здесь работает.) 

$('.tree li').click(function() {
        var thisItem = $(this).attr('id');
        thisItem += ".html";
        $('.table').load(thisItem);
    });

Примечание. Это всего лишь тест для более динамичной части проекта.

Ответы [ 2 ]

3 голосов
/ 26 июня 2011

Вы можете выполнить свой собственный код, привязав пользовательские события (some-event.jstree) к элементу jstree, в данном случае вы ищете select_node.jstree: 

$('.tree').bind("select_node.jstree", function (e, data) {
   var $obj = data.rslt.obj; // this will be a jquery object representing the <li> you've clicked
   var url = $obj.attr("id") + ".html";
   $('.table').load(url);
});

Информация об объекте data, переданном в функцию обратного вызова (из документации jstree ): 

{
   "inst" : /* the actual tree instance */,
   "args" : /* arguments passed to the function */,
   "rslt" : /* any data the function passed to the event */,
   "rlbk" : /* an optional rollback object - it is not always present */
}

Надеюсь, это поможет.

0 голосов
/ 24 июня 2011

Посмотрите первую демонстрацию здесь: http://www.jstree.com/documentation/core#demos

Ваш обработчик кликов не работает, так как я считаю, что сам плагин освобождает обработчики кликов, поскольку они используют свои собственные пользовательские события.Вы можете связать эти события с помощью той же методологии, что и в первой демонстрации. 

$("#demo1").jstree("toggle_node","#phtml_1");
$("#demo1").bind("open_node.jstree close_node.jstree", function (e) {
    //Stuff
});

События выглядят в форме " function .jstree".Таким образом, событие open_node.jstree наступает после того, как происходит функция open_node.Вы можете найти список функций по той же ссылке выше.

...