管理的 JavaScript 自定义

内联表单事件

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

Changed in Django 4.1:

在较早的版本中，事件是一个带有 $row 和 formsetName 参数的 jQuery 事件。现在它是一个带有在 event.detail 中设置的参数的 JavaScript CustomEvent。

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

  1. {% extends 'admin/change_form.html' %}
  2. {% load static %}
  4. {% block admin_change_form_document_ready %}
  5. {{ block.super }}
  6. <script src="{% static 'app/formset_handlers.js' %}"></script>
  7. {% endblock %}

app/static/app/formset_handlers.js

  1. document.addEventListener('formset:added', (event) => {
  2.     if (event.detail.formsetName == 'author_set') {
  3.         // Do something
  4.     }
  5. });
  6. document.addEventListener('formset:removed', (event) => {
  7.     // Row removed
  8. });

有两点需要注意：

  • 如果你继承了 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，然后按如下方式退回到旧的监听器签名：

  1. function handleFormsetAdded(row, formsetName) {
  2.     // Do something
  3. }
  5. $(document).on('formset:added', (event, $row, formsetName) => {
  6.     if (event.detail && event.detail.formsetName) {
  7.         // Django >= 4.1
  8.         handleFormsetAdded(event.target, event.detail.formsetName)
  9.     } else {
  10.         // Django < 4.1, use $row and formsetName
  11.         handleFormsetAdded($row.get(0), formsetName)
  12.     }
  13. })