Question

我需要复制此表格：

实时网页网址：

https://www.stickermule.com/products/die-cut-stickers

我一直在阅读有关如何手动呈现字段的文档，但是无法手动呈现单选输入及其值。

https://docs.djangoproject.com/en/2.1/topics/forms/#rendering-fields-manually

我的问题特别是与“选择数量部分”有关。

1）我的表单继承自form.ModelForm，仅包含数量，不包含成本（以美元为单位），也不包含节省部分。

这就是为什么我需要将数量放入标签中，从表单中将其提取出来，并在纯html中使用其他2个标签来手动放置成本和节省的原因。

除非有一种方法可以将这些值像其他字段一样放入模型中，但与字段数量有关（西班牙语中的注释，请参见注释）。

所需的HTML：

从此页面复制，我需要复制：

https://www.stickermule.com/products/die-cut-stickers

<form>
<div id="variants" class="product-option-group">      
 <legend>Select a size</legend>
 <ul id="variant-options" class="options">
   <li>
      <input id="variant_79" name="variant_id" readonly="" type="radio" value="79">
      <label for="variant_79"> 2" x 2"</label>
   </li>
   <li>
      <input id="variant_78" name="variant_id" type="radio" value="78">
      <label for="variant_78"> 3" x 3"</label>
   </li>
   <li>
      <input id="variant_80" name="variant_id" type="radio" value="80">
      <label for="variant_80"> 4" x 4"</label>
   </li>
   <li>
      <input id="variant_81" name="variant_id" type="radio" value="81">
      <label for="variant_81"> 5" x 5"</label>
   </li>
   <li>
      <input id="variant_77" name="variant_id" type="radio" value="77">
      <label for="variant_77"> Custom size</label>
   </li>
 </ul>
</div>
<div id="quantities">
   <legend>"Select a quantity"</legend>
   <ul>
      <li>
          <span class="table-cell">
            <input type="radio">
            <label>50</label>
          </span>
          <span id="price_50_id" class="table-cell  price">$57</span>
          <span class="table-cell savings"></span>
      </li>
      <li class=" quantity-item">
          <span class="table-cell">
              <input id="quantity_100" readonly="" name="quantity" type="radio" value="100">
              <label for="quantity_100" class=" quantity"> 100</label>
          </span>
          <span id="price_100_id" class="table-cell   price">$69</span>
          <span class="table-cell savings">Save 39%</span>
       </li>
  </ul>
</div>

models.py ：

class TamaniosCantidades(models.Model):
    TAMANIOS = (('2x2', '2" x 2"',), ('3x3', '3" x 3"',),
               ('4x4', '4" x 4"',), ('5x5', '5" x 5"',))

    CANTIDADES = (('50', '50',), ('100', '100',),
                ('150', '150',))

    tamanios = models.CharField(max_length=10, choices=TAMANIOS)
    cantidades = models.CharField(max_length=10, choices=CANTIDADES)

forms.py ：

class TamaniosCantidadesForm(forms.ModelForm):
    tamanios = forms.ChoiceField(choices=TAMANIOS, widget=forms.RadioSelect(), label='Selecciona un tamaño')
    cantidades = forms.ChoiceField(choices=CANTIDADES, widget=forms.RadioSelect(), label='Selecciona la cantidad')
    class Meta:
        model = TamaniosCantidades
        fields = ['tamanios', 'cantidades']

    def __str__(self):
        return self.tamanios

我的HTML：

<form action="/post_url_tamanioscantidades/" method="post">
    {% csrf_token %}
    {{ tamanioscantidades_form.as_p }}
    <input type="submit" value="Submit"/>
</form>

摘要：

我想将这些字段称为：

<form>
   <div id="quantities">
     <legend> {{ tamanioscantidades_form.label }} </legend>

     <ul>
        <li>
        <span>
             <input type="radio" id="{{ tamanioscantidades_form.input1_id }}>
             <label> {{ tamanioscantidades_form.label }} </label>
        </span>
        <span>
             <label>$57</label>
        </span>
        <span>
             <label>""</label>
        </span>
       </li>
     </ul>
    </div>
</form>

更新1：

有了我的回答，现在可以呈现单选按钮，而不是标签。

class TamaniosCantidadesForm(forms.ModelForm):
    tamanios = forms.ChoiceField(choices=TAMANIOS, widget=forms.RadioSelect(), label='Selecciona un tamaño')
    cantidades = forms.ChoiceField(choices=CANTIDADES, widget=forms.RadioSelect(), label='Selecciona la cantidad')
    class Meta:
        model = TamaniosCantidades
        fields = ['tamanios', 'cantidades']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.cantidades_options = [option for option in self['cantidades']]

    def __str__(self):
        return self.tamanios

HTML：

第一个选项{{ tamanioscantidades_form.cantidades_options.0.label }}中的标签将不显示

<ul>
  <h1>{{ tamanioscantidades_form.cantidades.label }}</h1> #This renders
  <li>
     <span> {{ tamanioscantidades_form.cantidades_options.0.tag }}
     <label> {{ tamanioscantidades_form.cantidades_options.0.label }} </label> #This does not render
   </span>
 </li>

Answer 1

如果我没记错的话，可以迭代模板中的RadioSelect小部件。您可以在documentation中阅读有关它的更多信息。

您知道，以下方法不是首选方法。不过，由于我不确定您为什么无法建立与成本和节省的关系，因此我提供了它。

如果您提供有关数量，成本，节省的更多信息，我可能会提供帮助。

使用选项索引的解决方案

很遗憾，开箱即用时您无法提出要求。但是通过这样的事情可以很容易地做到。

class TamaniosCantidadesForm(forms.ModelForm):
    tamanios = forms.ChoiceField(choices=TAMANIOS, widget=forms.RadioSelect(), label='Selecciona un tamaño')
    cantidades = forms.ChoiceField(choices=CANTIDADES, widget=forms.RadioSelect(), label='Selecciona la cantidad')
    class Meta:
        model = TamaniosCantidades
        fields = ['tamanios', 'cantidades']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.cantidades_options = [option for option in self['cantidades']]

    def __str__(self):
        return self.tamanios

然后您应该可以在模板中执行以下操作：

<form>
   <div id="quantities">
     <legend> {{ tamanioscantidades_form.cantidades.label }} </legend>

     <ul>
        <li>
        <span>
             {{ tamanioscantidades_form.cantidades_options.0.tag }}
             <label> {{ tamanioscantidades_form.cantidades_options.0.choice_label }} </label>
        </span>
        <span>
             <label>$57</label>
        </span>
        <span>
             <label>""</label>
        </span>
       </li>
     </ul>
    </div>
</form>

Django：需要手动呈现表单选项

1 个答案:

使用选项索引的解决方案