使用freemarker宏定义使用树形目录的展示

使用freemarker宏定义使用树形目录的展示

1、效果展示如下

2、前端代码

<div class="kcmenu">
    <div class="sidebar-wrapper" id="sidebar-wrapper">
        <div class="title"><span class="pull-left ti-arrow-circle-left"></span>课程目录</div>
        <div id="moremenu">
            <ul class="kcnav">
                <li><a style="cursor: pointer" onclick="searchCourseByCatalogId('0')">全部课程</a></li>
                [#list catalogList?sort_by("catalogOrderNo") as catalog]
                    <li>
                        <a style="cursor: pointer" [#if !catalog.sonCatalogs?? || catalog.sonCatalogs?size == 0]onclick="searchCourseByCatalogId('${catalog.catalogId}')"[/#if]>${catalog.catalogName}</a>
                        [#if catalog.sonCatalogs?? && catalog.sonCatalogs?size > 0]
                        <ul>
                            [@showCatalogTree catalog /]
                        </ul>
                        [/#if]
                    </li>
                [/#list]
            </ul>
        </div>
    </div>
</div>

3、freemarker宏定义

[#macro courseCenterBreadcrumb breadcrumbCatalogList]
    <ol class="breadcrumb">
        <li><a href="">首页</a></li>
        [#if breadcrumbCatalogList?size == 0]
            <li><a href="/lrm/controller/courseCenter/search" style="color: #417cf2;">课程中心</a></li>
        [#else]
            <li><a href="/lrm/controller/courseCenter/search">课程中心</a></li>
        [/#if]
        [#list breadcrumbCatalogList as catalog]
            [#if catalog_has_next]
                <li><a style="cursor: pointer" onclick="searchCourseByCatalogId('${catalog.catalogId}')">${catalog.catalogName}</a></li>
            [#else]
                <li><a style="cursor: pointer;color: #417cf2;" onclick="searchCourseByCatalogId('${catalog.catalogId}')">${catalog.catalogName}</a></li>
            [/#if]
        [/#list]
    </ol>
[/#macro]

4、由于宏定义中数据是递归的，所以后端数据也要组织好。

Map<String,String> catalogConditionMap = new HashMap();
catalogConditionMap.put("companyId", webUserSession.getCorpId());
List<Catalog> catalogList = catalogService.get(catalogConditionMap, Order.asc("catalog_order_no"));
Iterator<Catalog> iterator = catalogList.iterator();
while (iterator.hasNext()) {
    Catalog catalog = iterator.next();
    if(catalog.getParentCatalogId().equals("") || catalog.getParentCatalogId().equals("0")) {
        setCatalogChildren(catalog, webUserSession.getCorpId());
    } else {
        iterator.remove();
    }
}
modelMap.put("catalogList", catalogList);

private void setCatalogChildren(Catalog catalog,String companyId) {
    List<Catalog> sonCatalogList = catalogService.getByParentId(catalog.getCatalogId(),companyId);
    if(CollectionUtils.isNotEmpty(sonCatalogList)) {
        catalog.setSonCatalogs(sonCatalogList);
        for(Catalog sonCatalog : sonCatalogList) {
            setCatalogChildren(sonCatalog, companyId);
        }
    }

}

将目录树形结构组织成一颗树的形式。