ajax获取json来拼接layui的导航列表

想写一个layUI的三级列表。现在来记录下。

总的json格式

[{"id":1,"level":0,"pid":0,"catename":"库存管理","alink":"stock/index","sort":2,"status":true},{"id":2,"level":0,"pid":0,"catename":"个人办公","alink":"office/index","sort":0,"status":true},{"id":3,"level":0,"pid":0,"catename":"客户管理","alink":"Cust/index","sort":3,"status":true},{"id":4,"level":0,"pid":0,"catename":"人事管理","alink":"hr/index","sort":4,"status":true}'

想要改造成这样的。

[{
"title" : "后台首页",
"icon" : "icon-computer",
"href" : "page/main.html",
"spread" : false
},{
"title" : "二级菜单演示",
"icon" : "",
"href" : "",
"spread" : false,
"children" : [
{
"title" : "二级菜单1",
"icon" : "",
"href" : "",
"spread" : false
},
{
"title" : "二级菜单2",
"icon" : "",
"href" : "",
"spread" : false
}
]
}]

经过网上的参考。弄了两个Pojo来获得参数

public class TitleResult {
    private List<?> data;

    public List<?> getData() {
        return data;
    }

    public void setData(List<?> data) {
        this.data = data;
    }
}

这个是总的

public class TitleNode {
    private Integer id;
    private String title;
    private String icon;
    private String link;
    private Boolean status;
    private List<?> titleNode;

｝

这个是用来接收里面的data数据

通过查询pid为0的数据可以获得最外层的数据 ajax获取json来拼接layui的导航列表

在这里我使用了递归。

private List<?> getTitleList(int parentId){
    XyMenuExample menuExample=new XyMenuExample();
    XyMenuExample.Criteria criteria= menuExample.createCriteria();
    criteria.andPidEqualTo(parentId);

    List<XyMenu> list= menuMapper.selectByExample(menuExample);
    List<TitleNode> resultList=new ArrayList<TitleNode>();
    for (XyMenu menu:list){
        TitleNode titleNode=new TitleNode();
        titleNode.setTitle(menu.getCatename());
        titleNode.setLink(menu.getAlink());
        titleNode.setStatus(menu.getStatus());
        titleNode.setId(menu.getId());
        titleNode.setTitleNode(getTitleList(menu.getId()));
        resultList.add(titleNode);
    }
    return resultList;
}

通过传进来的 parentId 不断的去遍历

最后勉强的得到了想要的数据结构

下面这段代码是我用来拼接导航的html的

var html='';
//获取菜单
$.ajax({
    url:"/get/root" ,
    type:"post",
    dataType:"json",
    data:{},
    success:function (data) {
        var navs=data.data;
        html+='<ul class="layui-nav layui-nav-tree"  lay-filter="test">';
        $.each(navs,function (i,item) {
            html=html+'<li class="layui-nav-item">';
            html += '<a href="javascript:;" data-url="'+item.link+'" nav-id="'+item.id+'">' +
                '<cite>'+item.title+'</cite></a>';
            if(item.titleNode!=""&& item.titleNode.length>0){
                html += '<dl class="layui-nav-child">';
                $.each(item.titleNode,function (j,item2) {
                    html+='<dd>'
                    html += '<a href="javascript:;" data-url="'+item2.link+'" ' +
                        'nav-id="'+item2.id+'">' +
                        '<cite>'+item2.title+'</cite></a>';
                    if(item2.titleNode!=""&&item2.titleNode.length>0){
                        html += '<ol class="layui-nav-child">';
                        $.each(item2.titleNode,function (k,item3) {
                            html += '<li>'+
                                '<a href="javascript:;" data-url="'+item3.link+'" nav-id="'+item3.id+'">'+
                                '<cite>'+item3.title+'</cite>'+
                                '</a>'+
                                '</li>';
                        });
                        html+= '</ol>';
                    }
                });
                html+= '</dl>' ;
            }
            html+= '</li>';
        });
        html+='</ul>';
       // $('#admin-navbar-side').html(html);
    }

但是最后结果不是很理想

ajax获取json来拼接layui的导航列表第一层的数据出来了。查看页面元素。二、三层的数据也有。但是效果没有了。

先记录这。容我这个小菜鸟研究下。如果有大佬知道请告知。

在度娘这里找到了问题的解决方法

http://blog.sina.com.cn/s/blog_667ac0360102xbgw.html

我先试下

OK了在添加了html 片段后加入这句话用来更新所有element的元素

element.init();

截图留念

ajax获取json来拼接layui的导航列表