Django后台新增InputTest选外键后自动保存刷新实现问询

Absolutely, you can make this workflow work seamlessly! Here's a step-by-step implementation tailored to your Django setup:

1. Optimize the InputTest Model's Save Method #

First, let's clean up your save logic to avoid unnecessary double-saves. We'll only copy the Pic's image to image_field_crop when creating a new instance, and only if the target field is empty and the selected Pic has an image:

from django.db import models
from .models import Pic  # Adjust the import path to match your project structure

class InputTest(models.Model):
    pic_id = models.ForeignKey(Pic, on_delete=models.CASCADE)
    image_field_crop = CropperImageField(upload_to='images/', default=None, null=True, blank=True)

    def save(self, *args, **kwargs):
        # Copy the Pic's image only when creating a new instance and the crop field is empty
        if self._state.adding and not self.image_field_crop:
            if self.pic_id and self.pic_id.img:
                self.image_field_crop = self.pic_id.img
        super().save(*args, **kwargs)

2. Customize the Django Admin for Auto-Save Behavior #

We'll add custom JavaScript to the InputTest admin page to listen for changes to the Pic dropdown and auto-submit the form.

Step 2.1: Register a Custom Admin Class #

Update your admin.py to inject the custom JS file:

from django.contrib import admin
from .models import InputTest, Pic

class InputTestAdmin(admin.ModelAdmin):
    # Arrange fields so the Pic dropdown is the first thing admins interact with
    fields = ['pic_id', 'image_field_crop']
    
    # Inject our custom JavaScript into the admin page
    class Media:
        js = ('admin/js/inputtest_auto_save.js',)

admin.site.register(InputTest, InputTestAdmin)
admin.site.register(Pic)

Step 2.2: Create the Custom JavaScript File #

Create a file at static/admin/js/inputtest_auto_save.js (ensure your Django static files are configured correctly in settings.py):

document.addEventListener('DOMContentLoaded', function() {
    // Target the Pic dropdown (Django admin auto-generates this ID as `id_pic_id`)
    const picDropdown = document.getElementById('id_pic_id');
    
    if (picDropdown) {
        picDropdown.addEventListener('change', function() {
            // Only trigger auto-save if a valid Pic is selected (not the empty default option)
            if (this.value !== '') {
                const form = this.closest('form');
                if (form) {
                    // Optional: Add a hidden flag to identify auto-saves (useful for future logic)
                    const autoSaveFlag = document.createElement('input');
                    autoSaveFlag.type = 'hidden';
                    autoSaveFlag.name = 'auto_save';
                    autoSaveFlag.value = 'true';
                    form.appendChild(autoSaveFlag);
                    
                    // Submit the form to save the new InputTest instance
                    form.submit();
                }
            }
        });
    }
});

3. Key Notes & Considerations #

• Static Files Setup: Run python manage.py collectstatic to copy the JS file to Django's static file directory, and confirm STATIC_URL is properly configured in settings.py.
• Required Fields: If InputTest has other mandatory fields, set default values for them or adjust the JS to only submit when those fields are filled (otherwise form validation will fail).
• Post-Save Experience: After auto-submitting, Django admin will redirect to the edit page of the newly created InputTest. Here you'll see image_field_crop already populated with the selected Pic's image, ready for CropperJS edits.
• Edge Cases: If the selected Pic has no img value, image_field_crop will remain empty (aligning with your model's null/blank settings).

内容的提问来源于stack exchange，提问作者raul