JQ Tree 仅显示选定的节点及其父节点单击按钮

Question

我必须只显示选定的节点和父节点，并在单击按钮时隐藏其余节点。单击按钮时没有任何反应。

jsfiddle

带注释的代码单击按钮开始
$('button[name="psychTree-selected"]').click(函数(节点){

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();
}
})
})

我知道如何隐藏选定的节点，但显然未选定的节点没有可识别的 class 供我通过 http://jsfiddle.net/tom1nkfr/

搜索和隐藏

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

Answer 1

我推荐一种更简单的方法 - 看起来您正在尝试找到所有选定的节点，将它们推入 array，然后遍历整个 jsTree 并隐藏任何节点不是在你创建的array中。相反，利用 jsTree 已经应用于选定节点的 CSS 类并隐藏所有没有它的节点。

简化的 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) 不是 parent/folder 节点的节点。

工作 JSFiddle：http://jsfiddle.net/tbwjau5m/

JQ Tree 仅显示选定的节点及其父节点单击按钮

JQ Tree Show Only Selected Nodes With Their Parent On Button Click

jquery

jqtree