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

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

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

  • 第 2 项
    • 项目 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);
    

    推荐答案

    Update 2016-01-13:现在有一个帮助主题显示 如何根据用户字符串执行 TreeView 过滤.

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

    您需要手动过滤子数据源，以便仅显示必要的节点.不同的层次有不同的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屋！