JQuery Dynatree - ricerca nodo per nome

Question

Vorrei iniziare a utilizzare Dynatree sulla mia pagina, tuttavia probabilmente avrò bisogno di cercare il mio albero per nome. Sai forse come fare questo?

Answer 1

non esiste attualmente alcuna funzione di ricerca, ma si potrebbe usare qualcosa di simile (non testato)

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

avevo bisogno di avere i nodi non solo di corrispondenza, ma anche l'intero percorsi per questi nodi. Ho scritto questa funzionalità e funziona per me.

Modifiche per la libreria:

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

Usa:

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

Answer 3

ho fatto in questo modo

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

utilizzo:

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

Answer 4

Grazie a @ Mar10 ho fatto un piccolo, semplice funzione per cercare un nodo con il titolo:

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