kendo-ui - KendoUI : How to insert TreeView inside the TabStrip at run time

Question

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

JSON 数据:

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

谢谢你。

Answer 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/