KendoUI：如何在运行时在 TabStrip 中插入 TreeView

【问题标题】：KendoUI: How to insert TreeView inside the TabStrip at run timeKendoUI：如何在运行时在 TabStrip 中插入 TreeView
【发布时间】：2014-01-23 03:50:10
【问题描述】：

我需要在tabstrip 中添加一个树视图。我的情况是，单击一个按钮后，我会得到一些如下所示的数据。我需要为每个报告生成 1 个选项卡，并在 tab 中为 Data 放置一个 treeview。这可能吗？如果是的话，你能告诉我怎么做吗？非常感谢您的帮助。

JSON 数据：

[ 
  Report 1: {  Data: [   ] }, 
  Report 2: {  Data: [  ] } 
]

谢谢。

【问题讨论】：

那是你最终的 JSON 吗？将空格作为属性名称是否有效？拥有它就像[ { tab : "Report 1", Data: [ ] }, { tab : "Report 2", Data: [ ] } ] 会更好

标签： kendo-ui kendo-treeview

【解决方案1】：

我将建议对您的 JSON 进行一些转换，使其看起来像这样：

[
    { Id : "Report 1", Data: [ ] }, 
    { Id : "Report 2", Data: [ ] } 
]

其中Id 是我们要为选项卡显示标签的文本，Data 是tree 的内容。

开始向每个选项卡添加初始（空）内容。

$.each(data, function(idx, elem) {
    elem.Content = "<div>hello</div>";
});

所以你可以这样做：

// Create TabStrip
var ts = $("#tabstrip").kendoTabStrip({
    dataTextField: "Id",
    dataContentField: "Content",
    dataSource: data
}).data("kendoTabStrip");

现在为每个选项卡创建树：

$.each(data, function(idx, item) {
    var c = ts.contentElement(idx);
    $(c).kendoTreeView({
        dataSource : item.Data
    });
});

你可以看到它在这里运行：http://jsfiddle.net/OnaBai/x6Acn/1/

【讨论】：