我有一个绑定到远程分层数据源(JSON 文件)的剑道 Treeview。
我想根据节点是什么在每个节点旁边添加精灵。如果节点没有子节点,那么我希望它具有“文件”精灵,如果节点有子节点,我希望它具有“文件夹”精灵。(精灵来自剑道,演示中的精灵)
我对模板的工作方式有点困惑,我可以使用模板动态更改每个节点的精灵吗?任何好的例子和一些解释让我继续前进会有很大帮助。
谢谢
我有一个绑定到远程分层数据源(JSON 文件)的剑道 Treeview。
我想根据节点是什么在每个节点旁边添加精灵。如果节点没有子节点,那么我希望它具有“文件”精灵,如果节点有子节点,我希望它具有“文件夹”精灵。(精灵来自剑道,演示中的精灵)
我对模板的工作方式有点困惑,我可以使用模板动态更改每个节点的精灵吗?任何好的例子和一些解释让我继续前进会有很大帮助。
谢谢
在下面的代码中,我所做的是定义一个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
并更改k-i-refresh
为文件的 CSS类名,您需要做什么。
如果您需要有关编写模板的信息,这里有一个很好的文档。
我知道我为此迟到了 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;
}
}
}