导航树的一个简单例子

这里以常用首页的导航树为例子，返回所需要的json格式

1.导航树对应的数据库

2.后端代码

1）自定义导航树的实体类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class TreeNode {
    private Integer id;
    private Integer pid;
    private String title;
    private String icon;
    private String href;
    private boolean spread;
    private List<TreeNode> children = new ArrayList<>();
    /**
     * 首页导航树构造器
     */
    public TreeNode(Integer id, Integer pid, String title, String icon, String href, boolean spread) {
        this.id = id;
        this.pid = pid;
        this.title = title;
        this.icon = icon;
        this.href = href;
        this.spread = spread;
    }
}

 2）导航树类的构建者，用于层级控制，这里只做二级

public class TreeNodeBuilder {
    /**
     * 构造层级关系的导航树
     *
     * @param treeNodes
     * @param topId
     * @return
     */
    public static List<TreeNode> build(List<TreeNode> treeNodes, Integer topId) {
        List<TreeNode> nodes = new ArrayList<>();
        for (TreeNode n1 : treeNodes) {
            if (n1.getPid() == topId) {
                nodes.add(n1);
            }
            for (TreeNode n2 : treeNodes) {
                if (n1.getId() == n2.getPid()) {
                    n1.getChildren().add(n2);
                }
            }
        }
        return nodes;
    }
}

 3）前端控制器menu返回的的json格式的类

@RestController
@RequestMapping("/menu")
public class MenuController {
    @Autowired
    private IPermissionService permissionService;

    @RequestMapping("/loadIndexLeftMenuJson")
    public DataGridView loadIndexLeftMenuJson(PermissionVo permissionVo) {
        //查询所有菜单
        QueryWrapper<Permission> queryWrapper = new QueryWrapper<>();
        //设置值查询菜单
        queryWrapper.eq("type", "menu");
        queryWrapper.eq("available", 1);//1表可用

        User user = (User) WebUtils.getSession().getAttribute("user");
        List<Permission> list = null;
        //超级管理员为0
        if (user.getType() == 0) {
            list = permissionService.list(queryWrapper);
        } else {
            //否则根据用户ID+角色+权限去查询
            // list=permissionService.list(queryWrapper);
        }
        List<TreeNode> treeNodes=new ArrayList<>();
        for (Permission p: list){
          Boolean spread =p.getOpen()==1?true:false;
          treeNodes.add(new TreeNode(p.getId(),p.getPid(),p.getTitle(),p.getIcon(),p.getHref(),spread));
        }
        //构造层级关系，建造者模式
        List<TreeNode> list2= TreeNodeBuilder.build(treeNodes,1);//最高层为1，0不要

        return new DataGridView(list2);
    }
}

3.获取json，怎么其实使用layui直接方法直接导入该json即可

           function getData(json){
                $.getJSON(tab.tabConfig.url,function(data){
                        dataStr = data.data;//DatagridView里面的data
                        //重新渲染左侧菜单
                        tab.render();
                })
            }