使用Json填充劍道樹

Question

我在使用劍道的Angular環境中。所有我想要做的是以下幾點：

1. 採取的Json
2. 使用它

我已經用簡單的數據試了一下，它似乎做工精細生產劍道樹。但是這一次我有些複雜的數據，看起來對於複雜的Json來說效果不佳。我一直試圖讓它呈現Json，但它似乎一直在思考並且永不回頭。我創建了一個簡單的Dojo供參考：

http://dojo.telerik.com/EdOqE

我不知道我做錯了，但它只是似乎沒有工作。任何人都可以幫助我嗎？

Answer 1

我認爲你可以控制生成的json，因爲你必須稍微修改它以適應TreeView的預期格式。看看這個：

{ 
    "items": [{ // Projects 
     "Id": 0, 
     "Name": "Your Example Project", 
     "CreatedOn": "", 
     "hasChildren": true, 
     "items": [{ // Analyses 
      "Id": 0, 
      "Name": "1.0 - Your Example Run", 
      "CreatedOn": "", 
      "hasChildren": true, 
      "items": [{ // Samples 
       "Id": 0, 
       "Name": "Sample 1", 
       "hasChildren": false, 
       "Description": "ample frample sample" 
      }, { 
       "Id": 0, 
       "Name": "Sample 2", 
       "hasChildren": false, 
       "Description": null 
      }] 
     }] 
    }] 
}; 

上面的json是我在小部件中的工作。首先，集合屬性被重命名爲items。他們都在各個層面。有了這個，劍道就會知道它應該如何處理財產。已添加hasChildren屬性以讓它知道何時必須顯示展開圖標。否則，即使該項目沒有任何子項，它也會顯示擴展選項。所以用戶點擊它並得到一個空的結果。

這是widget初始化選項：

{ 
    dataSource: new kendo.data.HierarchicalDataSource({ 
     data: things, 
     schema: { 
      data: "items" 
     } 
    }), 
    dataTextField: "Name" 
}; 

隨着schema.data我知道哪個屬性劍道將處理爲集合項目。 dataSource需要一個數組，但是如果你給他一個對象，你必須設置這個屬性。如果它是一個數組，那麼劍道會爲每個孩子尋找item屬性作爲默認值。 dataTextField是它將用作標籤的屬性的名稱。

Demo

Here is another demo與所述數據作爲一個數組。無需設置schema.data。

更新：

我怕你會這麼說。是的，如果您無法在服務器端更改數據，則有辦法處理這些數據。你必須在schema.parse()方法攔截數據，並將所得數據對象屬性更改爲items，所以後來小部件就會明白：

schema: { 
    data: "items", 
    parse: function(data) { 
     if (data.hasOwnProperty("Projects")) { 
      return { items: data.Projects }; 
     } 
     else if (data.hasOwnProperty("Analyses")) { 
      return { items: data.Analyses }; 
     } 
     else if (data.hasOwnProperty("Samples")) { 
      return { items: data.Samples }; 
     } 
    } 
} 

Demo

打開時會調用parse與items集合作爲每個節點data參數。您必須返回屬性名稱爲items而不是Projects,Analysis或Samples的新對象。

---

我忘了你不能觸摸數據，所以也不能添加hasChildren屬性。然後，你必須一個微小的邏輯添加到parse設置在每個級別的性能，否則也不會出現在擴大圖標：

schema: { 
    data: "items", 
    parse: function(data) { 
     if (data.hasOwnProperty("Projects")) { 

      data.Projects.forEach(p => { 
       p.hasChildren = false; 

       if (p.hasOwnProperty("Analyses")) { 
        p.hasChildren = true; 
       } 
      }); 

      return { items: data.Projects }; 
     } 
     else if (data.hasOwnProperty("Analyses")) { 

      data.Analyses.forEach(a => { 
       a.hasChildren = false; 

       if (a.hasOwnProperty("Samples")) { 
        a.hasChildren = true; 
       } 
      }); 

      return { items: data.Analyses }; 
     } 
     else if (data.hasOwnProperty("Samples")) { 
      return { items: data.Samples }; 
     } 
    } 
} 

Demo

這是醜陋的，我知道。但是習慣了劍道，它就是這樣。