Dynatree - Как перейти к активному node?

У меня есть dynatree с фиксированной высотой и вертикальной полосой прокрутки.

node.activate(); выбирает node, который я ищу, но не перемещает вертикальную полосу прокрутки, поэтому мне нужно прокручивать вручную, чтобы увидеть активный node.

Как прокручивать его программно?

Благодаря mar10 я решил эту проблему:

var activeLi = node.li;
$('#tree').animate({
    scrollTop: $(activeLi).offset().top - $('#tree').offset().top + $('#tree').scrollTop()
}, 'slow');

Ответ 1

Dynatree не имеет встроенной функции scrollTo. Но вы должны иметь возможность использовать один из существующих методов и плагинов, как только у вас есть элемент DOM, который вы хотите сделать видимым.

В вашем случае у вас уже есть объект node, поэтому вы можете получить связанный тег <li> и <span> с помощью node.li или node.span.

В общем случае вы можете получить активный node в любое время, позвонив

var node = $("#tree").dynatree("getActiveNode");
// or
var node = $("#tree").dynatree("getTree").getActiveNode();

затем получить связанный элемент DOM:

var activeLI = node && node.li;

или обработать событие активации:

onActivate: function(node) {
    var activeLI = node.li;
    ...
}

Как только у вас есть элемент, используйте стандартный метод:

Выделите div с помощью jquery, jQuery выделите элемент, Как прокрутить элемент в jQuery?, ...

Редактировать 2014-05 Начиная с Fancytree 2.0 autoScroll был добавлен как стандартная опция.

Ответ 2

У меня была аналогичная проблема, и мне не удалось заставить scrollTop работать, как указано в примере выше. Я исправил его, изменив селектор от "#tree" до ".dynatree-container":

$('.dynatree-container').animate({ // animate the scrolling to the node
  scrollTop: $(activeLi).offset().top - $('.dynatree-container').offset().top + $('.dynatree-container').scrollTop()
}, 'slow');

Это должно заставить вас идти и сэкономить несколько часов фрустрации (:

Кстати, я использую dynatree версии 1.22 и jquery 1.8.3 и jquery ui 1.9.2.

Ответ 3

Возникает проблема при использовании $('. dynatree-container'), когда на странице есть несколько деревьев, так как это будет пытаться выбрать каждое дерево с этим классом. У меня много деревьев, поэтому мне нужно выбрать дерево с определенным идентификатором... но я обнаружил, что предыдущий человек, который пытается выбрать дерево по его идентификатору (например, "#tree" ), не работает. Итак, что будет...? что-то вроде = $( "# prevPageTree" ). dynatree ( "getTree" ). offset тоже не работает...

Несколько минут спустя: хорошо, понял, как это сделать. Развертывание в отладчике Chrome показывает, что класс .dynatree-container фактически привязан к элементу <ul> , вставленному dynatree под элементом #tree, используемым для инициализации экземпляра dynatree. Поэтому вам нужно сделать что-то вроде

$("#tree ul").animate({ // animate the scrolling to the node
     scrollTop: $(activeLi).offset().top - $('#tree ul').offset().top + $('#tree ul').scrollTop()
}, 'slow');

И если, как и я, вы не хотите, чтобы он прокручивал node в верхней части окна, а затем

scrollTop: $(activeLi).offset().top - $('#prevPageTree ul').offset().top + $('#prevPageTree ul').scrollTop() - 150

будет удобно помещать node 150 пикселей вниз