如何在Django中实现Postgres ArrayField内项的用户可重排功能？

Got it, let's tackle this problem—since Django's ArrayField doesn't have built-in support for user-controlled reordering, we'll need to build a frontend-backend combo to make this work. Here are two solid approaches depending on your UI preferences:

Approach 1: Drag-and-Drop Sorting (Intuitive for Users) #

This uses the lightweight SortableJS library to let users drag items into their desired order, then sends the new sequence to the backend for saving.

Frontend Template Code #

First, render your existing script list and add a hidden field to capture the sorted order:

<!-- Container for draggable script items -->
<div id="script-container" class="script-list">
  {% for script in object.dm_scripts %}
    <div class="script-item" data-script="{{ script }}">
      {{ script }}
    </div>
  {% endfor %}
</div>

<!-- Hidden field to store the sorted order as JSON -->
<input type="hidden" name="dm_scripts_order" id="scripts-order">

<!-- Load SortableJS (use CDN or host locally) -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
  // Initialize drag-and-drop functionality
  const container = document.getElementById('script-container');
  const sortable = new Sortable(container, {
    animation: 150,
    ghostClass: 'sortable-ghost', // Optional: Style for the dragged item placeholder
    onEnd: () => {
      // Collect sorted script text and update hidden field
      const orderedScripts = Array.from(container.children).map(item => item.dataset.script);
      document.getElementById('scripts-order').value = JSON.stringify(orderedScripts);
    }
  });
</script>

Backend View Code #

Update your model instance with the new order (example using UpdateView):

from django.views.generic.edit import UpdateView
from .models import YourModel
import json

class YourModelUpdateView(UpdateView):
    model = YourModel
    fields = ['other_model_fields']  # Exclude dm_scripts since we handle it via hidden field

    def form_valid(self, form):
        # Parse the sorted order from the hidden field
        ordered_scripts = json.loads(self.request.POST.get('dm_scripts_order', '[]'))
        
        # Optional: Validate no items were added/removed (only reordered)
        original_scripts = set(self.object.dm_scripts)
        if set(ordered_scripts) != original_scripts:
            form.add_error(None, "You can only reorder existing scripts—no adding/removing allowed here.")
            return self.form_invalid(form)
        
        # Save the new order
        self.object.dm_scripts = ordered_scripts
        self.object.save()
        return super().form_valid(form)

Approach 2: Up/Down Buttons (No External Libraries) #

If you prefer to avoid adding a JS library, use simple up/down buttons to adjust item positions via AJAX.

Frontend Template Code #

Render each script with movement buttons and add click handlers:

{% for script in object.dm_scripts %}
  <div class="script-item">
    {{ script }}
    <button class="move-btn move-up" data-index="{{ forloop.counter0 }}">↑</button>
    <button class="move-btn move-down" data-index="{{ forloop.counter0 }}">↓</button>
  </div>
{% endfor %}

<script>
  // Handle up button clicks
  document.querySelectorAll('.move-up').forEach(btn => {
    btn.addEventListener('click', function() {
      adjustOrder(parseInt(this.dataset.index), 'up');
    });
  });

  // Handle down button clicks
  document.querySelectorAll('.move-down').forEach(btn => {
    btn.addEventListener('click', function() {
      adjustOrder(parseInt(this.dataset.index), 'down');
    });
  });

  // Send AJAX request to reorder
  function adjustOrder(index, direction) {
    fetch(`{% url 'reorder_script' object.pk %}`, {
      method: 'POST',
      headers: {'X-CSRFToken': '{{ csrf_token }}'},
      body: new URLSearchParams({
        'index': index,
        'direction': direction
      })
    })
    .then(res => res.json())
    .then(data => {
      if (data.success) window.location.reload(); // Refresh to show new order
    });
  }
</script>

Backend View & URL #

Add a dedicated view to handle reordering requests:

# views.py
from django.http import JsonResponse
from django.views.decorators.http import require_POST
from .models import YourModel

@require_POST
def reorder_script(request, pk):
    try:
        obj = YourModel.objects.get(pk=pk)
        index = int(request.POST.get('index'))
        direction = request.POST.get('direction')
        scripts = obj.dm_scripts

        # Swap items based on direction
        if direction == 'up' and index > 0:
            scripts[index], scripts[index-1] = scripts[index-1], scripts[index]
        elif direction == 'down' and index < len(scripts)-1:
            scripts[index], scripts[index+1] = scripts[index+1], scripts[index]
        else:
            return JsonResponse({'success': False, 'error': 'Invalid position or direction'})
        
        obj.dm_scripts = scripts
        obj.save()
        return JsonResponse({'success': True})
    except YourModel.DoesNotExist:
        return JsonResponse({'success': False, 'error': 'Object not found'})

Add the URL pattern to urls.py:

path('your-model/<int:pk>/reorder/', views.reorder_script, name='reorder_script'),

Both approaches will preserve the order of your ArrayField items exactly as the user specifies—pick the one that fits your UI workflow best!

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