java如何实现批量删除,批量删除功能如何实现!

1.实现页面布局效果

CMS系统无限级分类

拖拽级联排序功能

2.后端接口搭建，持久层sql使用mybatis及自定义sql

1. 创建子分类集合children，缓存子分类虚拟属性

public class CategoryChildrenDto extends CategoryDto{ private List<CategoryChildrenDto> children; public List<CategoryChildrenDto> getChildren() { return children; } public void setChildren(List<CategoryChildrenDto> children) { = children; } @Override public String toString() { final StringBuffer sb = new StringBuffer("CategoryChildrenDto{"); ("children=").append(children); ('}'); return (); } }

2.service生成tree型结构数据

//tree型结构输出list public List<CategoryChildrenDto> categoryTreeList(){ //1.获取所有分类 CategoryExample categoryExample=new CategoryExample(); ca("sort asc"); List<Category> categoryList=ca(categoryExample); List<CategoryChildrenDto> categoryChildrenList=Du(categoryList,Ca); //2.组装tree型结构 获取一级分类:过滤 List<CategoryChildrenDto> level1=ca().filter((category)->{ return ca().equals("00000000"); //递归设置子分类 }).map((cat)->{ cat.setChildren(getCategoryChildren(cat,categoryChildrenList)); return cat; //遍历结果排序 }).sorted((cat1,cat2)->{ return ()==null?0:ca())-()==null?0:cat2.getSort()); }).collec()); return level1; } //获取某一个分类的子分类，需要传入(current当前分类实体,all所有分类实体集合)，递归查询子分类 private List<CategoryChildrenDto> getCategoryChildren(CategoryChildrenDto categoryChildrenDto,List<CategoryChildrenDto> categoryChildrenDtoList){ //1.过滤菜单 List<CategoryChildrenDto> categoryChildren= ca().filter(category->{ 父子分类判断 return ca().equal()); 递归查询，再次自调用获取子分类 }).map((category)->{ ca(getCategoryChildren(category,categoryChildrenDtoList)); return category; 排序 }).sorted((cat1,cat2)->{ //return ca(); //避免空指针异常 return ()==null?0:ca())-()==null?0:cat2.getSort()); //生成集合 }).collec()); return categoryChildren; }

3.controller生成treeList查询接口

//tree结构分类 @RequestMapping("/treeList") public ResponseDataDto getTreeList(){ ResponseDataDto responseData=new ResponseDataDto(); List<CategoryChildrenDto> categoryDtoList=ca(); re(categoryDtoList); return responseData; }

4.postman测试

postman测试tree型数据

前端页面获取响应结果data

3.前端category引用el-tree

elementUI-tree

• el-tree参数说明

:props绑定传入的参数及名称

:expand-on-click="false"取消点击行收缩/展开子分类，只有点击箭头时展开

@node-click:节点点击事件

show-checkbox：显示选择框

node-key：做整个树状结构的唯一标识，对应后端sql的uniId

default-expand-all：默认展开全部节点

default-expand-keys：默认展开的节点的数组

draggable：开启拖拽

:allow-drop:判断目标节点能否被放置 Function(draggingNode, dropNode, type)

@node-drop：拖拽成功时，触发的事件。被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event

|- type='prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后

ref=""为tree起别名，用于批量删除

