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雪碧改變模板

回答

相關問題