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

Я помогаю другу настроить 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);
    });

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


jquery jquery-plugins jstree
person Bri    schedule 24.06.2011    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете выполнить свой собственный код, привязав пользовательские события (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 */
}

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

person Björn    schedule 26.06.2011

arrow_upward
0
arrow_downward

Посмотрите первую демонстрацию здесь: 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. Вы можете найти список функций по той же ссылке выше.

person Adam Terlson    schedule 24.06.2011