KendoUI过滤器TreeView [英] KendoUI filter TreeView

问题描述

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

I am using the treeview of KendoUI and want to give the user the possibility to filter it. There is even a demo that does what I want (http://demos.kendoui.com/web/treeview/api.html)

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

The Problem is that the filter is only applied to the 1st hierarchy of the TreeView, so if the filter-text is present in a child but not the parent, then the child won't be displayed.

示例:

• 第1项
• 项目2
  • xzy项目
  • 项目abc
  • Item 1
  • Item 2
    • Item xzy
    • Item abc

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

    If the search text would be "abc", no item would be displayed. Instead I would like to have the following result:

    • 项目2
      • 项目abc
      • Item 2
        • Item abc

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

        Does anyone know how to do this? This is the code I am using:

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

        推荐答案

        更新2016-01-13 :现在有一个帮助主题，显示

        Update 2016-01-13: There is now a help topic that shows how to perform TreeView filtering based on a user string.

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

        You need to manually filter the child DataSources, so that only the necessary nodes are shown. Having different dataTextFields for the different levels makes it harder to grasp, so this code uses the text field only. Also, as this filtering is performed on the client-side, it assumes that you have loaded all nodes.

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

        这篇关于KendoUI过滤器TreeView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！