Question

我正在开发我的第一个Django网站，我想在Bootstrap表单中使用外键下拉菜单。我可以通过手动输入外键号码来添加外键（例如＆＃34; 1＆＃34;），表单将起作用。但我无法为链接下拉列表插入正确的语法。在下面找到我当前的models.py / views.py和html

我有以下客户模型;

class Customer(models.Model):
    customer_type = models.ForeignKey(CustomerType)
    customer_name = models.CharField(max_length=120, null=True, blank=True)

    def __unicode__(self):
        return smart_unicode(self.customer_name)

使用CustomerType

class CustomerType(models.Model):
    customer_type = models.CharField(max_length=120, null=True, blank=True)

    def __unicode__(self):
        return smart_unicode(self.customer_type)

请参阅下面的views.py;

def customeradd(request):      
    form = CustomerAddForm(request.POST or None)

    if form.is_valid():
        save_it = form.save(commit=False)
        save_it.save()
        messages.success(request, 'Customer added succesfully')
        return HttpResponseRedirect('/customeroverview/')

    return render_to_response("customer-add.html",
                              locals(),
                              context_instance=RequestContext(request))

最后是我的HTML;

<div class="col-lg-12">
          <form class="form-horizontal" method="POST" action=''> {% csrf_token %}

            <div class="form-group">
              <label for="customer_name" class="col-sm-2 control-label">Customer Name</label>
              <div class="col-sm-10">
                <input id="customer_name"  name="customer_name" type="text" class="form-control" >
              </div>
            </div>

        <div class="form-group">
              <label for="customer_type" class="col-sm-2 control-label">Customer Type</label>
              <div class="col-sm-10">
        <select class="form-control" id="customer_type" name="customer_type"></select>
          </div>
            </div>

            <div class="form-group">
            <div class="col-sm-10"></div>
              <div class="col-sm-2">
                <button type='submit' class="btn btn-success btn-block">Add Customer</button>
              </div>
            </div>

          </form>
</div>

非常感谢任何帮助。

Answer 1

首先，我想建议使用django-crispy-forms，你不会后悔，它与引导程序配对非常好。我换了之后，我不明白我如何使用内置的django表格这么久。

话虽如此，这里有一个jsfiddle演示了如何使用bootstrap下拉列表作为输入项。

下拉按钮w / .form-control

<div class="panel panel-default">
    <div class="panel-body">
       <div class="btn-group">
         <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
           <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu">
             {% for t in types %}
                 <li><a href="#">{{ type }}</a></li>
             {% enfor %}
         </ul>
      </div>
   </div>
</div>

然后在您的观点中确保传入types = CustomerType.objects.all()

Answer 2

要在您的下拉列表中添加客户类型，您必须从表中收集所有客户类型：

def customeradd(request):      
    form = CustomerAddForm(request.POST or None)
    customer_types = CustomerType.objects.all()

    if form.is_valid():
        save_it = form.save(commit=False)
        save_it.save()
        messages.success(request, 'Customer added succesfully')
        return HttpResponseRedirect('/customeroverview/')

    return render_to_response("customer-add.html",
                              {'customer_types': customer_types},
                              context_instance=RequestContext(request))

（不要忘记在模特中加入CustomerType）

然后你必须将它们包含在你的元素

中

<div class="col-lg-12">
          <form class="form-horizontal" method="POST" action=''> {% csrf_token %}

            <div class="form-group">
              <label for="customer_name" class="col-sm-2 control-label">Customer Name</label>
              <div class="col-sm-10">
                <input id="customer_name"  name="customer_name" type="text" class="form-control" >
              </div>
            </div>

        <div class="form-group">
              <label for="customer_type" class="col-sm-2 control-label">Customer Type</label>
              <div class="col-sm-10">
        <select class="form-control" id="customer_type" name="customer_type"> {%for type in customer_types%}<option value="{{type}}">{{type}}</option>{%endfor%}</select>
          </div>
            </div>

            <div class="form-group">
            <div class="col-sm-10"></div>
              <div class="col-sm-2">
                <button type='submit' class="btn btn-success btn-block">Add Customer</button>
              </div>
            </div>

          </form>
</div>

Answer 3

我改变了

<option value="{{type}}">{{type}}</option>

到

<option value="{{type.id}}">{{type}}</option>

现在它保存了Key但显示了ValueText

html部分的最终结果

<div class="form-group">
    <label for="customer_type" class="col-sm-2 control-label">Customer Type</label>
     <div class="col-sm-10">
       <select class="form-control" id="customer_type" name="customer_type">
          {%for type in customer_types%}<option value="{{type.id}}">{{type}}</option>{%endfor%}
        </select>
     </div>
</div>

views.py的最终结果

def customeradd(request):      
    form = CustomerAddForm(request.POST or None)
    customer_types = CustomerType.objects.all()

    if form.is_valid():
        save_it = form.save(commit=False)
        save_it.save()
        messages.success(request, 'Customer added succesfully')
        return HttpResponseRedirect('/customeroverview/')

    return render_to_response("customer-add.html",
                              {'customer_types': customer_types},
                              context_instance=RequestContext(request))

在Bootstrap表单中使用外键的Django下拉列表

3 个答案: