JQuery Dynatree - переупорядочить древовидную структуру на основе поиска в текстовом поле

Question

Я хотел бы сделать древовидное представление для учетных записей. Итак, я использовал Dynatree для создания дерева. Это нормально работает. Теперь я хотел бы реализовать функцию поиска.

Как сделать фильтр Dynatree на странице Visulforce, используя JavaScript.

Я хочу изменить дерево, выполнив поиск по текстовому полю.

Я нашел следующий код для фильтра, но я не знаю, как его использовать. Пожалуйста, дайте мне знать, где мы должны использовать ниже кода.

Фрагмент кода:

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

Answer 1

Вы можете использовать функцию ниже, чтобы отфильтровать на основе вашего поискового запроса.

<input type="text" onchange="filterNodes(this.value);return false;" />

function filterNodes(searchTerm) {
        // Only show nodes matching the specified search term
        var startNode = $("#divTree").dynatree("getRoot");
        startNode.visit(function(node) {
            if (node.isVisible() && node.data.title) {
                // Filter currently visible non-root nodes.
                if (node.data.title.indexOf(searchTerm) >= 0) {
                    // Make sure we and all our parents are visible
                    node.visitParents(function(node) {
                        $(node.li).show();
                        return (node.parent != null);
                    }, true);
                    // Terminate the traversal of this branch since the node matches
                    return 'skip';
                }
                else {
                    // Hide the node.
                    $(node.li).hide();
                }
            }
        });
    }

Это отфильтрует всю ветвь, если один узел будет найден соответствующим.