0

我的 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 模板为此数据创建嵌套的 ul li 列表。

像。

  • 测试 1（测试说明 1）
    • 测试 1-1（测试 desc4）
    • 测试 1-2（测试 desc5）
  • 测试 2（测试 desc2）
    • 测试 2-1（测试 desc6）
  • 测试 3（测试 desc3）

谁能帮我写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>

我不知道如何让它嵌套

4

1 回答 1

2

首先，分层模板通常提供分层数据，因此它们可以更自然地调用子模板。下面的示例将更适合您的数据并导致更简单的模板：

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）。

如果我们将模板视为“常规”函数（毕竟，这正是它被编译成的内容），那么接受一个parentId参数并仅渲染与指定父项匹配的项目是有意义的。您已经将0（无父项）用于顶级项，这很适合我们，并允许我们以当前项作为新父项递归调用该函数。

让我们从第一次调用开始。我们需要传递顶级父 ID 0（但我们不会调用它parentId以避免与parentid数据项中的现有属性混淆）。矛盾的是，我们还必须传递数据数组。这似乎是多余的，因为它已经是tmpl()的第一个参数，但这是因为调用的模板只能看到当前项，而不是原始数组，除非我们显式传递它。生成的代码类似于：

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

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

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

  • 公开适当的类（f_level对于顶级，inner_level否则），这可以通过${}模板标签和三元条件运算符来实现，

  • 以原始数据数组和当前项为新的父项递归调用自身，通过{{tmpl}}模板标签实现。

生成的模板是：

<script id="menuTemplate_inner" type="text/x-jquery-tmpl">
    {{if parentid == $item.forParent}}
        <li class="${ parentid ? 'inner_level' : 'f_level' }" id="cat_${id}">
            ${name} (${desc})
        </li>
        <ul>
            {{tmpl($item.clientData, {
                clientData: $item.clientData,
                forParent: id
            }) "#menuTemplate_inner"}}
        </ul>
    {{/if}}
</script>

你可以在这个 fiddle中测试它。

于 2012-10-20T11:40:50.660 回答