Search JQuery动态树-按名称搜索节点

我想在我的页面上开始使用Dynatree，但是我可能需要按名称搜索我的树。你知道怎么做吗

目前没有搜索功能，但您可以使用类似的功能（未测试）

---

我不仅需要匹配节点，还需要到这些节点的整个路径。我写了这个功能，它为我工作

图书馆的修改：

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

我是这样做的

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

---

感谢@mar10，我制作了一个小而简单的函数来搜索标题为的节点：

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

---

请参阅此Dynatree是一个简单的UL>LIPlease，在下一个版本中添加一个经过测试的工作搜索：）您的代码中有一个错误。您需要检查是否找到匹配项。若在树中并没有匹配项，你们将显示

foundnull

效果非常好！谢谢顺便说一句，我认为用法应该是

$（“#树”）

——您的代码缺少

。我正在尝试实现这一点，但我不确定如何实现。请为我澄清！我不知道我把代码放在哪里了。什么是模式？搜索文本？？正是我所需要的，可惜我只能向上投票一次：）太棒了。现在，在对搜索项使用此代码进行筛选之后，我想选中一个文件夹复选框，并使其仅对未隐藏的子节点进行切换。有人看到一个简单的方法吗？如果我弄明白了，我会发帖的。

<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');

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