|-(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数

1. 是否只是叶子节点，默认值为 false

2. 是否包含半选节点，默认值为 false

注意：传入一个数组

--》设置4级分类：3级分类显示append，4级分类显示remove

|-add判定：绑定level属性，sql中默认属性

|-remove判定

A：可以使用绑定的node属性，获取子节点信息的属性名=childNodes --》 v-if="node.level<=3"

node中的parent包含父节点信息data：node-》parent-》data-》list[0]-》uniId，用于展开之前操作元素的父级菜单

B：可以使用绑定的data属性，获取子节点信息的属性名=children --》 v-if="node.c;

<template> <div class="categoryTable"> <div class=""> <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span class="lineTitle">模块-总分类表列表</span></el-divider> </div> <div class="switchDrag"> <!--绑定switchDraggable参数，默认false，点击拖拽，显示批量保存--> <el-switch class="switchDragChoose" v-model="switchDraggable" active-text="开启拖拽" inactive-text="关闭拖拽"> </el-switch> <el-button v-if="switchDraggable" type="primary" class="switchDragBtn" @click="batchDraggableSave">批量保存 </el-button> <el-button type="danger" class="switchDragBtn" @click="batchDel">批量删除</el-button> </div> <div class="categoryTree"> <el-tree :data="categorys" :props="defaultProps" :expand-on-click-node="false" node-key="uniId" show-checkbox :default-expanded-keys="expendedKeys" :draggable="switchDraggable" :allow-drop="allowDrop" @node-drop="handleDrop" ref="categoryTree"> <span class="tree-node" slot-scope="{node,data}"> <span class="nodeIcon glyphicon glyphicon-folder-open"></span> <span class="labelName">{{node.label}}</span> <span class="option-btn"> <el-button class="opt-btn-add" icon="el-icon-circle-plus" v-if="node.level<=3" type="primary" size="mini" @click="() => append(data)" plain>新增</el-button> <el-button class="opt-btn-edit" icon="el-icon-question" type="primary" size="mini" @click="() => edit(data)" plain>修改</el-button> <el-button class="opt-btn-del" icon="el-icon-remove" v-if="node.c; type="primary" size="mini" @click="() => del(node,data)" plain>刪除</el-button> </span> </span> </el-tree> </div> <!-- :visible.sync ：接收一个boolean布尔值，true时显示 --> <div class="dialogModal"> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" > <el-form :model="category" ref="category" :rules="rules"> <el-form-item label="分类名称"> <el-input v-model="ca; autocomplete="off"></el-input> </el-form-item> <el-form-item label="排序"> <el-input v-model="ca; autocomplete="off"></el-input> </el-form-item> <el-form-item label="计量单位"> <el-input v-model="ca; autocomplete="off"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="save('category')">确 定</el-button> </span> </el-dialog> </div> </div> </template>

前端页面tree型数据生成

4.后端删除接口生成

• controller的del方法

/** * 指定请求的格式为Delete * 4.删除模块，如果为多个参数，就定义多个/{param}/{param} */ @DeleteMapping("/del/{uniId}") public ResponseDataDto del(@PathVariable String uniId) { LOG.info("传入的category uniId：{}", uniId); ResponseDataDto responseData = new ResponseDataDto(); ca(uniId); return responseData; }

• service的实现

//4.删除模块 public void delete(String uniId) { CategoryExample categoryExample = new CategoryExample(); ca(uniId); }

• 前端页面调用接口

//真删 del(node, category) { con("del的node：", node, "del的category：", category); /** * 前端=》路径内携带参数使用url：'../'+{param} * 后端=》requestMapping('../{param}') * void ...(@PathVariable String {param}) * * ***引用toast的showConfirm全局方法，需要定义局部变量_this * ***并且将存入的category转化为局部对象，才能获取到uniId */ let _this = this; let categoryParam = category; //el的确认框 this.$confirm(`是否删除当前【${ca}】分类？`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { _this.$axios.delete + '/business/admin/category/del/' + ca) .then((response) => { let resp = re; if ) { this.$message({ type: 'success', message: `【${ca}】分类删除成功！` }); con("删除模块-总分类表成功，删除的模块-总分类表名：", _this.ca); _(); //删除成功，展开之前的父节点 = [node.]; } }) }) .catch(() => { this.$message({ type: 'info', message: '已取消删除' }) }) },

单分类子分类删除，这里只能删除子分类（没有子分类的分类）

5.element-node节点获取父节点，展开之前操作的分类子分类，页面参数图解

父节点数据获取：Node---》parent--》data--》0--》uniId

6.后端接口生成：新增/修改

• controller-save(新增/修改统一接口)

//3.新增，流方式传参，加入@RequestBody @PostMapping("/save") public ResponseDataDto save(@RequestBody CategoryDto categoryDto) { LOG.info("传入的category DTO：{}", categoryDto); Valida(), "名称"); Valida(), "名称", 3, 255); Valida(), "父ID"); ResponseDataDto responseData = new ResponseDataDto(); ca(categoryDto); re(categoryDto); return responseData; }

• service-实现新增/修改/删除方法

//3.新增、修改category，将传入的id转为category对象本身 public void save(CategoryDto categoryDto) { Category category = Du(categoryDto, Ca); if ())) { (category); } else { (category); } } //4.删除模块 public void delete(String uniId) { CategoryExample categoryExample = new CategoryExample(); ca(uniId); } //5.向外暴露dto，不暴露实体类：插入数据 private void insert(Category category) { ca()); if (ca() == null) { ca("0"); } if () == null) { ca("0"); } if () == null) { ca(0); } ca(category); } //6.更新模块 private void update(Category category) { try { Date now = new Date(); String date = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(now); long time = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").parse(date).getTime(); int timeInt = (int) (time / 1000); } catch (ParseException e) { e.printStackTrace(); } ca(category); }

• 前端新增/更新调用后端接口，modal模态框传参页面实现

<!-- :visible.sync ：接收一个boolean布尔值，true时显示 --> <div class="dialogModal"> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" > <el-form :model="category" ref="category" :rules="rules"> <el-form-item label="分类名称"> <el-input v-model="ca; autocomplete="off"></el-input> </el-form-item> <el-form-item label="排序"> <el-input v-model="ca; autocomplete="off"></el-input> </el-form-item> <el-form-item label="计量单位"> <el-input v-model="ca; autocomplete="off"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="save('category')">确 定</el-button> </span> </el-dialog> </div> .... <script> append(data) { con("新增分类：", data); ;新增分类"; ;新增模块分类"; {}; = true; = da; = da * 1 + 1; = 1; = da * 1 + 1; }, save(formName) { let responseMsg = ''; con("新增分类：", ); //前端校验 this.$refs[formName].validate((valid) => { if (valid) { this.$axios.post + '/business/admin/category/save', ) .then((response) => { let resp = re; responseMsg = response; con("响应的错误信息：", responseMsg); con("re：", resp); if ) { con("保存总分类表成功：", re); //关闭对话框 = false; (); //展开父级菜单 = []; ("保存成功", "bottom-end"); } else { this.$notify({ title: '填写内容错误', message: re, position: "top-right", type: 'warning' }); } }) } else { con('error submit!!'); this.$notify({ title: '填写内容错误', message: '请按照提示内容填写正确信息', position: "top-right", type: 'warning' }); return false; } }); }, //4.修改 edit(category) { con("edit的category：", category); /*jquery继承对象： $.extend({新对象},旧对象) 避免vue数据绑定漏洞，更改数据时，随之更改显示的data，但实际没有进行真实保存数据库 */ ;更新分类"; ;更新模块分类"; =true; = category; }, </script>

• 实现效果

新增成功

修改成功

5.element-el-tree（draggingNode、dropNode、type全图解析）

参数说明：【开启:allow-drop=" allowDrop "】

draggingNode.level：当前node节点level

draggingNode.data：当前拖动节点属性

draggingNode.da：当前拖动节点层级

draggingNode.da：当前拖动节点à子节点属性

draggingNode.da：当前拖动节点à父节点ID

draggingNode.：当前拖动节点à父节点属性

draggingNode.：当前拖动节点à父节点层级

dragging-node当前拖拽节点信息

dropNode节点，获取放置目标节点相关属性

参数说明【开启@node-drop="nodeDrop"】返回拖拽成功节点

dro[*].data.*：获取拖拽到目标节点的所有子节点，包括draggingNode位置索引

dropNode拖拽到目标节点的属性参数

type=next放置在目标节点之后，拖动总层级计算

6.后端批量拖拽/删除更新接口

• controller增加接口：/update/level，请求体为json数组dto-list

//6.拖拽接口：批量修改level/sort和parentId @RequestMapping("/update/level") public ResponseDataDto updateLevel(@RequestBody CategoryDto[] categoryDtos){ ResponseDataDto responseData=new ResponseDataDto(); //返回collection集合，需要asList转换 re(categoryDtos)); return responseData; } //7.批量删除 @DeleteMapping("/delBatch") public ResponseDataDto delBatch(@RequestBody String[] uniIds){ ResponseDataDto responseData=new ResponseDataDto(); re(uniIds)); return responseData; }

• server-common创建方法，将传入的数组转化为list，解构传入sql实现

//8.批量更新节点level public List<Category> updateLevelByUniId(CategoryDto[] categoryDto){ //1.将传入的数组，转化为dtoList List<CategoryDto> categoryDtoList=Arrays.asList(categoryDto); //2.将dtoList复制到domainList List<Category> categoryList=Du(categoryDtoList,Ca); //3.循环domainList for(int i=0;i<ca();i++){ //4.获取每一个category对象 Category category=ca(i); //5.批量更新sql caSelective(category); } //boolean flag=commonModuleMa(categoryList); return categoryList; } //9.批量删除 public int delBatchCategory(String[] uniIds){ CategoryExample categoryExample=new CategoryExample(); //将String转化为list ca().andUniIdIn(uniIds)); //1.根据传入的数组删除 int flag=ca(categoryExample); return flag; }

• 前端页面更新方法，注意请求参数

axios自动封装请求体为json

批量删除实现

gitee提交第38次功能更新

• gitee提交，源码开放，长期维护，欢迎fork，关注，mark，点赞，收藏，转发

gitee地址：