Django admin：如何在 Django 管理表单页面中动态显示输入值的计算值？

Question

我有一个表单，其中包含 'price'、'tax' 和 'discount' 字段 (IntegerFields)。然后还有一个名为 'total_price'.

的只读字段

当我们输入 'price'、'discount' 和 'tax' 时，应自动显示 'total_price' 值。如果我们更改 'discount' 或 'price' 那么 'total_price' 也会立即更改。

看到最终价格后，我们可以点击'Save'按钮。

如何在 Django 管理中实现这一点？

Answer 1

为此，您必须将自定义 Javascript 代码添加到您的管理页面。

您可以执行以下操作：

向管理员添加只读字段 - 它将显示 "total_price"
将自定义脚本添加到管理页面。
编写 JS 脚本 - 此脚本将完成 "live update" 的总价

您的管理员可能看起来像这样：

@admin.register(YourModel)
class YourModelAdmin(admin.ModelAdmin):

    # some code here...

    readonly_fields = ('total_price', )

    def total_price(self, obj):
        # return whatever initial value you want
        return obj.price - obj.price*obj.discount

    # This is important - adding custom script to admin page
    @property
    def media(self):
        media = super().media
        media._js.append('js/your-custom-script.js')
        return media

请记住 js/your-custom-script.js 必须在您的静态文件夹中。

更新： 您可以使用 Meta 嵌套 class:

来包含您的 JS，而不是覆盖 media 属性

class YourModelAdmin(admin.ModelAdmin):
    ...
    class Media:
        js = (
            'path-to-your-static-script-file.js',
        )

最后一步是编写脚本，以便在其他字段发生更改时更新 total_price 字段的值。

示例：如果您想在 price 更改时更改 total_price，您的脚本可以如下所示：

if (!$) {
    $ = django.jQuery;
}
$(document).ready(function(){
    // Add event listener to "price" input
    $("#id_price").change(function(e){
        // Get entered value
        let price = parseFloat($(this).val());

        // Get discount value from another field 
        let discount = parseFloat($("#id_discount").val())

        // Compute total price in whatever way you want
        let total_price = price - price*discount;

        // Set value in read-only "total_price" field.
        $("div.field-total_price").find("div.readonly").text(total_price);
    });
})

如果您想在 discount 或 tax 字段更改时更新 total_price，只需向它们添加事件侦听器即可。

Django admin：如何在 Django 管理表单页面中动态显示输入值的计算值？

Django admin: How to show calculated value from entered values dynamically in Django admin form page?

django

django-models

django-admin

django-admin-actions