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

Jsfiddle

http://jsfiddle.net/375emow0/

Код с комментариями начать нажатием кнопки
$ ('button [name = "mentalTree-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();`
`})`
`})`
0
Chiemi Sayuri 10 Ноя 2018 в 23:45

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/

0
Stevangelista 11 Ноя 2018 в 00:20