Java 树形菜单

树

树，使用的场景是比较多的，如系统中的权限管理，菜单管理，都可以依靠树来展示

ztree官方文档：http://www.treejs.cn/v3/faq.php#_206

如何构建树

方式一

1、构建树的实体类

public class TreeNode {

    private Integer id;
    /**
     * 所有的身份
     */
    private String name;
    /**
     * 父id
     */
    private Integer pid;
    /**
     * 当前菜单可能存在很多子菜单
     */
    private List<TreeNode> children;
}

2、模拟数据库，制造数据

/**
 * <简述> 模拟数据库数据
 * <详细描述> 模拟数据库数据
 * @author xw
 */
public class TreeNodeData {

    public static List<TreeNode> treeNodes;

    static {
        treeNodes = new ArrayList<>();
        treeNodes.add(new TreeNode(1,"全国",0));
        treeNodes.add(new TreeNode(2,"江苏省",1));
        treeNodes.add(new TreeNode(3,"安徽省",1));
        treeNodes.add(new TreeNode(4,"合肥市",3));
        treeNodes.add(new TreeNode(5,"滁州市",3));
        treeNodes.add(new TreeNode(6,"苏州市",2));
        treeNodes.add(new TreeNode(7,"南京市",2));
        treeNodes.add(new TreeNode(8,"玄武区",7));
        treeNodes.add(new TreeNode(9,"河北省",1));
        treeNodes.add(new TreeNode(10,"湖南省",1));
        treeNodes.add(new TreeNode(11,"蚌埠市",3));
        treeNodes.add(new TreeNode(12,"吴中区",6));
        treeNodes.add(new TreeNode(13,"工业园区",6));
        treeNodes.add(new TreeNode(14,"虎丘区",6));
    }
}

3、Controller层

/**
     * <简述> 构建树菜单
     * <详细描述> 构建树菜单
     *
     * @return java.lang.String
     * @author xw
     */
    @RequestMapping("/treeData")
    @ResponseBody
    public String treeData() {
        // 获取数据
        List<TreeNode> treeNodes = TreeNodeData.treeNodes;
        return JSON.toJSONString(getParentNode(treeNodes));
    }

    /**
     * <简述> 构建父菜单
     * <详细描述>  构建父菜单
     *
     * @param treeNodes 所有的数据
     * @return List<TreeNode>
     * @author xw
     */
    private List<TreeNode> getParentNode(List<TreeNode> treeNodes) {
        // 1、申明一个装载节点的父容器
        List<TreeNode> rootNode = new ArrayList<>();
        //2、遍历所有的节点
        for (TreeNode treeNode : treeNodes) {
            //判断是不是父菜单
            if (treeNode.getPid() == 0) {
                rootNode.add(treeNode);
            }
        }
        // 3、为父节点创建子节点
        for (TreeNode treeNode : rootNode) {
            // 构建子节点
            List<TreeNode> sonNode = buildSonNodeForRootNode(treeNodes, treeNode.getId());
            // 为每一个父节点赋值子节点
            treeNode.setChildren(sonNode);
        }
        return rootNode;
    }

    /**
     * <简述> 建立子节点
     * <详细描述> 建立子节点
     *
     * @param treeNodes 所有的数据
     * @param id        父节点的ID
     * @return List<TreeNode>
     * @author xw
     */
    private List<TreeNode> buildSonNodeForRootNode(List<TreeNode> treeNodes, Integer id) {
        // 装载菜单的容器
        List<TreeNode> childrenNode = new ArrayList<>();
        for (TreeNode treeNode : treeNodes) {
            // 如果当前菜单的父ID 和 父菜单的ID 一致，则说明此子菜单 是 该父菜单的子菜单
            if (treeNode.getPid().equals(id)) {
                childrenNode.add(treeNode);
            }
        }
        // 继续为子菜单 构建 子菜单
        for (TreeNode treeNode : childrenNode) {
            treeNode.setChildren(buildSonNodeForRootNode(treeNodes, treeNode.getId()));
        }
        // 如果菜单的个数为0 则说明没有子菜单。
        if (childrenNode.size() == 0) {
            return null;
        }
        return childrenNode;
    }

4、前端展示，通过使用ztree组件进行渲染，需要导入的js，以及css参考官方文档

<div class="content_wrap" >
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree" style="margin-top: 300px;display: inline"></ul>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        let zNodes = {};
        let setting = {};
        $.ajax({
            async:false,  // 设置成同步!!!
            url:"http://localhost:8071/oc-back/treeData.do",
            type:"get",
            contentType:"",   // 告诉服务器，请求的数据类型
            dataType:"json",  // 响应的数据类型
            success:function (data) {  // 请求发送 完毕之后的 响应数据
                // alert(data)
                zNodes = data;
            },
            error:function () {
                alert("请求出现错误!")
            },
            complete:function () {
                alert("请求发送完毕!")
            }
        })
        // 渲染树
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })
</script>

方式二

创建工具类 CityTreeUtil

public class CityTreeUtil {

    /**
     * <简述> 菜单列表
     * <详细描述> 菜单列表
     *
     * @param menu 传递的全部 数据
     * @return java.util.List<java.util.Map < java.lang.String, java.lang.Object>>
     * @author xw
     */
    public List<Map<String, Object>> cityList(List<TreeNode> menu) {
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
        for (TreeNode rootNode : menu) {
            Map<String, Object> mapArr = new LinkedHashMap<String, Object>();
            // 0 代表 最大的菜单
            if (rootNode.getPid() == 0) {
                mapArr.put("id", rootNode.getId());
                mapArr.put("name", rootNode.getName());
                mapArr.put("pid", rootNode.getPid());
                // 通过调用 menuChild 构建子菜单
                mapArr.put("children", menuChild(rootNode.getId(), menu));
                list.add(mapArr);
            }
        }
        return list;
    }

    /**
     * <简述> 子菜单
     * <详细描述> 子菜单
     *
     * @param id   父菜单的ID
     * @param menu 传递的全部 数据
     * @return java.util.List<java.util.Map < java.lang.String, java.lang.Object>>
     * @author xw
     */
    public List<Map<String, Object>> menuChild(Integer id, List<TreeNode> menu) {
        List<Map<String, Object>> lists = new ArrayList<Map<String, Object>>();
        for (TreeNode childrenNode : menu) {
            Map<String, Object> childArray = new LinkedHashMap<String, Object>();
            // 子菜单的父ID 和 父菜单的ID 是否一致 如果一致 则说明 该子菜单属于这个父菜单
            if (childrenNode.getPid().equals(id)) {
                childArray.put("id", childrenNode.getId());
                childArray.put("name", childrenNode.getName());
                childArray.put("pid", childrenNode.getPid());
                // 递归调用
                List<Map<String, Object>> menuChild = menuChild(childrenNode.getId(), menu);
                if (menuChild.size() > 0) {
                    childArray.put("children", menuChild);
                }
                lists.add(childArray);
            }
        }
        return lists;
    }