la mise en œuvre simple dTree

Premier modèle layui dTree

données var = { 
                status: {code: 200, message: "操作成功"}, 
                données: [ 
                {id: "001", titre: "湖南省", parentId: "0"}, 
                {id: "002", titre: "湖北省", parentId: "0"}, 
                {id: "003", titre: "广东省", parentId: "0"}, 
                {id: "004", titre: "浙江省", parentId : "0"}, 
                {id: "005", titre: "福建省", parentId: "0"}, 
                {id: "001001", titre: "长沙市", parentId: "001"}, 
                {id : "001002", titre: "株洲市", parentId: "001"}, 
                {id: "001003",titre: "Xiangtan", parentId: "001"}, 
                {ID: "001004", titre: "Hengyang", parentId: "001"}, 
                {ID: "001 005", titre: "Chenzhou City", parentId : "001"},
                {id: "002001", titre: "武汉市", parentId: "002"},
                {id: "003001", titre: "广州市", parentId: "003"}, 
                {id: "004001", titre: "杭州市", parentId: "004"} 
            ] 
        }

rendus

les noms de champs de base de données que possible compatibles avec le modèle, vous pouvez utiliser un alias incompatible

couche de contrôle

/ ** 
 * <p> 
 *前端控制器
 * </ p> 
 * 
 * @author ZHS 
 * @since 17.03.2020 
 * / 
@RestController 
@RequestMapping ( "dept /") 
public class DeptController { 
    @Autowired 
    DeptService privé deptService ; 


    / ** 
     *加载部门管理左边的部门树的JSON 
     * / 
    @RequestMapping ( "loadDeptManageLeftTreeJson") 
    publique DataGridView loadDeptManageLeftTreeJson (DeptVo deptVo) { 
        Liste <Dept> Liste = deptService.list (); 
        Liste <TreeNode> TreeNodes = new ArrayList <> (); 
        pour (département Département: liste) { 
            propagation booléen = dept.getOpen () == 1? vrai faux;
            treeNodes.add (nouveau TreeNode (dept.getId (), dept.getPid (), dept.getTitle (), diffusion)); 
        } 
        Return new DataGridView (TreeNodes); 
    } 
}

Code frontal

<! DOCTYPE html> 
<html> 
<head> 
    <meta charset = "UTF-8"> 
    <title>左侧部门树</ title> 
    <meta name = "renderer" = "webkit"> 
    <meta http-equiv = "X-UA-Compatible" content = "IE = bord, chrome = 1"> 
    <meta http-equiv = "Accès-Control-Allow-Origin" content = "*"> 
    <meta name = "viewport" content = "width = dispositif de largeur, initiale échelle = 1, au maximum échelle = 1"> 
    <meta name = "apple-mobile-web-app-status-bar de style" content = "black"> 
    <meta name = » apple-mobile-web-app-capable » content = "yes"> 
    <meta name = "format détection"content = "téléphone = no"> 
    <link rel = "icône" href = "/ favicon.ico">  
    <link rel = "stylesheet" href = "/ resources / layui / css / layui.css" media = "all" />
    <link rel = "stylesheet" href = "/ resources / css / public.css" media = "all" />
    <link rel = "stylesheet" href = "/ resources / layui_ext / dTree / dtree.css" media = "all" /> 
    <link rel = "stylesheet" href = "/ resources / layui_ext / dTree / font / dtreefont.css "media =" all »/> 
</ head> 
<body> 
<! -存放树的容器-> 
<ul id = "deptTree" class = "dTree" data-id = "0"> </ ul> 

<script type = "text / javascript" src = "/ ressources / layui / layui.js"> </ script> 
<type script = "text / javascript"> 
    layui.extend ({ 
        dTree: « / resources / layui_ext / dTree / dTree » // {/}的意思即代表采用自有路径,即不跟随base de 路径
    }). L' utilisation ([ 'dTree', 'couche', 'jquery'],function () { 
        var = Dtree layui.dtree;  
        var layer = layui.layer;
        $ = layui.jquery; 


        // initialize arbre 
        var = deptTree dtree.render ({
            élém: "#deptTree", 
            dataStyle: "layuiStyle", // données de format de style en utilisant layui 
            dataFormat: "liste", // données de configuration de style Liste 
            Réponse: {Message: "MSG", statusCode: 0}, // modifier la définition des données renvoyées en réponse 
            url: "/ département / loadDeptManageLeftTreeJson" // chargement de l' utilisation des URL (chargement des données existent) 
        }); 

        noeud // bind clic 
        dtree.on ( "noeud ( 'deptTree' )", fonction (obj) { 
            layer.msg (le JSON.stringify (obj.param)); 
        }); 
    }); 


</ script> 
</ body> 
</ HTML>

enfin rendus

la mise en œuvre simple dTree

Je suppose que tu aimes