javascript - KendoUI 过滤器 TreeView

Question

我正在使用 KendoUI 的 TreeView ，并希望为用户提供过滤它的可能性。甚至还有一个演示可以满足我的要求 (http://demos.kendoui.c​​om/web/treeview/api.html)

问题是过滤器仅应用于 TreeView 的第一个层次结构，因此如果过滤器文本存在于子项中而不是父项中，则不会显示子项。

例子:

• 项目 1
• 项目 2
  • 项目 xzy
  • 项目abc

如果搜索文本是“abc”，则不会显示任何项目。相反，我希望得到以下结果:

• 项目 2
  • 项目abc

有人知道怎么做吗？这是我正在使用的代码:

   var tree_view_data = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "getall/items",
                dataType: "json"
            }
        },
        schema: {
            model: {
                children: "ChildItems"
            }
        }
    });
    //init tree view itself
    var $treeview = $("#div-treeview").kendoTreeView({
        dataSource: tree_view_data,
        dataTextField: [ "Text", "ChildrenText" ]
    });

    //allow filter of navigation tree
    var refreshTree = function () {
        tree_view_data.filter({
            field: "Text", //if I would use "ChildrenText" here nothing be displayed at all if filtertext is set
            operator: "contains",
            value: $("#tree-text-search").val()
        });
    };

    $("#tree-text-search").change(refreshTree).keyup(refreshTree);

Answer 1

我找到了一种方法来实现这一点，只需使用 jQuery 选择器来隐藏和显示必要的子节点。

首先是在创建 TreeView 时，将此参数添加到您的选项中:

loadOnDemand: 假

这样，树将在被请求之前呈现出所有子节点的 HTML，从而允许您使用 jQuery 进行导航。

这是我使用的 jQuery 代码，它过滤掉不匹配的节点，打开匹配的节点组，并显示它们。

$("#searchTextInputField").keyup(function () {

        var filterText = $("#searchTextInputField").val();

        if(filterText !== "") {   
            $("#myTree .k-group .k-group .k-in").closest("li").hide();
            $("#myTree .k-group .k-group .k-in:contains(" + filterText + ")").each(function() {
                $(this).closest("ul").show();
                $(this).closest("li").show();
            });
        } else {
            $("#myTree .k-group").find("ul").hide();
            $("#myTree .k-group").find("li").show();
        }
    });