Penyesuaian JavaScript di admin

Peristiwa-peristiwa formulir berderet

Anda ingin mengerjakan beberapa JavaScript ketika sebuah formulir berderet ditambahkan atau dipindahkan di formulir rubah admin. Event jQuery formset:added dan formset:removed mengizinkan ini. penangan event melewatkan tiga argumen:

  • event adalah peristiwa jQuery.
  • $row adalah baris baru ditambahkan (atau dipindahkan).
  • formsetName adalah formsetName baris milik.

Peristiwa dinyalakan menggunakan django.jQuery namespace.

Dalam cetakan change_form.html penyesuaian anda, perpanjang blok admin_change_form_document_ready dan tambah kode pendengar kejadian:

{% 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
(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);

Dua poin untuk diingat:

  • Kode JavaScript harus berada di blok cetakan jika anda mewarisi admin/change_form.html atau itu tidak akan dibangun dalam HTML akhir.
  • {{ block.super }} ditambahkan karena blok admin_change_form_document_ready Django mengandung kode JavaScript untuk mengangani beragam tindakan dalam formulir rubah dan kami butuh itu dibangun juga.

Sometimes you'll need to work with jQuery plugins that are not registered in the django.jQuery namespace. To do that, change how the code listens for events. Instead of wrapping the listener in the django.jQuery namespace, listen to the event triggered from there. For example:

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

{% block admin_change_form_document_ready %}
{{ block.super }}
<script 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
});