管理站点中的JavaScript自定义

内联形式事件

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

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

事件使用django.jQuery namespace触发。

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

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

{% block admin_change_form_document_ready %}
{{ block.super }}
<script type="text/javascript" src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}
app/static/app/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或者不会在最终的HTML中呈现，JavaScript代码必须位于模板块中。
  • {{ 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 type="text/javascript" src="{% static 'app/unregistered_handlers.js' %}"></script>
{% endblock %}
app/static/app/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
});