使用 JavaScript 在 Django 管理站点上添加动态字段

Question

我在 Python 3.7 中使用 Django 2.2，我的问题有两个部分：

1. 主要目标是在管理页面上的模型上创建动态字段，例如，我有一个带有多个选项的CharField ，并且只有该charfield显示为null值，所以如果我将其更改为某个选项，另一个charfield将出现在下面有更多选项可供选择，当然，所有的charfields都定义在models.py ，只是在满足条件之前从管理站点隐藏，我认为最好的方法是使用 JavaScript，我添加了/media/文件夹到我的项目，但我不太明白如何在管理站点上集成 JavaScript，对此有什么帮助吗？
2. 我是 JavaScript 的初学者，我什至不知道如何访问模型属性以使用.show()和.show() .hide()方法，任何人都可以指出我正确的方向来建立简单的条件来显示或隐藏基于另一个字段？

我的管理类包含我想要隐藏和显示字段的模型，如下所示：

class RecipesAdmin(admin.ModelAdmin):
    fieldsets = [
        ("Title/Description", {"fields": ["recipe_title", "recipe_ingredients"]}),
        ("Ingredients sequence", {"fields": ["sequence"]}),
        ("Recipe Sequence", {"fields": ["motor1", "motor2", "motor3", "motor4", "pump", "temp", "recipe_interval"]}),
        ("Photo and Create Date", {"fields": ["recipe_photo", "recipe_created"]})
    ]

    formfield_overrides = {
        models.TextField: {'widget': TinyMCE()}
    }

如果你看到“配方序列”它有多个值，我希望 motor2、3、4 和其余的都根据前一个出现，所以不知道如何从 JavaScript 访问这部分代码

Answer 1

我通过以下方式自己解决了这个问题，我将指向 java 脚本文件的 Media 类添加到我的管理类 RecipesAdmin 中，并在 fieldsets 数组中定义类：

class RecipesAdmin(admin.ModelAdmin):
    fieldsets = [
        ("Title/Description", {"fields": ["recipe_title", "recipe_ingredients"]}),
        ("Ingredients sequence", {"fields": ["sequence"]}),
        (None, {"fields": ["sequence2",], "classes": ("HiddenSequence",)}),
        ("Photo and Create Date", {"fields": ["recipe_photo", "recipe_created"]})
    ]

    class Media:
       js = ('main/JS/ShowOrHideSequence.js',)

如您所见，“sequence2”字段具有“HiddenSequence”类，这将使我可以使用 JavaScript 控制一切，JavaScript 代码如下：

$(function($) {
    $(function() {
        var sequence = $('#id_sequence'), verified = $('.HiddenSequence');

        function toggleVerified(value, HiddenSeq) {
            if (value !== '') {
                HiddenSeq.show();
            } else {
                HiddenSeq.hide();
            }
        }

        // show/hide on load based on pervious value of selectField
        toggleVerified(sequence.val(), verified);

        // show/hide on change
        sequence.change(function() {
            toggleVerified($(this).val(), verified);
        });
    });
});

请注意，我在互联网上发现了这个 JavaScript，不是我自己制作的，正如你所知道的，它的作用是验证值“sequence”是否与 '' 不同，如果为真，则显示序列 2，如果为假，它隐藏它。

javascript 文件需要位于静态文件夹中。