templates - Kendo UI Treeview Sprite-Altering 模板

Question

我有一个绑定(bind)到远程分层数据源(JSON 文件)的 Kendo Treeview。

我想根据节点是什么在每个节点旁边添加 Sprite 。如果节点没有子节点，那么我希望它具有"file" Sprite ，如果节点有子节点，我希望它具有“文件夹” Sprite 。( Sprite 来自 Kendo ，演示中的 Sprite )

我对模板的工作方式有点困惑，我可以使用模板动态更改每个节点的 Sprite 吗？任何好的例子和一些解释让我继续前进会有很大帮助。

谢谢

Answer 1

在下面的代码中，我所做的是定义一个 template检查正在渲染的节点是否有 items (子节点)与否。如果有，它会显示 icon从默认 Sprite 文件( 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 你需要做什么通过定义 folder 的 CSS 类名并更改 k-i-refresh通过文件的 CSS 类名。

如果您需要有关编写模板的信息， here 中有一个很好的文档。 .