Question

我想为用户创建一种添加和更改列表顺序的方法。我将列表作为模型，将rank作为字段之一，将title和info作为其他2个字段。用户可以将项目添加到列表中。然后，页面将显示按排名排序的列表。

但是，我不知道如何为用户添加功能以重新排序列表。我希望用户能够单击列表中的一个项目，然后向上或向下移动它，并且还能够只输入他们想要将该项目移动到的数字。我可以处理如何调整等级数字，但是我不知道实际访问信息和更新信息的最佳方法。

Answer 1

如果这是Django管理员，只需使用https://github.com/jrief/django-admin-sortable2软件包。这使您可以将对象拖放到模型中。

如果这是在前端，我相信最好的方法是使用Ajax发送请求并动态更新排名。 jQuery使您可以对对象https://jqueryui.com/sortable/

进行排序

Answer 2

# For custom views, override your class from 'ListView' class

views.py

class ModelView(generic.ListView):
    template_name = 'modellist.html'
    model = ModelName
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        return context


# For sorting, you have to use sortable jquery ui plugin

modellist.html


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>
<body>
{% if object_list %}
{% for object in object_list %}
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>{{ object.rank }}</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>{{ object.title }}</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>{{ object.info }}</li>
</ul>
{% endfor %}
{% endif %}

</body>
</html>

使用模型在Django中创建有序列表

2 个答案: