JQ Tree Показать только выбранные узлы с родительским нажатием кнопки
Я должен показать только выбранные узлы и родителей, и скрыть остальные узлы при нажатии кнопки. Только ничего не происходит, когда я нажимаю кнопку.
JSFIDDLE
Код с комментированием запуска по нажатию кнопки
$('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/