python - 如果在下拉列表中选择特定值，Django Admin 显示/隐藏字段

Question

在 Django 管理中，当从下拉列表中选择 Custom 选项时，我想显示内联 start_date 和 end_date 字段允许用户指定特定的开始和结束日期，而不是预定义的时间段。

经过一段时间的研究，建议包括:使用隐藏字段，在 ModelAdmin 中定义重写 get_form，或使用自定义 Javascript(我对它零经验)。

问题:当特定值(Custom) 在 Django Admin 字段的下拉列表中被选中？当未选择 Custom 时，start_date 和 end_date 将从 View 中隐藏。

---

第 1 步:

第 2 步:

第 3 步:

---

下面是我在本地的确切示例代码的完整示例:

settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    ...
    'dropdown.apps.DropdownConfig',
]

apps.py

from django.apps import AppConfig

class DropdownConfig(AppConfig):
    name = 'dropdown'

模型.py

from django.db import models

class DropdownModel(models.Model):

    CHOICES = (
        ('Today', 'Today'),
        ('Yesterday', 'Yesterday'),
        ('Last 7 Days', 'Last 7 Days'),
        ('Last 14 Days', 'Last 14 Days'),
        ('Last 30 Days', 'Last 30 Days'),
        ('Last 60 Days', 'Last 60 Days'),
        ('Last 90 Days', 'Last 90 Days'),
        ('This Year', 'This Year'),
        ('All Time', 'All Time'),
        ('Custom', 'Custom')
    )

    date_range = models.CharField(max_length=15)
    start_date = models.DateField()
    end_date = models.DateField()

表单.py

from django import forms
from dropdown.models import DropdownModel

class DropdownModelForm(forms.ModelForm):

    class Meta:
        model = DropdownModel
        fields = ('date_range',)
        widgets = {
            'date_range': forms.Select(choices=DropdownModel.CHOICES)
        }

admin.py

from django.contrib import admin
from dropdown.models import DropdownModel
from dropdown.forms import DropdownModelForm

class DropdownModelAdmin(admin.ModelAdmin):
    fieldsets = (
        ('Date Range', {
            'fields': ('date_range', ('start_date', 'end_date'))
        }),
    )
    form = DropdownModelForm

admin.site.register(DropdownModel, DropdownModelAdmin)

Answer 1

此问题的目的:如果在 Django 管理表单下拉列表中选择了特定选项，则显示/隐藏字段集。

解决方案概述:您需要将字段集分成两个而不是一个，自定义 javascript，在 ModelAdmin 中定义 Media 类。

[第一步] 在我名为 dropdown 的项目中，我添加了以下文件夹/文件:

• 静态(目录)
• 静态/下拉(目录)
• static/dropdown/js(目录)
• static/dropdown/js/base.js(文件)

[第二步]在admin.py中，需要注意几点:

1. 我将 fieldsets 分成了两个而不是一个。
2. 请注意，我正在为每个字段集定义类。 abcdefg 是我要显示和隐藏的字段集类的名称。
3. 我定义了 class Media。这会告诉 Django 到哪里寻找自定义 JavaScript 和 CSS 文件。

admin.py

from django.contrib import admin
from dropdown.models import DropdownModel
from dropdown.forms import DropdownModelForm

class DropdownModelAdmin(admin.ModelAdmin):

    fieldsets = (
        ('Date Range', {
            'fields': ('date_range',),
            'classes': ('predefined',)
        }),
        (None, {
            'fields': (('start_date', 'end_date'),),
            'classes': ('abcdefg',)
        })
    )

    form = DropdownModelForm

    class Media:
        js = ('dropdown/js/base.js',)

admin.site.register(DropdownModel, DropdownModelAdmin)

[第三步] 添加javascript。我不相信这个脚本；我只是从 here 稍微修改了一下.

base.js

(function($) {
    $(function() {
        var selectField = $('#id_date_range'),
            verified = $('.abcdefg');

        function toggleVerified(value) {
            if (value === 'Custom') {
                verified.show();
            } else {
                verified.hide();
            }
        }

        // show/hide on load based on existing value of selectField
        toggleVerified(selectField.val());

        // show/hide on change
        selectField.change(function() {
            toggleVerified($(this).val());
        });
    });
})(django.jQuery);

[第四步]

表单.py

from django import forms
from dropdown.models import DropdownModel

class DropdownModelForm(forms.ModelForm):

    class Meta:
        model = DropdownModel
        fields = ('date_range',)
        widgets = {
            'date_range': forms.Select(choices=DropdownModel.CHOICES)
        }