在 django 中通过拖放对项目进行排序

Posted 2023-02-24

【中文标题】在 django 中通过拖放对项目进行排序

【英文标题】：Sorting items by drag and drop in django

【发布时间】：2018-01-24 22:59:41

【问题描述】：

在我的 django 项目中，我在模板中显示书籍列表。 Book 模型有 position 字段，我用它来对书籍进行排序。

我正在尝试通过拖放列表项对该列表进行排序，但我的下一个代码无法正常工作。我使用 JQuery UI。它在前端工作，但在用户拖放列表项时不会更改位置字段的值。有人可以帮助我改进我的 js 并查看代码。我很困惑。如果有任何帮助，我将不胜感激。

models.py：

class Book(models.Model):
    title = models.CharField(max_length=200, help_text='Заголовок', blank=False)
    position = models.IntegerField(help_text='Поле для сортировки', default=0, blank=True)

    class Meta:
        ordering = ['position', 'pk']

html：

<div id="books" class="list-group">
% for book in books %
  <div class="panel panel-default list-group-item ui-state-default">
    <div class="panel-body"> book.title </div>
  </div>
% endfor %
</div>

urls.py:

url(r'^book/(?P<pk>\d+)/sorting/$',
     BookSortingView.as_view(),
     name='book_sorting')

JS：

$("#books").sortable(
      update: function(event, ui) 
            var information = $('#books').sortable('serialize');
            $.ajax(
                  url: "???",
                  type: "post",
                  data: information
            );
      ,
).disableSelection();

views.py：

class BookSortingView(View):
    @method_decorator(csrf_exempt)
    def dispatch(self, request, *args, **kwargs):
        return super(BookSortingView, self).dispatch(request, *args, **kwargs)

    def post(self, request, pk, *args, **kwargs):
        for index, pk in enumerate(request.POST.getlist('book[]')):
            book = get_object_or_404(Book, pk=pk)
            book.position = index
            book.save()
        return HttpResponse()

【问题讨论】：

我建议使用一些调试来查明错误。 ajax 方法是否发布正确的数据-> 使用console.log()。它是否被发布到正确的 URL -> '???' 不可能是正确的。 python视图是否获取参数->使用print。等等等等

@RoyPrins 我的问题是我不太清楚我需要在那个 ajax 的 url 中输入什么。我尝试url: "% url 'book_sorting' %"，但它是错误的。在终端显示404。JS不明白。为此，我很困惑如何正确放置网址。你有什么建议？

"% url 'book_sorting' %" 在你的情况下真的不存在你的 url 是 '^book/(?P\d+)/sorting/$' 所以你需要通过url 标记的 pk 参数。见docs.djangoproject.com/en/1.11/ref/templates/builtins/#url

还有一个库github.com/jrief/django-admin-sortable2。它可以满足您的需求，但仅在管理界面中。但是您可以查看他们的解决方案。

感谢您的建议。有很多库可以通过在管理员中拖放来对项目进行排序。但我需要在管理员之外使用它。无论如何谢谢你！ =)

【参考方案1】：

这对我有用！！

JS

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() 
        $("tbody").sortable(
         update: function(event, ui) 
            sort =[];
            window.CSRF_TOKEN = " csrf_token ";
            $("tbody").children().each(function()
                sort.push('pk':$(this).data('pk'),'order':$(this).index())

        );


        $.ajax(
          url: "% url "book-sort" %
",
          type: "post",
          datatype:'json',
          data:'sort':JSON.stringify(sort),
           'csrfmiddlewaretoken': window.CSRF_TOKEN
          ,

        );
         console.log(sort)
          ,
        ).disableSelection();
      );

HTML

<table class="table table-hover" id="sortable" style="">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>

    </thead>
    <tbody id="#Table">
        % for book in books %

        <tr data-pk=" book.id " class="ui-state-default" style="cursor: move;" data-placement="left"  title="Customize the order by drag and drop">
        <td> <a> book.name </a> </td>


        % endfor %
    </tbody>
    </table>

查看

@csrf_exempt
def sort(self):
    books = json.loads(self.request.POST.get('sort'))
    for b in books:
        book = get_object_or_404(Book, pk=int(b['pk']))
        book.position = b['order']
        book.save()
    return HttpResponse('saved')

并更改列表视图中的 query_set 以按该顺序获取书籍

 books = Book.objects.all().order_by('position')

【讨论】：

我正在尝试在我看来使用您的功能，所以我收到了这个AttributeError: 'WSGIRequest' object has no attribute 'request' 错误您想告诉我如何解决这个问题吗？

为了避免上面的 AttributeError 尝试： def sort(request): books = json.loads(request.POST.get('sort')) for b in books: book = get_object_or_404(Book, pk =int(b['pk'])) book.position = b['order'] book.save() return HttpResponse('saved')