5

Kendo ツリー ビューでネストされたノードを見つけるための正確なルートを知っています。したがって、このルートに沿ってすべてのノードを展開して、そこに到達したいと考えています。ノードを見つけて、剣道にそのノードを展開させる方法を知っています。

私の Treeview は、そのデータに web-api を使用しており、すべて正常に動作します。スキーマは次のように定義されます。

            schema: {
                model: {
                    id: "CodeList",
                    hasChildren: "HasKids"
                }
            }

私が達成したいのは、ツリーがネストされたレベルに自動的に展開されることです。ノードに到達するためのパスが「Level1CodeA|Level2CodeA|Level3CodeA」であることがわかっているとします。そのため、最初に実行できるコード「Level1CodeA」を見つけたいとします。
次に、このノードを展開します (内部的にこのノードの下のデータを取得し、正常に展開されます)。その後、「Level2CodeA」を見つけ、プロセスを繰り返して、Level3CodeA も見つけて選択します。

これについてどうすればいいですか？次の検索および展開操作を開始するために使用できる「AfterExpanded」イベントを探していましたが、使用できるイベントが見つかりません。データソースで「変更」イベントを試しましたが、これが何度も発生し、正しいアイテムに絞り込めないようです..

どうもありがとう。

編集:より多くのコード

<script id="treeII-template" type="text/kendo-ui-template">
    <img id="explorerItemImg" src="#: item.Image #" />
    <span id="explorerItemCode">#: item.Code #</span> - 
    <span id="explorerItemFullName">#: item.FullName #</span>
    # if (item.Level < (item.Levels - 1)) { #
        [<span id="explorerItemLCount">#: item.LCount #</span>]
    # } #
    # if (item.HasKids) { #
        [<span id="explorerItemPCount">#: item.PCount #</span>]
    # } #

</script>

HierarchicalDataSource を作成し、これをツリービューに割り当てるコード:

    // -----------------
    // set the datasource for the bottom explorer...
    // -----------------
    var loadDataForExplorerGroup = function (context, groupid, groupsequence) {

        // hang on to this context/groupid
        sessionStorage.setItem(context + "_explorer_groupId", groupid);
        sessionStorage.setItem(context + "_explorer_groupSequence", groupsequence);

        // define the datasource and attach it to the explorer-tree
        explorerGroupData = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "/api/explorerapi/GetExplorerData?",
                    data: {
                        context: "portfolio",
                        groupid: groupid,
                        groupsequence: groupsequence,
                        userid: sessionStorage.getItem("symUserID")
                    }
                }
            },
            schema: {
                model: {
                    id: "CodeList",
                    hasChildren: "HasKids"
                }
            }
        });

        // simply assign the data source again to the tree
        $("#idExplBottomTree").data("kendoTreeView").setDataSource(explorerGroupData);

    };
4

1 に答える 1

6

そのAfterExpandedイベントはかもしれませんdataBound。私が提案するのは、次のTreeView定義です。

var tree = $("#treeview").kendoTreeView({
    dataSource   : data,
    dataTextField: "text",
    dataBound    : function (e) {
        treeNavigateNext();
    }
}).data("kendoTreeView");

次のように定義されdataBoundたものを呼び出すハンドラーを追加しました。treeNavigate

function treeNavigateNext() {
    if (search.length > 0) {
        var first = tree.findByText(search[0]);
        if (first) {
            search.shift();
            tree.expand(first);
        }
    }
}

ナビゲートする各ノードをsearch含む配列はどこにありますか。dataTextField

例：

search = [];
search.push("t_3");
search.push("t_32");
search.push("t_321");
search.push("t_3214");

expandテキストがt_3、次にt_32、次t_321、最後のノードになることを定義しますt_3214。

したがってtreeNavigateNext、保留中の何かがまだあることを確認し（search.length > 0）、ある場合は、そのtext（ ）で要素を見つけ、 （var first = tree.findByText(search[0]);）から要素を削除し、最後にノード（）を削除します。これにより、次のレベルがロードされ、受信したイベントがトリガーされたときに、次のレベルに進みます。searchsearch.shift();expandtree.expand(first)dataBound

ここで実行されているのを見てください

編集：テキストで検索する代わりにナビゲートしたい場合は、さまざまなノードの配列にid追加し、代わりに次の関数を使用します。searchidtreeNavigateNext

function treeNavigateNext() {
    if (search.length > 0) {
        var first = tree.dataSource.get(search[0]);
        if (first) {
            search.shift();
            var elem = tree.findByUid(first.uid);
            tree.expand(elem);
        } 
    }
}

ここに新しい実行例

于 2013-01-17T23:46:51.967 に答える