JQuery Dynatree - How to search node with level delimiter?

Question

I need to use a searching function for my dynatree and so I found this workaround: JQuery Dynatree - search node by name

However, I need to have it search only up until my expanded node delimiter. (I am using jQuery ui-slider to dynamically set the expand delimiter). Initially, I need it to search until my minExpandedLevel. And if I move the slider, the dynatree should show only matching results in expanded level equivalent to the slider value.

Trying to reset the minExpandLevel and reloading the dynatree just wont do as it returns all(even non-matching) nodes as result.

So I want to add a limit parameter to the search function like:

$(selector).dynatree("getRoot").search(pattern, limit);

Does anybody know how to do this?

Here's my code:

dynatree:

$.ui.dynatree.nodedatadefaults["icon"] = false;

$("#resultTree").dynatree({
    minExpandLevel: 4,
    persist: false,
    classNames: {
        vline: "no-bg",
        connector: "",
        expander: "ui-helper-hidden"
    },
    children: myJsonData
});

slider:

timeout = false;
searchTerm = $("#searchText").val();
$("#treeslider").slider({
    min: minTick,
    max: maxTick,
    range: "min",
    slide: function (event, ui) {
        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function () {
            $("#resultTree").dynatree("getRoot").search(searchTerm, ui.value);
        }, 500);

    }
});

score 1 · Answer 1 · answered Dec 20 '13 at 22:39

1

Here's a snippet of code that starts at the root and visits each node but doesn't process nodes at level 3 or lower:

$("#tree").dynatree("getRoot").visit(function(node){

    if( node.getLevel() > 2) {
        return 'skip';
    }

    console.log('processing node "' + node.data.title + '" at level ' + node.getLevel());

});

The visit function will stop processing a branch if you return the string 'skip'.

answered Dec 20 '13 at 22:39

Gruff Bunny

27,738
10
72
59

oh thanks, this works for a top-down searching, but I need a bottom-up searching approach. That is why I need to utilize the [_searchNode](http://stackoverflow.com/questions/12277797/jquery-dynatree-search-node-by-name) method. Now how do I search until the last node and hide em up if its greater than my level delimiter? – thanatosphere Jan 06 '14 at 03:48
This way it will show the parent node that is <= delimiter even if only the last node matches the search term. – thanatosphere Jan 06 '14 at 04:18

score 1 · Accepted Answer · edited May 23 '17 at 12:19

Okay, I think I found the answer:

I modified the _searchNode function so it will hide matching nodes greater than the level delimiter, but will show parent node(even non-matching) as long as the term matches within its children.

var clear = true;
DynaTreeNode.prototype.search = function (pattern,limit) {
if (typeof limit == "undefined") {
    limit = 0;
}

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;
    });
    var searchDepth = 1;
    for (var i = 0; i < this.childList.length; i++) {
        var hide = { hide: false };
        this.childList[i]._searchNode(pattern, hide, searchDepth, limit);
    }
}
},

// bottom-up node searching function
DynaTreeNode.prototype._searchNode = function (pattern, hide, searchDepth, limit) {
    var level = searchDepth;
    if (this.childList) {
        // parent node
        var hideNode = true;
        var searchDepth = level+1;
        for (var i = 0; i < this.childList.length; i++) {
            var hideChild = { hide: false };
            this.childList[i]._searchNode(pattern, hideChild, searchDepth, limit);
            hideNode = hideNode && hideChild.hide;
        }

        if (hideNode && !this._isRightWithPattern(pattern)) {
            this._hideNode();
            hide.hide = true;
        } else {
            if (limit && level > limit) {
                this._hideNode();
            }
            hide.hide = false;
        }

    } else {
        // leaf        
        if (!this._isRightWithPattern(pattern)) {
            this._hideNode();
            hide.hide = true;
        } else {
            if (limit && level > limit) {
                this._hideNode();
            }
            hide.hide = false;
        }
    }
}

Hi, this seems exactly what I'm after however I've absolutely no idea where to place this! Can you give concise details as to which file (jquery.dynatree.js I presume) and whereabouts. — JasonMHirst, Apr 09 '14 at 11:18
Don't think this warrants an 'answer', but have finally managed to find where to put this code. For anyone else (and there are a few), look for the line "var DynaTree = Class.create();" and paste the above code after that. It DOES work 100% :) — JasonMHirst, Apr 09 '14 at 11:23

JQuery Dynatree - How to search node with level delimiter?

2 Answers2