怎么在freemarker中使用递归

已有 9642人阅读此文 - - 经验分享

  在展示一个树形的结构时,一般是要兼顾无限多级的,树形结构的数据如下:


{
  "id": 1,
  "title": "一级目录",
  "children": [
    {
      "id": 2,
      "title": "一级子菜单1",
      "children": [
        {
          "id": 3,
          "title": "一级孙菜单1"
        }
      ]
    },
    {
      "id": 4,
      "title": "一级子菜单2",
      "children": [
        {
          "id": 5,
          "title": "一级孙菜单2"
        }
      ]
    }
  ]
}


    有很多树形JS插件可以自动解析并显示树形结构如ztree,jquery.tree等。但如果用freemarker该怎么实现这样的树形结构呢?

    这个时候需要用到递归来实现数据的展示,接下来将介绍一下,使用freemarker实现递归的方法。

首页需要使用macro定义一个宏(函数),macro的用法可以参考freemarker用户手册。

下面是这个宏的实现代码:

<#macro bpTree children>
    <#if children?? && children?size gt 0>
        <#list children as child>
        	<li value="${child.id}">
				${child.title}
        	</li>
				<#if child.children?? &&child.children?size gt 0>
				<ul>
					<@bpTree children=child.children />
				</ul>
				</#if>
        </#list>
    </#if>
</#macro>

页面调用的主入口代码:

<div>
<ul>
<#list treeList as tree>
    <li  value="${tree.id}">${tree.title}</li>
    <#if tree.children?? &&tree.children?size gt 0>
    <ul>
        <@bpTree children=tree.children />
    </ul>
    </#if>
</#list>
</ul>
</div>

    通过以上代码就可以实现了递归显示的问题,我在上面的代码中所有标签中未加入任何的class或id等属性,如果想显示成正常的树形结构,还需要相应的CSS代码,或者配合其它的插件如bootstrap的treeview等。这里就不介绍怎么实现一个完整的树了。


期待你一针见血的评论,Come on!