java+js递归循环树实现无限下拉菜单

分手后的思念是犯贱 2022-04-18 00:53 234阅读 0赞

![20181106110658727.png][]![20181106110715611.png][]

目前项目中需要做文章管理，每篇文章要选择文章分类，而文章的分类有层级性且没有层级限制，所以选择分类时可能会面临无限下拉菜单

我的想法是做成上图一样的如果有下一级鼠标悬浮则在右侧显示子集菜单，由于不知道具体有几层关系，所以在java端的数据获取和js端的dom对象生成都是有递归循环实现的。

1.数据格式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70][] 库是mysql，标准的父子集关系

2.java生成树状json数据

//递归循环所有子集，并拼接成字符串
    public List<Map<String,Object>> getSubCategory(Map<String,String> params) {
        List<Map<String,Object>> list=articleService.getArticleCategory(params);
        for (Map<String,Object> item : list) {
            params.put("categoryParentId", item.get("category_id").toString());
            List<Map<String,Object>> subList = this.getSubCategory(params);
            item.put("subList",subList);
        }
        return list;
    }
    
    //获取栏目树（递归查询）
    @ResponseBody
    @RequestMapping(value = "getArticleCategoryTree1", produces = "text/plain;charset=UTF-8")
    public String getArticleCategory1(@RequestParam Map<String,String> params) {
        RetBase ret=new RetBase();
        params.put("categoryParentId","0");
        List<Map<String,Object>> list=this.getSubCategory(params);
        ret.setData(list);
        ret.setSuccess(true);
        return JSON.toJSONString(ret);
    }

开始只需要在参数params中设置需要遍历的最顶端父级id为categoryParentId,就可以递归生成含子集（subList）的树状结构，并用json返回前台即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 1][]

返回的json：

[{
    	"category_createtime": 1539139789000,
    	"category_createtime1": "2018-10-10 10:10:49",
    	"category_id": 1,
    	"category_name": "一级目录",
    	"category_parent_id": 0,
    	"category_status": "YES",
    	"subList": [{
    		"category_createtime": 1539139792000,
    		"category_createtime1": "2018-10-10 10:10:52",
    		"category_id": 2,
    		"category_name": "二级目录",
    		"category_parent_id": 1,
    		"category_status": "YES",
    		"subList": [{
    			"category_createtime": 1539139794000,
    			"category_createtime1": "2018-10-10 10:10:54",
    			"category_id": 3,
    			"category_name": "三级目录",
    			"category_parent_id": 2,
    			"category_status": "YES",
    			"subList": [{
    				"category_createtime": 1539139799000,
    				"category_createtime1": "2018-10-10 10:10:59",
    				"category_id": 4,
    				"category_name": "四级目录",
    				"category_parent_id": 3,
    				"category_status": "YES",
    				"subList": []
    			}, {
    				"category_createtime": 1539139802000,
    				"category_createtime1": "2018-10-10 10:10:02",
    				"category_id": 5,
    				"category_name": "四级目录",
    				"category_parent_id": 3,
    				"category_status": "YES",
    				"subList": []
    			}]
    		}]
    	}]
    }, {
    	"category_createtime": 1539139804000,
    	"category_createtime1": "2018-10-10 10:10:04",
    	"category_id": 6,
    	"category_name": "一级目录",
    	"category_parent_id": 0,
    	"category_status": "YES",
    	"subList": []
    }]

3.html样式

这个下拉菜单的样式是layui中的，引入layui的css和js后引用下面代码则可生成下拉菜单demo

4.js递归遍历数据并生成html

//递归类型树
    function recursionCategory(data){
        var ul=$('<ul class="menu"></ul>');
        for(item in data){
            var li=$('<li><a href="#">'+data[item].category_name+'</a></li>');
            var sublist=data[item].subList;
            if(sublist!=null && sublist.length>0){
                li.find("a").append('<i class="arrow Hui-iconfont"></i>');
                li.append(recursionCategory(sublist))
            }
            ul.append(li)
        }
        return ul;
    }
    
    //加载文章分类菜单
    function loadCategory(){
    
        $.ajax({
            type: 'POST',
            url: '${ctx}/webmana/article/getArticleCategoryTree1',
            dataType: 'json',
            data:{
            },
            success: function(data){
                if(data.success){
                    //console.log(JSON.stringify(data.data))
                    var data=data.data;
                    var ul=recursionCategory(data);
                    $(".codeView").append(ul);
                    $(".codeView>ul").addClass("dropDown-menu").addClass("radius").addClass("box-shadow");
                }else{
                }
            },
            error:function(data) {
                //console.log(data.msg);
            },
        });
    }

[20181106110658727.png]: https://img-blog.csdnimg.cn/20181106110658727.png
[20181106110715611.png]: /images/20220418/6af1fbd156bc4e56a6dfd0c06209d968.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70]: /images/20220418/9d5c997560a2463ba266c2072a889647.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 1]: /images/20220418/f8265fe8599c4bf28ddbd6f14a24abf7.png