java复选框批量删除_Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 08.批量删除...

批量删除

请参照如上章节导航进行阅读

接下来实现 账户列表 页面的 批量删除 操作，预期实现的画面效果如下：

批量选择

删除确认

样式引入

复选框的样式需要使用 icheck-bootstrap 插件，在 resources_head.jsp 文件中引入：

表头复选框

注意命名，代码如下：

行复选框

注意命名，代码如下：

提取通用

列表的 全选与反选 功能是通用功能，下面我们将常用方法提取到公用文件 table-utils.js 中，代码如下：

let Table = function() {

const checkAll = $('#checkAll');

const checkItems = $('input[name="checkItem"]');

/**

* CheckBox 全选与取消全选

*/

let handleInitCheckboxClick = function() {

checkAll.click(function() {

if ($(this).prop('checked')) {

// 全选

checkItems.prop('checked', true);

} else {

// 取消全选

checkItems.prop('checked', false);

}

});

}

/**

* 获取 CheckBox 选择值

* @returns {any[]}

*/

let handleGetCheckboxCheckedValues = function() {

let arrCheckedValues = new Array();

checkItems.each(function() {

if ($(this).prop('checked')) {

arrCheckedValues.push($(this).val())

}

})

return arrCheckedValues;

}

return {

init: function() {

handleInitCheckboxClick();

},

getCheckboxCheckedValues: function() {

return handleGetCheckboxCheckedValues();

}

}

}();

$(function() {

Table.init();

});

使用

使用时只需将 table-utils.js 文件引入，代码如下：

4.1.视图页面脚本代码

// 批量删除

function multiDelete() {

let userKeys = Table.getCheckboxCheckedValues();

if (userKeys.length == 0) {

Message.showFail('请至少选择一条记录');

return;

}

ModalDialog.showConfirm('multi-delete-confirm', '操作确认', '批量删除后数据不可恢复，您确认要操作吗？', multiDelete_callback, userKeys);

}

function multiDelete_callback(userKeys) {

$.ajax({

'url': '/auth/manager/multi-delete',

'type': 'POST',

'data': { 'userKeys': userKeys.toString() },

'dataType': 'JSON',

'success': function(ret) {

if (ret.status === 200) {

location.href = '/auth/manager/list';

// Message.showSuccess(ret.message);

} else {

Message.showFail(ret.message);

}

}

});

}

脚本中使用模态确认弹框，所以需要引入 modal-dialog-utils.js 公用文件。

4.2.为批量删除按钮添加事件

批量删除

4.3.为AuthManagerMapper.xml增加语句

增加 multiDelete 语句定义，代码如下：

DELETE FROM auth_manager

WHERE user_key IN

#{userKey}

WHERE 1 = 2

4.4.修改AuthManagerDao接口

增加 multiDelete 方法定义，代码如下:

/**

* 批量删除

*

* @param userKeys

*/

void multiDelete(String[] userKeys);

4.5.修改AuthManagerService接口

增加 multiDelete 方法定义，代码如下:

/**

* 批量删除

*

* @param userKeys

*/

void multiDelete(String[] userKeys);

4.6.修改AuthManagerServiceImpl实现

增加 multiDelete 方法定义，代码如下:

@Override

public void multiDelete(String[] userKeys) {

authManagerDao.multiDelete(userKeys);

}

4.7.修改ManagerController控制器

增加 multiDelete 方法，代码如下：

@ResponseBody

@RequestMapping(value = "multi-delete", method = RequestMethod.POST)

public BaseResult multiDelete(String userKeys) {

try {

String[] arrUserKeys = userKeys.split(",");

if (arrUserKeys == null || arrUserKeys.length <= 0) {

return BaseResult.fail("请至少选择一条记录");

}

for (String userKey : arrUserKeys) {

if ("8c41b9a54b2e2a4180cc1271b4672779".equals(userKey)) {

return BaseResult.fail("不能删除默认管理员账号:xiaojun.liu");

}

}

authManagerService.multiDelete(arrUserKeys);

return BaseResult.success("操作成功");

} catch (Exception ex) {

return BaseResult.fail("未知错误");

}

}

重启 Tomcat 测试验证功能效果。

实例源码已经托管到如下地址：

上一篇：分页功能

如果对课程内容感兴趣，可以扫码关注我们的 公众号 或 QQ群，及时关注我们的课程更新