管理者でのJavaScriptのカスタマイズ—Djangoドキュメント
提供:Dev Guides
< DjangoDjango/docs/3.0.x/ref/contrib/admin/javascript
管理者でのJavaScriptのカスタマイズ
インラインフォームイベント
管理者変更フォームでインラインフォームが追加または削除されたときに、JavaScriptを実行することをお勧めします。 formset:added
およびformset:removed
jQueryイベントはこれを可能にします。 イベントハンドラには、次の3つの引数が渡されます。
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 type="text/javascript" src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}
(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);
覚えておくべき2つのポイント:
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 type="text/javascript" src="{% static 'app/unregistered_handlers.js' %}"></script>
{% endblock %}
django.jQuery(document).on('formset:added', function(event, $row, formsetName) {
// Row added
});
django.jQuery(document).on('formset:removed', function(event, $row, formsetName) {
// Row removed
});