KendoUI过滤TreeView

Question

我正在使用KendoUI的树视图,并希望为用户提供过滤它的可能性.甚至有一个演示可以做我想要的(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选择器隐藏和显示必要的子节点即可实现.

首先,当您创建树视图时,请将此参数添加到您的选项中:

loadOnDemand:false

这样,在请求之前,树将呈现出子节点的所有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();
        }
    });

Answer 2

更新2016-01-13:现在有一个帮助主题,显示如何基于用户字符串执行TreeView过滤.

您需要手动过滤子DataSource,以便只显示必要的节点.dataTextField对于不同级别具有不同的s使得难以掌握,因此该代码text仅使用该字段.此外,由于此过滤在客户端执行,因此它假定您已加载所有节点.

var treeview = $("#treeview").data("kendoTreeView"),
    item = treeview.findByText("Item 1.3"), // find the node that will be shown
    dataItem = treeview.dataItem(item),
    nodeText = dataItem.text;

// loop through the parents of the given node, filtering them to only one item
while (dataItem.parentNode()) {
    dataItem = dataItem.parentNode();
    dataItem.children.filter({ field: "text", operator: "contains", value: nodeText });
    nodeText = dataItem.text;
}

treeview.dataSource.filter({ field: "text", operator: "contains", value: nodeText });

Answer 3

超过4个级别遍历UL和LI类型的所有父级并调用show().

$("#filterText").keyup(function (e) {
    var filterText = $(this).val();

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