SSM中部门管理的下拉树功能实现
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";
}
});
}
浙公网安备 33010602011771号