導航樹的一個簡單例子

 

這裏以常用首頁的導航樹爲例子，返回所需要的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();
                })
            }