ModelForm中的ManyToMany字段自定义HTML

Question

我现在正在制作一个表单，用来在我的网站上显示某个特定产品的信息。每个价格用一个叫做Price的对象表示，而每个Item都有几个与之相关的Price对象。我已经创建了一个ModelForm来展示我的Item的数据，这个部分是正常工作的。不过，当我尝试在我的ModelForm中显示多对多字段时，出现了一个小框框，里面列出了我所有的Price对象。我需要为这些Price对象显示自定义的HTML，这样我才能让它们和我写的一些JavaScript互动。以下是我目前的代码：

class Item(models.Model):
    user        = models.ForeignKey(User)
    name        = models.CharField(max_length=200)
    description = models.CharField(max_length=1000)
    category    = models.ForeignKey(Category)
    prices      = models.ManyToManyField(Price, blank=True)
    images      = models.ManyToManyField(Image)
    runs        = models.ManyToManyField(ActivityRun, blank=True)
    date_added  = models.DateTimeField(auto_now_add=True)

    def __unicode__(self):
        return self.name

class ItemForm(ModelForm):
    class Meta:
        model = Item
    description = forms.CharField(widget=TinyMCE())

@login_required
def edit_item(request, item_id):
    item = get_object_or_404(Item, pk=item_id)
    if request.method == 'POST':
        form = ItemForm(request.POST, request.FILES, instance=item)
        if form.is_valid():
            return HttpResponseRedirect("/items/")
    else:
        form = ItemForm(instance=item)

    return render(request, 'edit_item.html', {'form': form})

还有我想要展示的模板部分：

{% for price in form.prices %}
    <span class="price_box" style="width: 200px;">
        <a href="#" class="remove_price">x</a>{{ price.name }} ${{ price.price }}
    <input type="hidden" name="price_name" value="{{ price.name }}">
    <input type="hidden" name="price_cost" value="{{ price.price }}">
    </span>
{% endfor %}

我不太确定该怎么做才能实现这个功能……

更具体一点，我该怎么改变表单中多对多显示的HTML呢？

Answer 1

一种方法是使用内联模型表单集来编辑你的价格。这可能需要你修改你的物品模型，把物品与价格的关系从多对多（M2M）改为单对多（FK），也就是说，物品应该作为价格的外键。

这样一来，你就可以为价格使用一个自定义表单，并且可以有一个或多个价格表单实例，这些实例会自动和一个物品关联。这个表单集还会有删除功能，如果你愿意的话，可以通过Ajax来处理。你也可以动态地添加或移除表单。

希望这对你有帮助。