下拉树

1.添加部门的弹出层

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 5px" id="addOrUpdateDiv">
    <form action="" method="post" class="layui-form " id="dataFrm" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">父级部门</label>
            <div class="layui-input-block">
　　　　　　　　　　<!--隐藏域pid-->
　　　　　　　　　<input type="hidden" name="pid" id="pid">
                <ul id="deptTree" class="dtree" data-id="0"></ul>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入部门名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" lay-verify="required" autocomplete="off" placeholder="请输入部门地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">部门备注</label>
        <div class="layui-input-block">
           <textarea class="layui-textarea" name="remark" id="content"></textarea>
        </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">是否展开</label>
                <div class="layui-input-inline">
                    <input type="radio" name="open" value="1" title="展开" checked="">
                    <input type="radio" name="open" value="0" title="不展开">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">是否可用</label>
                <div class="layui-input-inline">
                    <input type="radio" name="available" value="1" title="可用" checked="">
                    <input type="radio" name="available" value="0" title="不可用">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">排序码</label>
                <div class="layui-input-inline">
                    <input type="text" name="ordernum" id="ordernum" lay-verify="required/number" autocomplete="off" placeholder="请输入排序码[>0]" class="layui-input" >
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center;">
                <button type="button" class="layui-btn" lay-submit="" id="doSubmit" ><span class="layui-icon layui-icon-release"></span>提交</button>
                <button type="reset" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加和修改的弹出层结束 -->

 2.dtree的样式引入

 　　<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" />

 3.dtree拓展

 layui.extend({
        dtree: '/resources/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['jquery','form','table','layer','dtree'],function(){
        var $=layui.jquery;
        var form=layui.form;
        var table=layui.table;
        var layer=layui.layer;
        var dtree=layui.dtree;

 4.初始化下拉树

　　　　//初始化下拉树
            var selectTree=dtree.renderSelect({
            elem: "#deptTree",
            width: "100%", // 指定树的宽度
            dataStyle:"layuiStyle", //使用layui 数据风格的格式
            dataFormat: "list",  //配置data风格为list
            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
            url: "/dept/loadDeptManageLeftTreeJson" // 使用url加载（可与data加载同时存在）
        });

 5.添加弹窗的提交刷新下拉树以及刷新左侧部门树

 //提交
        $("#doSubmit").click(function(){
            var data=$("#dataFrm").serialize();
            $.post(url,data,function(res){
                if(res.code==200){
                    tableIns.reload();
                    //刷新下拉树
                    selectTree.reload();
                    //刷新左侧的树
                    window.parent.left.deptTree.reload();
                }
                layer.msg(res.msg);
                layer.close(mainIndex);
            })
        })

 controller

package com.zhs.sys.controller;


import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.zhs.sys.common.DataGridView;
import com.zhs.sys.common.ResultObj;
import com.zhs.sys.common.TreeNode;
import com.zhs.sys.domain.Dept;
import com.zhs.sys.service.DeptService;
import com.zhs.sys.vo.DeptVo;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.*;

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


    /**
     * 加载部门管理左边的部门树的json
     */
    @RequestMapping("loadDeptManageLeftTreeJson")
    public DataGridView loadDeptManageLeftTreeJson(DeptVo deptVo){
        List<Dept> list = deptService.list();
        List<TreeNode> treeNodes = new ArrayList<>();
        for (Dept dept : list) {
            boolean spread = dept.getOpen() == 1 ? true : false;
            treeNodes.add(new TreeNode(dept.getId(),dept.getPid(),dept.getTitle(),spread));
        }
        return new DataGridView(treeNodes);
    }

    /**
     * 查询
     */
    @RequestMapping("loadAllDept")
    public DataGridView loadAllDept(DeptVo deptVo) {
        IPage<Dept> page=new Page<>(deptVo.getPage(), deptVo.getLimit());
        QueryWrapper<Dept> queryWrapper=new QueryWrapper<>();
        queryWrapper.like(StringUtils.isNotBlank(deptVo.getTitle()), "title", deptVo.getTitle());
        queryWrapper.like(StringUtils.isNotBlank(deptVo.getAddress()), "address", deptVo.getAddress());
        queryWrapper.like(StringUtils.isNotBlank(deptVo.getRemark()), "remark", deptVo.getRemark());
        //判断条件
        queryWrapper.eq(deptVo.getId()!=null, "id", deptVo.getId()).or().eq(deptVo.getId()!=null,"pid", deptVo.getId());
        //排序
        queryWrapper.orderByAsc("ordernum");
        this.deptService.page(page, queryWrapper);
        return new DataGridView(page.getTotal(), page.getRecords());
    }

    /**
     *
     * 加载最大排序码
     */
    @RequestMapping("loadDeptMaxOrderNum")
    public Map<String ,Object>loadDeptMaxOrderNum(){
        Map<String, Object> map = new HashMap<String, Object>();
        QueryWrapper<Dept> queryWrapper = new QueryWrapper<>();
        queryWrapper.orderByDesc("ordernum");
        List<Dept> list = deptService.list(queryWrapper);
        if (list.size()>0) {
            map.put("value",list.get(0).getOrdernum()+1);
        } else {
            map.put("value",1);
        }
        return map;
    }

    /**
     * 添加部门
     * @param deptVo
     * @return
     */
    @RequestMapping("addDept")
    public ResultObj addDept(DeptVo deptVo){
        try {
            deptVo.setCreatetime(new Date());
            deptService.save(deptVo);
            return  ResultObj.ADD_SUCCESS;
        } catch (Exception e) {
            e.printStackTrace();
            return ResultObj.ADD_ERROR;
        }
    }
    /**
     * 修改部门
     * @param deptVo
     * @return
     */
    @RequestMapping("updateDept")
    public ResultObj updateDept(DeptVo deptVo){
        try {
            deptService.updateById(deptVo);
            return  ResultObj.UPDATE_SUCCESS;
        } catch (Exception e) {
            e.printStackTrace();
            return ResultObj.UPDATE_ERROR;
        }
    }


}

修改页面的选中父级树节点

 //打开修改的弹出层
        function openUpdateDeptLayer(data){
            mainIndex=layer.open({
                type:1,
                content:$("#addOrUpdateDiv"),
                area:['800px','480px'],
                title:'修改部门',
                success:function(){
                    $("#dataFrm")[0].reset();
                    //装载新的数据
                    form.val("dataFrm",data);
                    //选中之前的父级部门 nodeId=data.pid
                    dtree.dataInit("deptTree",data.pid);
                    dtree.setSelectValue("deptTree");
                    url="/dept/updateDept";
                }
            });
        }