Django 模板创建 div.selector 框

Question

我正在使用 Django 1.9，在管理部分我看到了以下结构：

我想在我的模板中为表单实现一个这样的选择器——两个框，左边的一个填充了一些类对象。右边是空的，当我单击框之间的箭头时，项目会相应移动。最后在表单中，我希望能够对右侧框中的所选项目做一些事情。

我搜索了“html 选择器”，但没有任何好的结果。我该怎么做？

Answer 1

好的，所以您没有针对上述问题的直接解决方案，因此您没有直接找到。

我能想到的一种可能的解决方案是通过使用 Javascript 进行前端操作。您可以执行以下操作：

在您的 html 中有两个不同的 div，比如“左框”和“右框”。现在，在您的 views.py 中，您返回要在左侧框中显示的项目列表，然后在 html 文件，您将它们显示在左侧框中。

现在是重要的部分。 您在左侧框中显示的列表必须是复选框输入类型（以便可以选择/选中或取消选中/取消选中单个项目）或任何其他选择输入类型。

现在您在左右框之间有了两个按钮。 因此，您将在 javascript 文件中为这两个按钮编写点击功能。

对于右箭头按钮，点击功能将检测左侧框中的所有选定项，并将隐藏/删除左侧框中的所有项目并将它们添加到正确的框中，即，您必须从 javascript 创建所有 div、li、复选框输入。

与左箭头按钮类似，点击功能会检测右侧框中所有选中的项目，将其从右侧框中隐藏/删除并添加到左侧框中。

然后最终会在底部有一个保存按钮，它将通过 GET 或 POST 提交此数据。但是由于您希望通过单击页面底部的SAVE来提交所有数据，这意味着左右框都将在一个FORM下。因此，您需要有一个通用的“名称”属性，例如左侧框项目的“左输入”和右侧框项目的“右输入”，因为只有“名称”和“值”对在任何html表单。

因此，在您的视图中，当您请求.GET 或 POST 时，您将获得一个只有两个键（“左输入”和“右输入”）的多值字典每个都有一个值列表。

然后你可以将 querydict 转换为 python dict 并用它做任何你想做的事情。

Answer 2

有一个直接的解决方案。

我使用 Django 管理小部件如下。

forms.py：

from django.contrib.admin.widgets import FilteredSelectMultiple
class AForm(forms.ModelForm):
class Meta:
    model = A
    fields = (
        'name', 'nickname', )
    widgets = {
        "name": FilteredSelectMultiple("name", is_stacked=False),
        "nickname": FilteredSelectMultiple("nickname", is_stacked=False),
    }

a_template.html

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.min.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.min.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.min.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectBox.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectFilter2.js"></script>

<form role="form" action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form }}
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success">Save</button>
        </div>
    </div>
</form>