使用jquery模板的嵌套列表

我的jquesy ajax调用返回这个结果

var clientData = [
     { name: "test1", id: 1, parentid: 0, desc: "test desc1"  },
     { name: "test2", id: 2, parentid: 0, desc: "test desc1"  },
     { name: "test3", id: 3, parentid: 0, desc: "test desc1"  },
     { name: "test1-1", id: 4, parentid: 1, desc: "test desc4"  },
     { name: "test1-2", id: 5, parentid: 1, desc: "test desc5"  },
     { name: "test2-1", id: 6, parentid: 2, desc: "test desc6"  }
 ];

我想使用jquery模板为这些数据创建嵌套的ulli列表

喜欢

• 测试1（测试描述1）
  • 试验1-1（试验说明4）
  • 试验1-2（试验说明5）
• 测试2（测试描述2）
  
  • 试验2-1（试验说明6）
• 测试3（测试描述3）

有人能帮我写jquery模板吗

代码我使用模板创建了li元素，并将其附加到ul like

  <script id="menuTemplate_inner" type="text/x-jquery-tmpl">  

       {{if parentid == 0}}
           <li  class="f_level" id="cat_${id}"> 
       {{else}}
            <li  class="inner_level" id="cat_${id}"> 
       {{/if}}    
        ${name} (${desc}) 
       </li>      
</script>

{{如果parentid==0}}

{{else}

{{/if}
${name}（${desc}）

---

我不知道如何使其嵌套。首先，层次模板通常提供层次数据，因此它们可以更自然地调用子模板。下面的示例将更适合您的数据表示，并导致更简单的模板：

var clientData = [
    { name: "test1", id: 1, parentid: 0, desc: "test desc1", children: [
        { name: "test1-1", id: 4, parentid: 1, desc: "test desc4" },
        { name: "test1-2", id: 5, parentid: 1, desc: "test desc5" }
    ] },
    { name: "test2", id: 2, parentid: 0, desc: "test desc1", children: [
        { name: "test2-1", id: 6, parentid: 2, desc: "test desc6" }
    ] },
    { name: "test3", id: 3, parentid: 0, desc: "test desc1" }
];

现在，假设您无法更改正在使用的数据的表示形式，那么您确实可以使用单个模板从平面阵列构建元素的层次结构，这主要是因为：

• 模板可以递归地调用自己

• 模板调用可以采用参数（与

  $item

  合并的对象）

如果我们将一个模板看作一个“正则”函数（毕竟，这正是它被编译成的），那么使用一个<代码> PARTEND 参数，并只渲染与指定父类相匹配的项将是有意义的。您已经对顶级项使用了

0

（无父项），这非常适合我们，并允许我们以当前项作为新父项递归调用函数

让我们从第一次调用开始。我们需要传递顶级父id

0

（但我们不会将其称为

parentId

，以避免与数据项中现有的

parentId

属性混淆）。矛盾的是，我们还必须传递数据数组。这似乎是多余的，因为它已经是的第一个参数，但这是因为被调用的模板只看到当前项，而不是原始数组，除非我们显式地传递它。生成的代码类似于：

$("#menuTemplate_inner").tmpl(clientData, {
    clientData: clientData,  // Pass original array.
    forParent: 0             // Start at top-level.
}).appendTo("ul");

现在，模板本身。它有三项任务要执行：

• 如果当前项与指定的父项匹配，则呈现该项

• 公开适当的类（

  f_level

  用于顶层，

  内部_level

  否则），这可以通过模板标记和

• 使用原始数据数组和当前项作为新父项递归调用自身，这是通过模板标记实现的

生成的模板是：

{{如果parentid=$item.forParent}

${name}（${desc}）


{{tmpl（$item.clientData{
clientData:$item.clientData，
forParent:id
})“#menuTemplate_inner”}”

{{/if}

---

您可以在中进行测试。

到目前为止您尝试了什么？我已经创建了一个jquery模板，但不知道如何使它适用于嵌套列表。@sachinkulkarni您可以发布代码吗？我已经用我使用的代码示例编辑了问题