zTree框架的学习

Updated on with 0 views and 0 comments

zTree框架

zTree 前端框架

树结构菜单

http://www.treejs.cn/v3/main.php#_zTreeInfo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树结构</title>
    <link rel="stylesheet" type="text/css" href="../zTree_v3-master/css/demo.css">
    <link rel="stylesheet" type="text/css" href="../zTree_v3-master/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="../zTree_v3-master/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../zTree_v3-master/js/jquery.ztree.all.js"></script>
</head>
<body>
<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>
<script type="text/javascript">
    /*var setting = {	};

    var zNodes =[
        { name:"父节点1 - 展开", open:true,
            children: [
                { name:"父节点11 - 折叠",
                    children: [
                        { name:"叶子节点111"},
                        { name:"叶子节点112"},
                        { name:"叶子节点113"},
                        { name:"叶子节点114"}
                    ]},
                { name:"父节点12 - 折叠",
                    children: [
                        { name:"叶子节点121"},
                        { name:"叶子节点122"},
                        { name:"叶子节点123"},
                        { name:"叶子节点124"}
                    ]},
                { name:"父节点13 - 没有子节点", isParent:true}
            ]},
        { name:"父节点2 - 折叠",
            children: [
                { name:"父节点21 - 展开", open:true,
                    children: [
                        { name:"叶子节点211"},
                        { name:"叶子节点212"},
                        { name:"叶子节点213"},
                        { name:"叶子节点214"}
                    ]},
                { name:"父节点22 - 折叠",
                    children: [
                        { name:"叶子节点221"},
                        { name:"叶子节点222"},
                        { name:"叶子节点223"},
                        { name:"叶子节点224"}
                    ]},
                { name:"父节点23 - 折叠",
                    children: [
                        { name:"叶子节点231"},
                        { name:"叶子节点232"},
                        { name:"叶子节点233"},
                        { name:"叶子节点234"}
                    ]}
            ]},
        { name:"父节点3 - 没有子节点", isParent:true}

    ];

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });*/

    $(function(){
        var setting = {
            async: {
                enable: true,
                url: "../menu/findAll",
                autoParam: ["id", "name"]
            }
        };
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting);
        });
    })
</script>
</body>
</html>

pojo

package com.offcn.entity;

import lombok.Data;

import java.io.Serializable;
import java.util.List;

@Data
public class Menu implements Serializable {
    private Integer id;
    private String name;
    private String url;
    private Boolean isParent = false;
    private List<Menu> children;
}

Controller

@RequestMapping("findAll")
public List<Menu>findAll(){
    return menuService.findAll();
}

ServiceImpl

public List<Menu> findAll() {
    List<Menu> menus = menuMapper.selectAll();
    menus = change(menus);
    System.out.println(menus);
    return menus;
}
private List<Menu> change(List<Menu> list) {
    if(list != null && list.size() > 0){
        for(Menu menu : list){
            Integer menuId = menu.getId();//上级菜单的id
            //下级菜单集合
            List<Menu> menuList = menuMapper.selectByParentID(menuId);
            if(menuList != null && menuList.size() > 0) {
                //递归 -- 方法自己调用自己
                menuList = change(menuList);

                menu.setChildren(menuList);
                menu.setIsParent(true);
            }else{
                menu.setChildren(null);
            }
        }
    }
    return list;
}

Mapper

<!--查第一级菜单-->
<select id="selectAll" resultType="com.offcn.entity.Menu">
    SELECT * FROM t_menu WHERE parentMenuId IS NULL
</select>

<!--使用父id查子菜单-->
<select id="selectByParentID" parameterType="int" resultType="com.offcn.entity.Menu">
    SELECT * FROM t_menu WHERE parentMenuId = #{value}
</select>
标题：zTree框架的学习
作者：HB2Ocean
地址：http://future-hb.top:8080/articles/2021/08/29/1630240547313.html

↑ ↓