15

KendoUIのツリービューを使用しており、ユーザーがそれをフィルタリングできるようにしたいと考えています。私がやりたいことを実行するデモもあります（http://demos.kendoui.c​​om/web/treeview/api.html）

問題は、フィルターがTreeViewの第1階層にのみ適用されるため、フィルターテキストが子に存在し、親には存在しない場合、子は表示されないことです。

例：

  • アイテム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);
4

6 に答える 6

11

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();
        }
    });
于 2013-02-13T16:33:34.023 に答える
8

2016 年 1 月 13 日更新:ユーザー文字列に基づいて TreeView フィルタリングを実行する方法を示すヘルプ トピックが追加されました。

必要なノードのみが表示されるように、子 DataSource を手動でフィルタリングする必要があります。レベルごとに が異なる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 });
于 2012-09-18T11:12:45.353 に答える
5

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();
    }
});
于 2014-04-22T00:14:04.910 に答える
0

初めに。KendoTreeView は、ASP.NET http://www.telerik.com/help/aspnet-ajax/dropdowntree-overview.htmlの Teleriks RadDropDownTree と比較して非常に低レベルのコントロールです (もちろん js を意味します!) jquery/kendo... このフィルターを改善する必要があったため、"findByText" ではなく dataitem で適切なフィルター処理を行う場合は、次のようにします。

.1) すべてのデータ項目を検索します.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);
    }
});
于 2014-11-12T09:10:32.623 に答える