Question

在我的应用程序中，当每个项目可以有许多子节点时，我有树形式的复杂数据结构。我试图在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}

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

有什么建议吗？

Answer 1

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

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

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

使用jQuery jTemplates创建树视图

1 个答案: