使用bootstrap的treeview插件实现树状结构数据显示

1. 建立数据库表结构

（1）、建立部门department表，表结构如下图所示

（2）、建立用户users表，表结构如下图所示

2.编写department.mapper的SQL语句

<select id="getTreeList" resultType="java.util.HashMap" >
    select id,name text,level,parent_id "parentid" from department
  </select>

3.在业务层编写返回树状结构数据

/**
     * 返回树状结构数组
     * @return
     */
    public ArrayList<Map<Object, Object>> getTreeList() {
        //取出数据
       List<HashMap<Object,Object>> resultMap = departmentMapper.getTreeList();
       System.out.println("结果MAP:"+resultMap);
       //定义一个Map集合  存储按指定顺序排列好的菜单
        Map<String,List<Map<Object,Object>>> temp = new HashMap<String,List<Map<Object, Object>>>();
        for (HashMap<Object,Object> map : resultMap) {
            //如果temp的键包含这个parentid
            if(temp.containsKey(map.get("parentid").toString())) {
                //么把所有相同parentid的数据全部添加到该parentid键下
                temp.get(map.get("parentid").toString()).add(map);
            }else {
                //初始化temp
                List<Map<Object,Object>> list = new ArrayList<Map<Object, Object>>();
                list.add(map);
                temp.put(map.get("parentid").toString(),list);
            }
        }

        //定义一个完整菜单列表
        ArrayList<Map<Object,Object>> array = new ArrayList<Map<Object,Object>>();

        for (HashMap<Object,Object> hashMap : resultMap) {
            //如果temp中的键与当前id一致
            if (temp.containsKey(hashMap.get("id").toString())){
                //说明temp是当前id菜单的子菜单
                hashMap.put("nodes",temp.get(hashMap.get("id").toString()));
            }
            //遇到顶级菜单就添加进完整菜单
            if (hashMap.get("parentid").toString().equals("0")){
                array.add(hashMap);
            }
        }
        return array;
    }

4.controller层返回json字符串

@RequestMapping(value = "/menu",method = RequestMethod.GET,produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public ArrayList<Map<Object,Object>> getMenu(){
        ArrayList<Map<Object,Object>> menus = departmentService.getTreeList();
        return menus;
    }

5.页面接收字符串

5.1引入treeview相关js

5.2js加载

var url = "/demo/common/menu";
            $.get(url, {}, function (data) {
                init(data);
            }, 'json')
//页面初始化时，发送异步请求，获取tree数据


//加载tree数据

            var init = function (data) {
                return $("#main").treeview({
                    data: data,
                    color: "#428bca",
                    levels: 2,
                    onNodeSelected: function (event, node) {
                        console.log(node.id);
                        var url = "/demo/user/find";
                        var id = node.id;
                        $.post(url,{"id":id},function (data) {
                            $("#tbody").empty();
                            userInfo(data);
                        },'json')
                    },
                });
            }

 

最终效果如下：

 

感谢这位老哥，我的实现也是基于他的文章，附上原网址：https://blog.csdn.net/cm777/article/details/81137440

感谢这位老哥。