模版部分
---------------------------------------------------------------------
{% extends "base.html" %}
{% block content %}
<h1>用户列表</h1>
<table class="table">
<thead>
<tr>
<th>
<input type="checkbox" id="select-all" style="display: none;">
<label for="select-all" id="select-all-label">全选</label>
</th>
<th>姓名</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>
<td><input type="checkbox" class="item-check" value="{{ message.id }}" style="display: none;"></td>
</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<a href="{{ url_for('edit_user', id=user.id) }}" class="btn btn-primary btn-sm">编辑</a>
<a href="{{ url_for('delete_user', id=user.id) }}" class="btn btn-danger btn-sm">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<button id="batch-select" class="btn btn-primary">批量选择</button>
<button id="batch-delete" class="btn btn-danger" disabled>批量删除</button>
{% endblock %}
----------------------------------------------------------------------------------------------------------
modal部分:
--------------------------------------------------------
<!-- 确认删除的模态框 -->
<div class="modal fade bs-example-modal-center" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel">确认删除</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
是否确定删除选中的数据?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
</div>
</div>
</div>
</div>
-------------------------------------------------------------------------
模版js部分
----------------------------------------------------------------------------------------------------------
<script>
var selectAllCheckbox = document.getElementById('select-all');
var selectAllLabel = document.getElementById('select-all-label');
var batchSelectBtn = document.getElementById('batch-select');
var batchDeleteBtn = document.getElementById('batch-delete');
var itemChecks = document.querySelectorAll('.item-check');
// 隐藏复选框和批量删除按钮
itemChecks.forEach(function(check) {
check.style.display = 'none';
});
batchDeleteBtn.style.display = 'none';
// 当点击“批量选择”按钮时触发
batchSelectBtn.addEventListener('click', function() {
// 显示复选框和批量删除按钮
itemChecks.forEach(function(check) {
check.style.display = 'block';
});
batchDeleteBtn.style.display = 'block';
selectAllCheckbox.style.display = 'inline-block';
selectAllLabel.style.display = 'inline-block';
this.style.display = 'none';
});
// 当全选复选框状态改变时触发
selectAllCheckbox.addEventListener('change', function() {
if (this.checked) {
// 全选
itemChecks.forEach(function(check) {
check.checked = true;
});
} else {
// 取消全选
itemChecks.forEach(function(check) {
check.checked = false;
});
}
// 更新批量删除按钮状态
updateBatchDeleteBtnState();
});
// 当复选框被选中或取消选中时触发
itemChecks.forEach(function(check) {
check.addEventListener('change', function() {
// 更新批量删除按钮状态
updateBatchDeleteBtnState();
});
});
// 更新批量删除按钮状态的函数
function updateBatchDeleteBtnState() {
if (document.querySelector('.item-check:checked')) {
batchDeleteBtn.disabled = false;
} else {
batchDeleteBtn.disabled = true;
}
}
// 点击批量删除按钮时触发
// 点击批量删除按钮时触发
batchDeleteBtn.addEventListener('click', function() {
// 显示确认删除的模态框
$('#confirmModal').modal('show');
});
// 点击确认删除按钮时触发
confirmDeleteBtn.addEventListener('click', function() {
var checkedItems = document.querySelectorAll('.item-check:checked');
var ids = '';
for (var i = 0; i < checkedItems.length; i++) {
ids += checkedItems[i].value + ',';
}
// 将选中的复选框的值提交到服务器
window.location.href = '/batch_delete?ids=' + ids;
});
</script>
Flask 路由部分
------------------------------------------------------------------------------------------------------------------
@manage_bp.route('/batch_delete')
@requires_manage_group(11)
def batch_delete():
ids = request.args.get('ids', '')
ids = ids.split(',')
# 尝试将所有需要删除的用户找到并删除
try:
users_to_delete = User.query.filter(User.id.in_(map(int, ids))).all()
for user in users_to_delete:
db.session.delete(user)
db.session.commit()
flash('选中的数据已被删除')
except Exception as e:
db.session.rollback() # 回滚事务
flash('删除数据时出现错误: {}'.format(str(e)))
return redirect(url_for('user_list'))
本文转载自互联网,如有侵权,联系删除。