Question

我需要为我的dynatree使用搜索功能，所以我发现了这个解决方法：JQuery Dynatree - search node by name

但是，我需要只搜索我的扩展节点分隔符。（我使用jQuery ui-slider来动态设置扩展分隔符）。最初，我需要它搜索到我的minExpandedLevel。如果我移动滑块，则dynatree应在扩展级别中显示仅匹配结果，等效于滑块值。

尝试重置minExpandLevel并重新加载dynatree，因为它会返回所有（甚至是不匹配的）节点。

所以我想在搜索功能中添加一个限制参数，如：

$（selector）.dynatree（“getRoot”）。search（pattern，limit）;

有人知道怎么做吗？

这是我的代码：

dynatree：

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

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

滑块：

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

    }
});

Answer 1

这是一段代码片段，它从根开始并访问每个节点，但不处理3级或更低级别的节点：

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

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

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

});

如果您返回字符串'skip'，则访问函数将停止处理分支。

Answer 2

好的，我想我找到了答案：

我修改了_searchNode函数，因此它会隐藏大于水平分隔符的匹配节点，但只要该子句在其子节点内匹配，就会显示父节点（甚至不匹配）。

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

JQuery Dynatree - 如何使用级别分隔符搜索节点？

2 个答案: