管理的 JavaScript 自定义¶
内联表单事件¶
当在管理员更改表单中添加或移除内联表单时,你可能希望执行一些 JavaScript。formset:added
和 formset:removed
事件允许这样做。event.detail.formsetName
是该行所属的表单集。对于 formset:added
事件,event.target
是新添加的行。
在较早的版本中,事件是一个带有 $row
和 formsetName
参数的 jQuery
事件。现在它是一个带有在 event.detail
中设置的参数的 JavaScript CustomEvent
。
在你的自定义 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 %}
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)
}
})