管理员中的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
});

记住两点:

  • 如果要继承,则javascript代码必须进入模板块 admin/change_form.html 或者它不会在最终的HTML中呈现。

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

支持早于4.1的Django版本

如果您的事件侦听器仍然必须支持旧版本的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)
    }
})