使用 Django 和 jQuery Ajax 保存模型排序顺序

Question

我正在尝试实现sorting of Django model instances using jQuery UI Sortable。当我拖放图像但排序顺序未保存到数据库时，客户端排序操作有效。拖放图像后，我将以下内容记录到控制台："POST /versions/1/sort/ HTTP/1.1" 200 0，因此请求似乎很好。 更新：以下是使用this debugging technique 记录到控制台的请求示例：

"POST /versions/1/sort/ HTTP/1.1" 200 0
format=2013-10-23 11:22:39,604 - django.db.backends - DEBUG - (0.000) SELECT "versions_image"."id", "versions_image"."version_id", "versions_image"."image_text", "versions_image"."status", "versions_image"."order" FROM "versions_image" WHERE "versions_image"."id" = 3 ; args=(3,)
format=2013-10-23 11:22:39,609 - django.db.backends - DEBUG - (0.000) SELECT (1) AS "a" FROM "versions_image" WHERE "versions_image"."id" = 3  LIMIT 1; args=(3,)
format=2013-10-23 11:22:39,613 - django.db.backends - DEBUG - (0.000) UPDATE "versions_image" SET "version_id" = 1, "image_text" = Zing, "status" = 1, "order" = 0 WHERE "versions_image"."id" = 3 ; args=(1, u'Zing', 1, 0, 3)
format=2013-10-23 11:22:39,621 - django.db.backends - DEBUG - (0.000) SELECT "django_session"."session_key", "django_session"."session_data", "django_session"."expire_date" FROM "django_session" WHERE ("django_session"."session_key" = kuh0mwboss6q7vmov6ydzs0o1gccsspi  AND "django_session"."expire_date" > 2013-10-23 09:22:39.619910 ); args=('kuh0mwboss6q7vmov6ydzs0o1gccsspi', u'2013-10-23 09:22:39.619910')

为什么没有保存图片订单值？

models.py

from django.db import models

class Version(models.Model):
    title = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')

    def __unicode__(self):  # Python 3: def __str__(self):
        return self.title

class Image(models.Model):
    version = models.ForeignKey(Version)
    image_text = models.CharField(max_length=200)
    order = models.IntegerField(default=0)

    class Meta:
        ordering = ['order']

    def __unicode__(self):  # Python 3: def __str__(self):
        return self.image_text

urls.py

from django.conf.urls import patterns, url

from versions import views

urlpatterns = patterns('',
    url(r'^$', views.IndexView.as_view(), name='index'),
    url(r'^(?P<pk>\d+)/$', views.DetailView.as_view(), name='detail'),
    url(r'^(?P<version_id>\d+)/sort/$', views.sort, name='sort'),
)

views.py

from django.shortcuts import get_object_or_404
from django.http import HttpResponse
from versions.models import Image, Version
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def sort(request, version_id):
    for index, image_pk in enumerate(request.POST.getlist('image[]')):
        image = get_object_or_404(Image, pk=int(str(image_pk)))
        image.order = index
        image.save()
        return HttpResponse('')

detail.html

{% extends "base.html" %}

{% block extra_head %}
<script type="text/javascript" charset="utf-8">
  // Sortable photos
  // jQuery and jQuery-UI are in base.html
  $(document).ready(function() {
    $("#sortable").sortable({
      update: function(event, ui) {
        var serial = $('#sortable').sortable('serialize');
    $.ajax({
      url: "{% url 'versions:sort' version.id %}",
      type: "post",
      data: serial
    });
      },
    }).disableSelection();
  });
</script>
{% endblock extra_head %}

{% block content %}
  <h1>{{ version.title }}</h1>
    <ul id="sortable">
    {% for image in version.image_set.all %}
      <li id="image_{{ image.pk }}" class="ui-state-default">
        {{ image.image_text }}
        <span class="move">&#x1F503;</span>
      </li>
    {% endfor %}
    </ul>
{% endblock content %}

Answer 1

只需将“return HttpResponse('')”行移出排序视图中的循环即可。 感谢您提供实施示例。