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 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);

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.

Terkadang anda akan butuh bekerja dengan tanaman jQuery yang tidak terdaftar dalam namespace django.jQuery. Untuk melakukan itu, cukup rubah bagaimana kode mendengarkan untuk peristiwa-peristiwa. Daripada membungkus pendengar dalam namespace django.jQuery, cukup mendengar pada peristiwa dipicu dari sana. Sebagai contoh:

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