0

在我的应用程序中，当每个项目可以有许多子节点时，我有复杂的树形数据结构。我正在尝试在 jQuery jTemplates 插件的帮助下使用这些数据构建一种树视图。我正在寻找一种方法来做到这一点，但我走到了死胡同，我不知道如何继续。到目前为止，我得到了：

{#foreach $T as item}
<div class="procsSumItem {#if $T.item.Status==3}pending{#/if}">

 <div class="itemIcon {#if $T.item.Status==3}pending{#/if}">
  <div class="taskIcon"></div>
 </div>

 <h2 class="title">{$T.item.Title}</h2>
 <span class="value">{$T.item.Value}</span>
  {#if $T.item.Nodes.length}<div class="expand"></div>{#/if}
 <div class="expandPanel hidden">
 {#foreach $T.item.Nodes as N1}
 {#if $T.N1.Nodes.length}
   <div class="groupHeader">
     <span class="groupIcon"></span>
     <span class="groupTitle">{$T.N1.Title}</span>
   </div>
        {#foreach $T.N1.Nodes as N2}
           {#if $T.N2.Nodes.length}
            {#foreach $T.N2.Nodes as N3}
                {#if $T.N3.Nodes.length}
                    //this can be very deep....
                 {#/if}
            {#/for}
          {#else}
             <ul class="recipents rgroup">
             <li class="{#if $T.b.Replied}rep{#/if}">
                <span class="user"></span>
                <span>{$T.b.Title}</span>
                <div class="arrow"></div>
                {#if $T.b.Replied}<span class="replied">Replied</span>{#/if}
             </li>
            </ul>
        {#/if}
       {#/for}
  {#else}
   <ul class="recipents">
    <li class="{#if $T.a.Replied}rep{#/if}">
         <span class="user"></span>
         <span>{$T.a.Title}</span>
         <div class="arrow"></div>
         {#if $T.a.Replied}<span class="replied">Replied</span>{#/if}   
    </li>
   </ul>
  {#/if}
 {#/for} 
   </div>
 <p class="time">{$T.item.CreatedAt}</p>
</div>
{#/for}

如您所见，我的问题是，在我当前的方法中，查找每个项目的子节点的过程可能是无穷无尽的。如果它有帮助，我可以返回每个项目的深度，所以也许我可以循环这个动作。但我不确定这是否是正确的方法。

有什么建议么？

4

1 回答 1

1

我会将“节点”模板放在一个单独的模板中，并{#include}为每个节点放置该模板。

在该模板中，您可以使用 an{#if}来确定是否有更多子节点要渲染，然后{#include}再次递归地使用节点模板（从节点模板本身中）以继续递归地渲染节点。

或者，您可以使用 JavaScript 来处理递归，通过仅传入必要的数据来呈现每个级别的节点模板，然后使用 jQuery 的操作方法将它们组装在一起。

于 2012-09-13T18:13:28.910 回答