implementación sencilla de dtree

Primer modelo dtree layui

datos var = { 
                status: {código: 200, mensaje: "操作成功"}, 
                datos: [ 
                {id: "001", título: "湖南省", parentId: "0"}, 
                {id: "002", título: "湖北省", parentId: "0"}, 
                {id: "003", el título: "广东省", parentId: "0"}, 
                {id: "004", el título: "浙江省", parentId : "0"}, 
                {id: "005", el título: "福建省", parentId: "0"}, 
                {id: "001001", título: "长沙市", parentId: "001"}, 
                {id : "001002", título: "株洲市", parentId: "001"}, 
                {id: "001003",Título: "Xiangtan", parentId: "001"}, 
                {ID: "001004", título: "Hengyang", parentId: "001"}, 
                {ID: "001 005", el título: "La ciudad de Chenzhou", parentId : "001"},
                {id: "002001", título: "武汉市", parentId: "002"},
                {id: "003001", título: "广州市", parentId: "003"}, 
                {id: "004001", título: "杭州市", parentId: "004"} 
            ] 
        }

representaciones

nombres de los campos de base de datos posible en consonancia con la plantilla, se puede usar un alias inconsistente

capa del controlador

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


    / ** 
     *加载部门管理左边的部门树的JSON 
     * / 
    @RequestMapping ( "loadDeptManageLeftTreeJson") 
    pública DataGridView loadDeptManageLeftTreeJson (DeptVo deptVo) { 
        List <Departamento> list = deptService.list (); 
        Lista <TreeNode> TreeNodes = new ArrayList <> (); 
        para (Dpto departamento: lista) { 
            propagación booleano = dept.getOpen () == 1? verdadero Falso;
            treeNodes.add (nueva NodoArbol (dept.getId (), dept.getPid (), dept.getTitle (), propagación)); 
        } 
        Return new DataGridView (TreeNodes); 
    } 
}

código de front-end

<! DOCTYPE html> 
<html> 
<head> 
    <meta charset = "UTF-8"> 
    <title>左侧部门树</ title> 
    <meta name = contenido "procesador" = "webkit"> 
    <meta http-equiv = "X-UA-Compatible" content = "IE = orilla, cromo = 1"> 
    <meta http-equiv = "-control-Allow-origen de acceso" content = "*"> 
    <meta name = "viewport" content = "width = dispositivo de ancho, inicial escala = 1, de máxima escala = 1"> 
    <meta name = "apple-mobile-web-app-status-bar de estilo" content = "negro"> 
    <meta name =" "content = "apple-móvil-web-app-capaz yes"> 
    <meta name = "formato de detección"content = "teléfono = no"> 
    <link rel = "icono" href = "/ favicon.ico"> 
    <link rel = "stylesheet" href = "/ recursos / layui / css / layui.css" media = "all" /> 
    <link rel = "stylesheet" href = "/ recursos / css / public.css" los medios de comunicación = "all" />
    <link rel = "stylesheet" href = "/ recursos / layui_ext / dtree / dtree.css" los medios de comunicación = "all" /> 
    <link rel = "stylesheet" href = "/ recursos / layui_ext / dtree / fuente / dtreefont.css "los medios de comunicación =" all"/> 
</ head> 
<body> 
<! -存放树的容器-> 
<ul id = "" class = "deptTree dtree" data-id = "0"> </ ul> 

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


        // Inicializar el árbol 
        var = deptTree dtree.render ({
            elem: "#deptTree", 
            dataStyle: "layuiStyle", // datos de formato de estilo utilizando layui 
            dataFormat: "lista", // los datos de configuración de estilo de Lista 
            de Respuesta: {Mensaje: "MSG", statusCode: 0}, // modificar la definición de los datos devueltos en respuesta 
            url: "/ dept / loadDeptManageLeftTreeJson" // url uso de carga (carga con los datos existe) 
        }); 

        // bind nodo clic 
        dtree.on ( "nodo ( 'deptTree' )", función (obj) { 
            layer.msg (el JSON.stringify (obj.param)); 
        }); 
    }); 


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

finalmente representaciones

implementación sencilla de dtree

Supongo que te gusta