管理后台中的 JavaScript 自定义

内联表单事件

您可能希望在管理更改表单中添加或移除内联表单时执行一些 JavaScript。 formset:addedformset:removed 事件允许这样做。 event.detail.formsetName 是该行所属的表单集。对于 formset:added 事件,event.target 是新添加的行。

在您的自定义 change_form.html 模板中,扩展 admin_change_form_document_ready 块并添加事件监听器代码

{% extends 'admin/change_form.html' %}
{% load static %}

{% block admin_change_form_document_ready %}
{{ block.super }}
<script src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}
app/static/app/formset_handlers.js
document.addEventListener('formset:added', (event) => {
    if (event.detail.formsetName == 'author_set') {
        // Do something
    }
});
document.addEventListener('formset:removed', (event) => {
    // Row removed
});

需要牢记的两点

  • 如果您正在继承 admin/change_form.html,则 JavaScript 代码必须放在模板块中,否则它将不会在最终的 HTML 中呈现。

  • {{ block.super }} 被添加是因为 Django 的 admin_change_form_document_ready 块包含处理更改表单中各种操作的 JavaScript 代码,我们也需要呈现这些代码。

支持 Django 4.1 之前的版本

如果您的事件监听器仍然需要支持旧版本的 Django,则必须使用 jQuery 来注册您的事件监听器。jQuery 处理 JavaScript 事件,但反之则不然。

您可以检查 event.detail.formsetName 的存在,并回退到旧的监听器签名,如下所示

function handleFormsetAdded(row, formsetName) {
    // Do something
}

$(document).on('formset:added', (event, $row, formsetName) => {
    if (event.detail && event.detail.formsetName) {
        // Django >= 4.1
        handleFormsetAdded(event.target, event.detail.formsetName)
    } else {
        // Django < 4.1, use $row and formsetName
        handleFormsetAdded($row.get(0), formsetName)
    }
})
返回顶部