Flask：修改Worthy值后如何无刷新更新Adminer视图中Checked状态

方案1：自定义Flask界面添加AJAX实时更新 #

如果修改Worthy字段的操作在你自己开发的Flask视图中，可以通过前端AJAX在保存后主动获取最新Checked状态并更新页面：

1. 新增后端API接口：

@app.route('/api/get-checked/<int:model_id>')
def get_checked(model_id):
    model = YourModel.query.get_or_404(model_id)
    return jsonify({'checked': model.checked})

2. 前端提交后更新DOM：

// 绑定表单提交事件
document.getElementById('worthy-edit-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const modelId = this.dataset.modelId; // 表单上预先存储模型ID
    
    // 提交修改请求
    await fetch('/save-worthy', {
        method: 'POST',
        body: formData
    });
    
    // 获取最新Checked状态
    const res = await fetch(`/api/get-checked/${modelId}`);
    const data = await res.json();
    
    // 更新页面上的Checked显示元素
    const checkedEl = document.getElementById(`checked-status-${modelId}`);
    if (checkedEl.type === 'checkbox') {
        checkedEl.checked = data.checked;
    } else {
        checkedEl.textContent = data.checked ? '已勾选' : '未勾选';
    }
});

方案2：给Adminer添加自动刷新逻辑 #

如果必须使用Adminer作为操作界面，可通过浏览器脚本实现操作后局部刷新：

• 操作后即时更新当前行（油猴脚本示例）：

document.addEventListener('click', function(e) {
    // 匹配Adminer的保存按钮
    if (e.target.classList.contains('btn-primary') && e.target.textContent.includes('Save')) {
        setTimeout(() => {
            const selectedRow = document.querySelector('.row-selected');
            if (!selectedRow) return;
            
            const rowId = selectedRow.cells[0].textContent; // 假设第一列是模型ID
            // 请求该行最新数据并替换原有行
            fetch(window.location.pathname + `?id=${rowId}`)
                .then(res => res.text())
                .then(html => {
                    const parser = new DOMParser();
                    const newRow = parser.parseFromString(html, 'text/html').querySelector('.row-selected');
                    if (newRow) selectedRow.replaceWith(newRow);
                });
        }, 600); // 延迟确保后台完成数据更新
    }
});

• 定时刷新列表（简单版）：

// 每30秒刷新Adminer列表页
setInterval(() => {
    if (window.location.pathname.includes('/select')) {
        window.location.reload();
    }
}, 30000);

方案3：替换为Flask-Admin实现完全自定义 #

如果需要长期自定义交互，建议用Flask-Admin替代Adminer，可直接控制视图的前端行为：

1. 自定义模型视图：

from flask_admin.contrib.sqla import ModelView

class YourModelAdmin(ModelView):
    edit_template = 'custom_edit.html'
    
    def on_model_change(self, form, model, is_created):
        update_checked_after_change_worthy(model)
        super().on_model_change(form, model, is_created)

2. 自定义编辑模板custom_edit.html：

{% extends 'admin/model/edit.html' %}

{% block tail %}
    {{ super() }}
    <script>
        const editForm = document.getElementById('edit_form');
        editForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            const res = await fetch(this.action, {
                method: this.method,
                body: new FormData(this)
            });
            if (res.ok) {
                // 跳回列表页或在当前页更新状态
                window.location.href = '{{ url_for('yourmodeladmin.index') }}';
            }
        });
    </script>
{% endblock %}

注意事项 #

如果使用SQLAlchemy事件钩子而非Flask-Admin的on_model_change，需确保修改后的数据提交到数据库：

from sqlalchemy import event

@event.listens_for(YourModel, 'after_update')
def update_checked_after_change_worthy(mapper, connection, target):
    new_worthy = target.worthy
    old_worthy = 'No' if target.label == 0 else 'Yes'
    if new_worthy != old_worthy:
        connection.execute(
            YourModel.__table__.update()
            .where(YourModel.id == target.id)
            .values(checked=True)
        )

内容的提问来源于stack exchange，提问作者AbdUlRahman Mansy