JQuery Dynatree - 按名稱搜索節點

Question

我想開始在我的頁面上使用Dynatree，但是我可能需要按名稱搜索我的樹。你知道如何做到這一點？

Answer 1

目前還沒有搜索功能，但你可以使用這樣的事情（未測試）

var match = null; 
tree.visit(function(node){ 
    if(node.data.title === "foo"){ 
     match = node; 
     return false; // stop traversal (if we are only interested in first match) 
    } 
}); 
alert("Found " + match); 

Answer 2

我需要有不僅匹配的節點，也是整個路徑到這些節點。我寫了這個功能，它適用於我。

修改爲庫：

var clear = true; 

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

DynaTreeNode.prototype._searchNode = function(pattern, hide){ 

    if (this.childList){ 
     // parent node 

     var hideNode = true; 
     for(var i = 0; i < this.childList.length; i++){ 
      var hideChild = {hide: false}; 
      this.childList[i]._searchNode(pattern, hideChild); 
      hideNode = hideNode && hideChild.hide; 
     } 
     if(hideNode && !this._isRightWithPattern(pattern)){ 
      this._hideNode(); 
      hide.hide = true; 
     } else { 
      hide.hide = false; 
     } 

    } else { 
     // leaf 
     if (!this._isRightWithPattern(pattern)){ 
      this._hideNode(); 
      hide.hide = true; 
     } else { 
      hide.hide = false; 
     } 
    } 
}, 

DynaTreeNode.prototype._isRightWithPattern = function(pattern){ 
    if((this.data.title.toLowerCase()).indexOf(pattern.toLowerCase()) >= 0){ 
     return true; 
    } 
    return false; 
}, 

DynaTreeNode.prototype._hideNode = function(){ 
    if(this.li) { 
     this.li.hidden = true; 
    } 
} 

用途：

$("tree").dynatree("getRoot").search(pattern); 

Answer 3

我已經做到了這樣

<style> 
span.occurance a.dynatree-title{background-color:#3AFF22;} 
</style> 


DynaTreeNode.prototype.find = function (needle) { 
    needle = (needle || ''); 
    if (needle.length >= 1) { 
     var occurs = []; 
     this.visit(function (node) { 
      $(node.span).removeClass('occurance'); //remove pervious findings 
      if (node.data.title.indexOf(needle) != -1) { 
       occurs.push(node); 
       node._expandPath(); 
      } 
     }); 
     for (indx in occurs) { // mark findings 
      $(occurs[indx].span).addClass('occurance'); 
     } 
    } else { 
     $('span.dynatree-node.occurance').removeClass('occurance'); 
    } 
}, 
DynaTreeNode.prototype._expandPath = function() { 
    var path = [], 
     node = this; 
    while (node = node.getParent()) { 
     path.push(node); 
    } 
    for (indx in path) { 
     path[indx].expand(true) 
    } 
} 

用法：

[your selector].dynatree("getRoot").find('needle'); 

Answer 4

感謝@ mar10我犯了一個小的，簡單的功能來搜索與標題節點：http://www.designchemical.com/blog/index.php/jquery/live-text-

// If searchFrom is null, root is used 
function seachFolderNodeWithName(name, searchFrom) { 
    if (name == null) { 
     return undefined; 
    } 

    if (searchFrom == null) { 
     searchFrom = jQuery('#tree').dynatree("getRoot"); 
    } 

    var match = undefined; 

    searchFrom.visit(function (node) { 
     if (node.data.title === name) { 
      match = node; 
      return false; // Break if found 
     } 
    }); 
    return match; 
};