管理中的 JavaScript 自定义 — Django 文档

管理中的 JavaScript 自定义

内联表单事件

在管理更改表单中添加或删除内联表单时，您可能希望执行一些 JavaScript。 formset:added 和 formset:removed jQuery 事件允许这样做。 事件处理程序被传递三个参数：

• event 是 jQuery 事件。
• $row 是新添加（或删除）的行。
• formsetName 是该行所属的表单集。

该事件是使用 django.jQuery 命名空间 触发的。

在您的自定义 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 %}

应用程序/静态/应用程序/formset_handlers.js

(function($) {
    $(document).on('formset:added', function(event, $row, formsetName) {
        if (formsetName == 'author_set') {
            // Do something
        }
    });

    $(document).on('formset:removed', function(event, $row, formsetName) {
        // Row removed
    });
})(django.jQuery);

要记住的两点：

• 如果您继承 admin/change_form.html，JavaScript 代码必须放在模板块中，否则它不会在最终的 HTML 中呈现。
• 添加 模板:Block.super 是因为 Django 的 admin_change_form_document_ready 块包含 JavaScript 代码来处理更改表单中的各种操作，我们也需要渲染这些代码。

有时您需要使用未在 django.jQuery 命名空间中注册的 jQuery 插件。 为此，请更改代码侦听事件的方式。 不是将侦听器包装在 django.jQuery 命名空间中，而是侦听从那里触发的事件。 例如：

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

{% block admin_change_form_document_ready %}
{{ block.super }}
<script src="{% static 'app/unregistered_handlers.js' %}"></script>
{% endblock %}

应用程序/静态/应用程序/unregistered_handlers.js

django.jQuery(document).on('formset:added', function(event, $row, formsetName) {
    // Row added
});

django.jQuery(document).on('formset:removed', function(event, $row, formsetName) {
    // Row removed
});