使用jQuery創建樹視圖j模板

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}來確定是否有更多子節點要呈現，然後再次遞歸地（從節點模板本身內）繼續遞歸地呈現節點。

或者，您可以使用JavaScript來處理遞歸，而只需傳遞必要的數據來呈現每個級別的節點模板，然後使用jQuery的操作方法將它們組合在一起。