Crowdfunding： Menu maintenance Ready to work

一、功能演示

1、zTree:

2、新建/修改：

3、删除：

4、数据库表数据：

pid是父节点的id。

在数据库表中通过pid字段，让当前记录指向它的父节点的记录，从而形成树形结构。

5、自关联：一条记录关联了同一个表中的其他记录。

二、****

1、加工实体类

public class Menu {
    //主键
    private Integer id;
    //父节点id（如果为null，则说明当前节点是根节点）
    private Integer pid;
    //节点名称
    private String name;
    //节点对应的url地址
    private String url;
    //图片
    private String icon;
    //当前节点的子节点集合,设置默认值是为了避免组装节点时空指针异常
    private List<Menu> children = new ArrayList<>();
    //控制节点展开与折叠，true代表展开
    private Boolean open = true;

    public Menu() {}

    public Menu(Integer id, Integer pid, String name, String url, String icon) {
        this.id = id;
        this.pid = pid;
        this.name = name;
        this.url = url;
        this.icon = icon;
    }

    @Override
    public String toString() {
        return "Menu{" +
                "id=" + id +
                ", pid=" + pid +
                ", name='" + name + '\'' +
                ", url='" + url + '\'' +
                ", icon='" + icon + '\'' +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public Integer getPid() {
        return pid;
    }

    public void setPid(Integer pid) {
        this.pid = pid;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name == null ? null : name.trim();
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url == null ? null : url.trim();
    }

    public String getIcon() {
        return icon;
    }

    public void setIcon(String icon) {
        this.icon = icon == null ? null : icon.trim();
    }


    public Boolean getOpen() {
        return open;
    }

    public void setOpen(Boolean open) {
        this.open = open;
    }

    public List<Menu> getChildren() {
        return children;
    }

    public void setChildren(List<Menu> children) {
        this.children = children;
    }
}

三、结构创建：Handel、service。

四、显示树形结构

1、后端操作：把树行结构组装好，给前端返回根节点对象，在根节点中包含子节点，子节点中再包含下一级的子节点。

2、handler、service方法的具体操作：

@RestController
public class MenuHandler {

    @Autowired
    private MenuService menuService;

    @RequestMapping("/menu/get/whole/tree")
    public ResultEntity<Menu> getWholeTree(){
        //1、查询所有的树形节点用于组装
        List<Menu> menus = menuService.getAll();

        //2、声明变量用于存储根节点对象
        Menu rootNode = null;

        //3、遍历List<Menu>
        for (Menu menu:menus){
            //4、获取当前Menu对象的pid属性
            Integer pid = menu.getPid();

            //5、判断pid是否为null
            if (pid == null){
                //6、如果pid为null,说明当前节点是根节点，所以赋值
                rootNode  = menu;
                //7、根节点没有父节点，不必找父节点组装，本次for循环停止执行，继续执行下一次循环
                continue;
            }

            //8、既然pid不为null,根据pid查找当前节点的父节点
            for (Menu maybeFather:menus){
                //9、获取当前节点id
                Integer id = maybeFather.getId();
                //10、判断外层循环的pid是否等于内层循环的id
                if (Objects.equals(pid,id)){
                    //11、组装：将menu添加到maybeFather的子节点集合中
                    maybeFather.getChildren().add(menu);
                }
            }

        }
        return ResultEntity.successWithoutData(rootNode);
    }
}

3、性能分析：以上handler方法出现了两层for嵌套循环。

@RequestMapping("/menu/get/whole/tree")
public ResultEntity<Menu> getWholeTreeNew(){
    //1、查询所有的树形节点用于组装
    List<Menu> menus = menuService.getAll();
    //2、将List<Menu>转化为Map<Menu的id,Menu>
    Map<Integer,Menu> menuMap = new HashMap<>();
    for (Menu menu:menus){
        Integer id = menu.getId();
        menuMap.put(id,menu);
    }
    //3、声明变量用于存储根节点对象
    Menu rootNode = null;

    //4、遍历List<Menu>
    for (Menu menu:menus) {
        //5、获取当前Menu对象的pid属性
        Integer pid = menu.getPid();

        //6、判断pid是否为null
        if (pid == null) {
            //7、如果pid为null,说明当前节点是根节点，所以赋值
            rootNode = menu;
            //8、根节点没有父节点，不必找父节点组装，本次for循环停止执行，继续执行下一次循环
            continue;
        }
        //9、既然pid不为null,根据pid查找当前节点的父节点
        Menu father = menuMap.get(pid);
        //10、组装：将menu添加到maybeFather的子节点集合中
        father.getChildren().add(menu);
    }
    return ResultEntity.successWithoutData(rootNode);
}

测试：http://localhost:8080/menu/get/whole/tree.json

4、前端操作

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list">
                </i> 权限菜单列表 <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal">
                <i class="glyphicon glyphicon-question-sign"></i></div></div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>

五、加入zTree环境

六、显示Tree

<script type="text/javascript">
   $(function () {
       //setting 对象中包含zTree的设置属性
       var setting = {};

       //发送Ajax请求获取zNodes数据
       $.ajax({
           "url":"menu/get/whole/tree.json",
           "type":"post",
           "dataType":"json",
           "success":function (response) {
               var result = response.result;
               if (result == "SUCCESS"){
                   //用于显示树形结构的节点
                   var zNodes = response.data;
                   //执行树形结构的初始操作
                   $.fn.zTree.init($("#treeDemo"),setting,zNodes);
               }
               if (result == "FAILED"){
                   layer.msg("加载菜单数据失败！"+response.message);
               }
           },
           "error":function (response) {
               layer.msg("加载菜单数据失败！"+response.message);
           }
       });
   });
</script>

切记不能使用：<script type="javascript">，而是使用<script type="text/javascript">

七、显示图标

my-menu.js:

八、阻止点击节点进行跳转

九、将生成树形结构的代码封装成函数