优汇林
登录
AI工具导航

flask 添加批量删除功能

网友分享2025-01-17 13:18:45
flask 框架 ,模版用 bootstrap 的table显示数据,需要添加批量删除功能,请给出代码


模版部分
---------------------------------------------------------------------
{% 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">&times;</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'))

    本文转载自互联网,如有侵权,联系删除。

    本文链接:https://www.youhuilin.com/html/68.html

    图片名称

    相关内容

    分享

    复制链接

    优汇林在线咨询

    上班时间:9:00-22:00
    周六、周日:14:00-22:00