树目录递归查询

前台展示：可参考layui 网址https://www.layui.com/demo/tree.html

前台代码

<!--引入layui的样式  去官网下载-->
<link rel="stylesheet" type="text/css" href="/assets/public/js/layui/css/layui.css"/>
 <div>
       <div id="test1" class="demo-tree demo-tree-box"></div>
 </div>
 <!--引入layui的js  去官网下载-->
<script type="text/javascript" src="${ctx}/assets/public/js/layui/layui.all.js"></script>            
<script>

    $(function () {
        var catalogs = "";
        //这个ajax是我从后台拿来的数据String类型的json格式字符串
        $.ajax({
            async:false,
            type: "GET",
            url: "${ctx}/home/seeCatalog",
            data:{
                cid:${courseId}
            }
        }).done(function (data) {
            if (data.success) {
                catalogs = data.content;
            } else {
                alert("失败");
            }
        });
        layui.use(['tree', 'util'], function () {
            var tree = layui.tree
                , layer = layui.layer
                , util = layui.util
                //模拟数据1  后台ajax请求拿来的数据源
                , data1 = JSON.parse(catalogs);
            //常规用法
            tree.render({
                elem: '#test1' //默认是点击节点可进行收缩
                , data: data1
                ,click: function(obj){//点击事件 当点击某个节点时要做的事情
                    var data = obj.data;  //获取当前点击的节点数据 data.某个属性就可以展示出来
                    //layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data)+"==="+data.name);
                    var type = data.course_id
                    //业务代码 省略。。。。。 
                }
            });
        });
    });
</script>

后台拼凑数据格式

//模拟数据
  data1 = [{
    title: '江西'
    ,id: 1
    ,children: [{
      title: '南昌'
      ,id: 1000
      ,children: [{
        title: '青山湖区'
        ,id: 10001
      },{
        title: '高新区'
        ,id: 10002
      }]
    },{
      title: '九江'
      ,id: 1001
    },{
      title: '赣州'
      ,id: 1002
    }]
  },{
    title: '广西'
    ,id: 2
    ,children: [{
      title: '南宁'
      ,id: 2000
    },{
      title: '桂林'
      ,id: 2001
    }]
  },{
    title: '陕西'
    ,id: 3
    ,children: [{
      title: '西安'
      ,id: 3000
    },{
      title: '延安'
      ,id: 3001
    }]
  }]

如果是数据都在一张表中 需要 id name（树结构中是title 不然无法显示名称） parentId

public Object seeCatalog(Searchable searchable, Model model,Long cid) {
    //一级+n级目录  
    List<Map<String, Object>> catalogList = catalogService.findAllByCourseId(cid);
    for(int i=0;i<catalogList.size();i++){
        Map<String, Object> map = catalogList.get(i);
        //生成树 默认第一节点展开状态
        if("0".equals(map.get("parentId").toString())){
            map.put("spread",true);
        }
        map.put("title",map.get("name"));
    }

    //调用递归循环的方式 生成树所需数据
    List<Map<String, Object>> resultList1  = getLevelData(catalogList, "0");
    String json = JSON.toJSONString(resultList1);
    return new AjaxResponse<>(true, "查询成功", json, AjaxResponse.MessageLevel.success);


}

 //递归查询树结构方法
 private List<Map<String, Object>> getLevelData(List<Map<String, Object>> dbList, String parentcode) {
        List<Map<String, Object>> resultList = new ArrayList<>();
        for (Map<String, Object> data : dbList) {
            if (data.get("parentId").toString().equals(parentcode) ) {
                List<Map<String, Object>> childList = getLevelData(dbList,data.get("id").toString());
                data.put("children", childList);
                resultList.add(data);
            }
        }
        return resultList;
    }

最终会生成所需的树结构数据 返回给前台data里面

不太清楚的可以找我,有错误或更好的方法都可以沟通 微信 DBdb_0107