JQuery Dynatree - search node by name - search

Question

I would like to start using Dynatree on my page, however I will probably need searching my tree by name. Do you know maybe how to do this?

Answer 1

I needed to have not only matching nodes, but also the whole paths to these nodes. I wrote this functionality and it works for me.
Modifications for library:
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;
}
}
Use:
$("tree").dynatree("getRoot").search(pattern);

Answer 2

There is currently no search function, but you could use something like this (not tested)
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 3

I've done it this way
<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)
}
}
usage:
[your selector].dynatree("getRoot").find('needle');

Answer 4

Thanks to #mar10 i made a small, simple function to search a node with title:
// 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;
};