Question

我有一个绑定到远程分层数据源（JSON文件）的kendo Treeview。

我想根据节点的内容在每个节点旁边添加精灵。如果节点没有子节点，那么我希望它有“文件”精灵，如果节点有子节点我想要它拥有“文件夹”精灵。（精灵是从剑道提供的，是演示中的精灵）

我对模板的工作方式有点困惑，我可以使用模板动态地改变每个节点的精灵吗？任何好的例子和一些解释让我走后都会有很大的帮助。

THX

Answer 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类名替换folder并通过文件的CSS类名更改k-i-refresh，则需要做什么。

如果您需要有关编写模板的信息，可以在here中找到相当不错的文档。

Answer 2

我知道我已经晚了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;
            }
        }
    }

Kendo UI Treeview Sprite改变模板

2 个答案: