目录
一、功能说明
需要实现的效果是:勾选左边的复选框,点击删除,会请求后台接口,根据选择行的角色id批量删除角色。
二、项目结构
三、前端代码
前端使用ajax和后端交互,具体代码如下:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<button>添加</button>
<button type="button" id="delete">删除</button>
<table id="list" border="1"></table>
<script src="../js/jquery.min.js"></script>
<script src="../js/index.js"></script>
</body>
</html>
index.js
let ids = [];
let base = "http://localhost:8080";
function selectRow(id) {
ids.push(id);
console.log(ids);
}
function clear() {
let initHtml = "";
initHtml += "<tr>";
initHtml += "<th>选择</th>";
initHtml += "<th>角色ID</th>";
initHtml += "<th>角色名</th>";
initHtml += "<th>等级</th>";
initHtml += "<th>评分</th>";
initHtml += "<th>金币</th>";
initHtml += "</tr>";
$("#list").empty();
$("#list").append(initHtml);
}
function loadData() {
let requestUrl = "/role_account/selectByPage";
$.get(base + requestUrl, {
page: 1,
rows: 10
}, function (response) {
if (response.code === 200) {
let children = "";
let result = response.data;
let list = result.rows;
for(let i = 0; i < list.length; i++) {
let data = list[i];
children += "<tr>";
children += "<td><input type='checkbox' onclick='selectRow(" + data.id + ")'></td>";
children += "<td>" + data.id + "</td>";
children += "<td>" + data.name + "</td>";
children += "<td>" + data.grade + "</td>";
children += "<td>" + data.score + "</td>";
children += "<td>" + data.jinbi + "</td>";
children += "</tr>";
}
clear();
$("#list").append(children);
} else {
alert(response.message);
}
});
}
$(document).ready(function () {
loadData();
$("#delete").click(function () {
let length = ids.length;
if (length === 0) {
alert("请选择要删除的数据");
} else {
let bool = confirm("是否确认删除?");
if(bool) {
let form = new FormData();
form.append("ids", ids);
$.ajax({
url: base + "/role_account/deleteByIds",
data: form,
cache: false,
async: true,
type: "POST",
dataType: 'json',
processData: false,
contentType: false,
success: function (response) {
loadData();
},
error: function(res) {
if (res && res.responseJSON) {
let response = res.responseJSON;
if (res.status && res.status === 404) {
alert("路径" + response.path + "不存在。");
} else {
alert(response.message);
}
}
}
});
}
}
});
});
四、后端代码
controller层
@CrossOrigin
@RestController
@Api(tags = "角色账号管理")
@RequestMapping(path = "/role_account", produces="application/json; charset=utf-8")
public class RoleAccountController {
private final RoleAccountService service;
@Autowired
public RoleAccountController(RoleAccountService service) {
this.service = service;
}
@ApiOperation("通过id批量删除角色")
@RequestMapping(value = "/deleteByIds", method = RequestMethod.POST)
public JsonResult<Void> deleteByIds(@RequestParam("ids") List<String> ids) {
service.deleteByIds(ids);
return JsonResult.success("删除成功");
}
@ApiOperation("分页查询角色列表")
@RequestMapping(value = "/selectByPage", method = RequestMethod.GET)
public JsonResult<PageResult<RoleAccount>> selectByPage(RoleAccountPager pager) {
Page<RoleAccount> page = service.selectByPage(pager);
return JsonResult.restPage(page);
}
}
service层
@Service
public class RoleAccountServiceImpl implements IRoleAccountService {
@Autowired
private RoleAccountMapper mapper;
@Override
public void deleteByIds(List<String> ids) {
mapper.deleteBatchIds(ids);
}
}
mapper层
持久层使用了MyBatis-Plus
@Repository
public interface RoleAccountMapper extends BaseMapper<RoleAccount> {
}
好了,本章就分享到这里了,感谢阅读~