KendoUI过滤器的TreeView(KendoUI filter TreeView)

我使用KendoUI的TreeView和希望给用户过滤它的可能性。甚至还有一个演示是我想要做什么（http://demos.kendoui.com/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:

更新2016年1月13日 ：现在有一个帮助主题，显示了如何基于用户的字符串进行的TreeView过滤。

您需要手动筛选子数据源，所以只显示了必要的节点。具有不同dataTextField为不同级;就更难把握，所以此代码使用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 2:

我发现了一个方法，使这只是利用jQuery选择隐藏和显示必要的子节点出现。

第一件事情是，当你创建你的树视图中，此参数添加到您的选择：

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

Answer 3:

对于超过4级跨越式UL和李和呼叫显示的所有家长（）。

$("#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();
    }
});

Answer 4:

首先。相比于从ASP.NET Teleriks RadDropDownTree KendoTreeView是非常低级的控制http://www.telerik.com/help/aspnet-ajax/dropdowntree-overview.html （我的意思当然JS！）的应采取这一将jQuery /剑道......它需要改善这种过滤器，所以如果你喜欢上的DataItem而不是“findByText”适当的过滤，这样做：

1.1）查找所有dataitems 0.2）检查您的条件（这里小写包含价值/文）。3）标志项目，标志父母。4）清理，由家长去除留在树节点

that.nodeFilter = { logic: "or", filters: [] };
that.nodeFilter.filters.push({ field: "hidden", operator: "eq", value: false });
tree.element.find(".k-in").each(function () {
    var dItem = tree.dataItem($(this).closest("li"));
    dItem.hidden = false;
    if (dItem[that.options.dataValueField].toLowerCase().indexOf(searchTerm) != -1 ||
        dItem[that.options.dataTextField].toLowerCase().indexOf(searchTerm) != -1) {
        that.nodeFilter.filters.push({ field: that.options.dataValueField, operator: "eq", value: dItem[that.options.dataValueField] })
        while (dItem.parentNode()) {
            dItem = dItem.parentNode();
            dItem.hidden = false;
            that.nodeFilter.filters.push({ field: that.options.dataValueField, operator: "eq", value: dItem[that.options.dataValueField] })
        }
    } else {
        dItem.hidden = true;
    }
});
tree.dataSource.filter(that.nodeFilter);
tree.element.find(".k-in").each(function () {
    var node = $(this).closest("li");
    var dataItem = tree.dataItem(node);
    if (dataItem.hidden) {
        tree.remove(node);
    }
});

Answer 5:

这个版本搜索整个树，不区分大小写，并隐藏不包含搜索查询（jQuery的1.8+）节点。

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

        if (query !== "") {
            $("#tree-view .k-in").closest("li").hide();
            $("#tree-view .k-item .k-in:Contains(" + query + ")").each(function () {
                $(this).parents("ul, li").each(function () {
                    $(this).show();
                });
            });
        } else {
            $("#tree-view .k-group").find("ul").hide();
            $("#tree-view .k-group").find("li").show();
        }
    });

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function (arg) {
    return function (elem) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Answer 6:

如果我读的问题很好，这是关于在视图中过滤数据，而不是树形本身。它可以通过递归来完成。

递归的例子，工作原理：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kendo UI Snippet</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script> </head> <body> <div class="demo-section k-content"> <div id="treeview1"></div> <div id="showit"></div> <div id="treeview2"></div> </div> <script> // // Define hierarchical data source // var mydata = new kendo.data.HierarchicalDataSource({ name: "Food", items: [ { name: "Meat", items: [ { name: "Pork" }, { name: "Beef" } ] }, { name: "Vegetables", items: [ { name: "Pepper" } ] } ] }); // // When debugging // var debug=false; // // Find and return Item when found. // function FindByName(items, myName) { //Query definition var query = kendo.data.Query.process(items, { filter: { logic: "or", filters: [{ field: "name", value: myName, operator: "eq" }] } }); if (debug) $("#showit").html($("#showit").html()+" found:" + JSON.stringify(query.data)); // // return Item when found. // if (query.data != "") return query.data; //ready else { // // if sub-items, search further // for (let i=0; i<items.length; i++) { if (debug) $("#showit").html($("#showit").html()+" test:" + JSON.stringify(items[i])); if (items[i].items!=null) { if (debug) $("#showit").html($("#showit").html()+" search sub...."); var r = FindByName(items[i].items, myName); if (r!=null) return r; //ready, else continue searching further }; } } if (debug) $("#showit").html($("#showit").html()+" not found."); return null; //nothing found. } // // print the input // $("#showit").html($("#showit").html()+" Food:" + JSON.stringify(mydata.options.items)); // // print the result // var ret=FindByName(mydata.options.items,"Beef"); $("#showit").html($("#showit").html()+"<p> Beef:" + JSON.stringify(ret)); $("#treeview1").kendoTreeView({ dataSource: mydata.options.items, dataTextField: ["name"] }); ret=FindByName(mydata.options.items,"Meat"); $("#showit").html($("#showit").html()+"<p> Meat:" + JSON.stringify(ret)); ret=FindByName(mydata.options.items,"Pepper"); $("#showit").html($("#showit").html()+"<p> Pepper:" + JSON.stringify(ret)); ret=FindByName(mydata.options.items,"Vegetables"); $("#showit").html($("#showit").html()+"<p> Vegetables:" + JSON.stringify(ret)); // // Example: bind return value [ret] to treeview. // $("#treeview2").kendoTreeView({ dataSource: ret, dataTextField: ["name"] }); </script> </body> </html>

文章来源: KendoUI filter TreeView