Question

我很想找到解决问题的方法。我有一个JS对象，它具有层次结构，层次结构的级别是未知的。利用JQuery模板和Knockout JS我可以得到<ul>＆amp;的树结构。 <li>但我的要求是，对于每个孩子，我需要在Row中呈现新的Table所以我可以说我的结构是：

{
    Name: 'First', 
    Total: 100,
    Set: [
        { 
            Name: 'First_1', Total: 30,
            Set: [{Name: 'First_1_1', Total: 10}, {Name: 'First_1_2', Total: 20}]  
        },
        { Name: 'First_2', Total: 0 }
    ]
}

该表应如下所示：

<table width="100%">
    <tbody>
    <tr><th>Name</th><th>Total</th></tr>
    <tr><td>First</td><td>100</td></tr>
    <tr><td>First_1</td><td>30</td></tr>
    <tr><td>First_1_1</td><td>10</td></tr>
    <tr><td>First_1_2</td><td>20</td></tr>
    <tr><td>First_2</td><td>0</td></tr>
    </tbody>
</table>

以下是我提出的小提琴：http://jsfiddle.net/paragnair/xpsa4/

如果我使用ul li，我可以使用

递归调用模板

<ul data-bind="template: {name: 'tree1', foreach: Set}"></ul>

但由于我的模板本身以<tr>开头，我不知道如何在不编写data-bind="template:{...}部分的节点的情况下调用模板？初始调用可以正常运行，因为它位于<tbody>但我tbody内的tbody不能以递归方式调用模板来呈现其他tr。

我希望这个解释已经足够了。如果您需要更多详细信息，请告诉我们。任何帮助表示赞赏。

Answer 1

你可以从该模板中递归调用一个模板，结合foreach的$ data context属性可以让你做你正在寻找的东西......我很难解释一些事情，所以我更新了你的jsfiddle来做你在寻找什么，http://jsfiddle.net/xpsa4/5/

使用Knockout JS和Jquery Template的递归tr

1 个答案: