Kendo UI Treeview雪碧改变模板

我有一个绑定到远程分层数据源（JSON文件）的kendo Treeview。Kendo UI Treeview雪碧改变模板

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

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

THX

来源

2012-11-29 CipherDarkness

如果它只是用来显示图标，不足以使用'spriteCssClass'。节点示例：'{text：“node1.3”，spriteCssClass：“k-icon k-i-pencil”}'。你为什么需要模板？ – OnaBai

我需要它们是因为我希望新节点也有相应的精灵。我希望这样做是自动完成的，所以我不必每次检查并在数据源上的每个节点上添加'spriteCssClass'。 – CipherDarkness

在下面的代码什么我是定义一个template，检查是否所呈现的节点具有items（子节点）或没有。如果有，它将显示来自默认精灵文件（k-i-plus）的icon，否则它会显示不同的图标（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");

什么，你需要做的，如果通过定义folder的CSS类名称替换k-i-plus和CSS类名的文件更改k-i-refresh。

如果您需要编写模板的信息，在here中有一个非常好的文档。

来源

2012-11-29 22:09:34 OnaBai

好的所以我修改了一下，因为正如我们之前看到的，kendo在每个节点中都自动添加了“items”字段。但是我确定它已经可以工作了，问题是如果我添加一个节点，它会有文件图像应该，如果我添加一个孩子到该节点，文件图像不会自动成为文件夹图像！是否有办法连续运行模板，而不仅仅是在treeview init？ – CipherDarkness

严格来说，不是在初始化'treeview'时，而是在添加节点时。所以，我修改了上面的代码，以动态地将节点添加到具有“k-i-refresh”图标的节点，但它是用'insertBefore'加上'remove'而不是'append'实现的。 – OnaBai

似乎我不需要添加另一个函数，我所要做的只是在appendNode上添加'treeview.dataSource.sync（）'，并根据节点的条件自动更新removeNode函数和精灵！再次感谢您的帮助！ :) – CipherDarkness

我知道我为此迟了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-10 16:32:14

你可以显示更多的代码，因为hasChildren“节点”没有显示 –

Kendo UI Treeview雪碧改变模板

回答

相关问题