dynatree - Как прокрутить список до активного узла?

Question

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

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

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

---

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

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

Answer 1

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

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

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

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; 
    ... 
} 

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

Scroll to a div using jquery, jQuery scroll to element, How to scroll to an element in jQuery?, ...

Edit 2014-05 Начиная с Fancytree 2,0 AutoScroll был добавлен в качестве стандартной опции.

Answer 2

У меня была аналогичная проблема, и мне не удалось заставить scrollTop работать, как указано в примере выше. Я установил ее, изменив селектор из «Дерево папок» на «.dynatree-контейнер»:

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

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

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

Answer 3

Проблема при использовании $ ('. dynatree-container'), когда на странице имеется несколько деревьев, так как это будет попробуйте и выберите каждое дерево с этим классом. У меня много деревьев, поэтому мне нужно выбрать дерево с определенным идентификатором ... но я обнаружил, как и предыдущий человек, который пытается выбрать дерево по его id (e g '#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'); 

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

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

будет красиво положить ваш узел 150 пикселей вниз