0

リモートの階層データソース（JSONファイル）にバインドされた剣道ツリービューがあります。

ノードが何であるかに応じて、各ノードの横にスプライトを追加したい。ノードに子がない場合は「ファイル」スプライトを、ノードに子がある場合は「フォルダ」スプライト。（スプライトは、デモにある剣道から提供されます）

テンプレートの動作方法に少し混乱していますが、各ノードのスプライトをテンプレートを使用して動的に変更できますか？良い例と少しの説明があれば、非常に役立ちます。

どうも

4

2 に答える 2

1

次のコードでは、レンダリングされるノードに（サブノード）templateがあるかどうかをチェックするを定義します。itemsある場合は、iconデフォルトのスプライトファイル（k-i-plus）を表示し、そうでない場合は、別のアイコン（k-i-refresh）を表示します。

function loadMore() {
    var uuid = $(this).data("uid");
    var node = tree.findByUid(uuid);
    tree.insertBefore(content, node);
    tree.remove(node);
    tree.expand(".k-item");
    addLoadMore(".k-i-refresh");
}

function addLoadMore(clss) {
    $(clss, tree.element).closest(".k-item").on("click", loadMore);
}

var content = [
    {
        text :"node1",
        items:[
            { text:"node1.1" },
            { text:"node1.2" },
            { text   :"node1.3",
                items:[
                    { text:"node1.3.1" },
                    { text:"node1.3.2" },
                    { text:"node1.3.3" },
                    { text:"node1.3.4" }
                ] },
            { text:"node1.4" }
        ]
    }
];

var tree = $("#tree").kendoTreeView({
    dataSource:content,
    template  :"<span class='k-icon #= item.items ? 'k-i-plus' : 'k-i-refresh' #'></span>#= item.text #"
}).data("kendoTreeView");
tree.expand(".k-item");
addLoadMore(".k-i-refresh");

k-i-plusを定義するCSSクラス名に置き換え、ファイルのCSSクラス名にfolder変更する場合に必要なこと。k-i-refresh

テンプレートの作成に関する情報が必要な場合は、ここにかなり良いドキュメントがあります。

于 2012-11-29T22:09:34.310 に答える
0

私はこれに3年以上遅れていることを知っています。しかし、誰かがこれと同じ質問に遭遇した場合に備えて。これが私がそれを達成した方法です：

    schema: {
        model: {
            children: "folder",
            hasChildren: function (node) {
                var hasChildren =  (node.folder && node.folder.length > 0);
                if (hasChildren === true) {
                    node.spriteCssClass = "folder";
                } else {
                    node.spriteCssClass = "html";
                }
                return hasChildren;
            }
        }
    }
于 2016-02-10T16:32:14.397 に答える