JQ Tree Показать только выбранные узлы с родительским нажатием кнопки

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

JSFIDDLE

http://jsfiddle.net/375emow0/

Код с комментированием запуска по нажатию кнопки
$('button[name="psychTree-selected"]').click( function(node) {

get the selected nodes
nodesSelected = $('#psychTree').tree('getSelectedNodes');

create an array for shown nodes
nodeIdsToStay = [];

walk through selected nodes
nodesSelected.forEach( function(node) {
var path = $('#psychTree').tree('getData');
path.forEach(function(n) {
if (nodeIdsToStay.indexOf(n)===-1) {
nodeIdsToStay.push(n);
}
})
})

hide the nodes not in the array
$('#psychTree').find('li').each( function(){
if ( nodeIdsToStay.indexOf(this.id) === -1 ) {
$(this).hide();
}
})
})

Я знаю, как скрыть выбранные узлы, но, по-видимому, у невыбранных узлов нет идентифицируемого класса для поиска и скрытия по http://jsfiddle.net/tom1nkfr/

`$('button[name="psychTree-selected"]').click( function() {`
`$('#psychTree').find('.jqtree-selected').each( function(){`
`$(this).hide();`
`})`
`})`

1 ответ

Решение

Я бы рекомендовал более простой подход - похоже, вы пытаетесь найти все выбранные узлы, подтолкнуть их в arrayзатем перебирая все jsTree и скрывая все узлы, не входящие в array Вы создали Вместо этого используйте CSS-классы, которые jsTree уже применяет к выбранным узлам, и просто скройте все те, у которых его нет.

Упрощенный JS:

$('button[name="psychTree-selected"]').click(function() {
  $('#psychTree li.jqtree_common').each(function(index,elem){
    if(!$(elem).hasClass('jqtree-folder') && !$(elem).hasClass('jqtree-selected')){
        $(elem).hide();
    }
  });
})

По-прежнему срабатывает при нажатии кнопки, но теперь он перебирает все узлы дерева и скрывает все, которые (1) не выбраны и (2) не являются родительскими / папочными узлами.

Работающий JSFiddle: http://jsfiddle.net/tbwjau5m/

Другие вопросы по тегам