JQuery Dynatree - 텍스트 필드 검색을 기반으로 트리보기 다시 정렬

Question

계정 레코드에 대한 트리보기를 만들고 싶습니다. 그래서 저는 Dynatree를 사용하여 나무를 보았습니다. 그것은 잘 작동합니다. 이제 나는 검색 기능을 구현하는 것을 좋아한다.

javascript를 사용하여 Visulforce 페이지에서 Dynatree 필터를 만드는 방법.

텍스트 필드에서 검색하여 트리를 다시 정렬하려고합니다.

필터에 대해 다음 코드를 찾았으나이 방법을 사용하지 마십시오. 코드 아래에서 어디에서 사용해야하는지 알려주세요.

코드 조각은 :

DynaTreeNode.prototype.search = function(pattern){ 

    if(pattern.length < 1 && !clear){ 
     clear = true; 
     this.visit(function(node){ 
      node.expand(true); 
      node.li.hidden = false; 
      node.expand(false); 
     }); 
    } else if (pattern.length >= 1) { 
     clear = false; 
     this.visit(function(node){ 
      node.expand(true); 
      node.li.hidden = false; 
     }); 

     for (var i = 0; i < this.childList.length; i++){ 
      var hide = {hide: false}; 
      this.childList[i]._searchNode(pattern, hide); 
     } 
    } 
}, 

Answer 1

당신은 당신의 검색어를 기반으로 필터링하는 기능 아래에 사용할 수 있습니다.

<input type="text" onchange="filterNodes(this.value);return false;" /> 

function filterNodes(searchTerm) { 
     // Only show nodes matching the specified search term 
     var startNode = $("#divTree").dynatree("getRoot"); 
     startNode.visit(function(node) { 
      if (node.isVisible() && node.data.title) { 
       // Filter currently visible non-root nodes. 
       if (node.data.title.indexOf(searchTerm) >= 0) { 
        // Make sure we and all our parents are visible 
        node.visitParents(function(node) { 
         $(node.li).show(); 
         return (node.parent != null); 
        }, true); 
        // Terminate the traversal of this branch since the node matches 
        return 'skip'; 
       } 
       else { 
        // Hide the node. 
        $(node.li).hide(); 
       } 
      } 
     }); 
    } 

하나의 노드가 일치하면 전체 분기를 필터링합니다.