JQuery Dynatree - nodo de búsqueda por nombre

Question

Me gustaría comenzar a usar Dynatree en mi página, sin embargo, probablemente necesite buscar mi árbol por nombre. ¿Sabes quizás cómo hacer esto?

Answer 1

Actualmente no existe una función de búsqueda, pero se puede usar algo como esto (no probado)

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

necesitaba tener nodos no sólo a juego, sino también los caminos enteros a estos nodos. Escribí esta funcionalidad y funciona para mí.

Modificaciones para la biblioteca:

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

Uso:

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

Answer 3

lo he hecho de esta manera

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

uso:

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

Answer 4

Gracias a @ Mar10 hice una pequeña función, simple para buscar un nodo con el título:

// 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; 
};