2016-12-15 102 views
1

我想呈現以下方式Django的形式...Django的模板和下拉列表

Form UI

特別是,我將如何去填充,並呈現三個下拉根據所提供的模型列出清單。

模型

class Positions(models.Model): 
    position_code = models.CharField(primary_key=True, max_length=8) 
    name = models.CharField(max_length=64, blank=True, null=True) 
    description = models.CharField(max_length=4000, blank=True, null=True) 
    position_type = models.CharField(max_length=8, blank=True, null=True) 

    class Meta: 
     managed = False 
     db_table = 'positions' 

class Clubs(models.Model): 
    club_id = models.AutoField(primary_key=True) 
    short_name = models.CharField(max_length=4, blank=True, null=True) 
    club_name = models.CharField(max_length=4000, blank=True, null=True) 
    nickname = models.CharField(max_length=4000, blank=True, null=True) 

    class Meta: 
     managed = False 
     db_table = 'clubs' 

class Players(models.Model): 
    player_id = models.AutoField(primary_key=True) 
    first_name = models.CharField(max_length=512, blank=True, null=True) 
    last_name = models.CharField(max_length=512, blank=True, null=True) 
    dob = models.CharField(max_length=512, blank=True, null=True) 
    display_name = models.CharField(max_length=512, blank=True, null=True) 
    active = models.BooleanField(default=True) 

    class Meta: 
     managed = False 
     db_table = 'players' 

class DefaultSquads(models.Model): 
    default_squad_id = models.AutoField(primary_key=True) 
    club = models.ForeignKey(Clubs, models.DO_NOTHING) 
    player = models.ForeignKey('Players', models.DO_NOTHING) 
    position_code = models.ForeignKey('Positions', models.DO_NOTHING, db_column='position_code', blank=True, null=True) 
    playing_status_code = models.CharField(max_length=16, blank=True, null=True) 

    class Meta: 
     managed = False 
     db_table = 'default_squads' 

視圖

class DefaultSquadsViewCreate(CreateView): 
    template_name = 'fafl/defaultSquad_form.html' 
    model = DefaultSquads 
    fields = ['player', 'position_code', 'playing_status_code'] 
    success_url = reverse_lazy('fafl:defaultSquads-list') 

    def get_context_data(self, **kwargs): 
     context = super(DefaultSquadsView, self).get_context_data(**kwargs) 
     context['clubs'] = Clubs.objects.all().order_by('club_id') 
     context['players'] = Players.objects.all().order_by('player_id') 
     return context 

模板

<form method="POST" class="form-horizontal"> 
 
    {% csrf_token %} 
 
    <div class="box-body"> 
 

 
    <div class="form-group"> 
 
     <label for="{{ form.club.club_id.id_for_label }}" class="col-sm-2 control-lable">Club</label> 
 
     <div class="col-sm-10"> 
 

 
     <!-- Not sure how ? --> 
 

 
     <select id="{{ form.club.club_id.id_for_label }}" name="club" class="form-control"> 
 
      <option value="None"></option> 
 
      {% for club in clubs %} 
 
      <option value="{{ club.club_id }}" selected="selected">{{ club.nickname }}</option> 
 
      {% endfor %} 
 
     </select> 
 

 

 

 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="{{ form.club_name.id_for_label }}" class="col-sm-2 control-lable">Player</label> 
 
     <div class="col-sm-10"> 
 
     <input id="{{ form.short_name.id_for_label }}" type="text" name="short_name" maxlength="100" class="form-control" required /> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="{{ form.club_name.id_for_label }}" class="col-sm-2 control-lable">Position</label> 
 
     <div class="col-sm-10"> 
 
     <input id="{{ form.nickname.id_for_label }}" type="text" name="nickname" maxlength="6" class="form-control" required /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="box-footer"> 
 
    <div class="margin"> 
 
     <button type="button" class="btn btn-danger pull-right" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash" role="button"></i> Delete</button> 
 

 
     <a href="{% url 'fafl:defaultSquad-list' 1 %}" class="btn btn-primary " role="button">Cancel</a> 
 
     <button type="submit" class="btn btn-success"><i class="fa fa-check" role="button"></i> Save</button> 
 
    </div> 
 
    </div> 
 
</form>

回答

0

由於您的問題僅針對形成呈現。 。 。

在視圖:

class DefaultSquadsViewCreate(CreateView): 
    template_name = 'fafl/defaultSquad_form.html' 
    model = DefaultSquads 
    fields = ['player', 'position_code', 'playing_status_code'] 
    success_url = reverse_lazy('fafl:defaultSquads-list') 

    def get_context_data(self, **kwargs): 
     context = super(DefaultSquadsView, self).get_context_data(**kwargs) 
     context['clubs'] = Clubs.objects.all().order_by('club_id') 
     context['players'] = Players.objects.all().order_by('player_id') 
     context['positions'] = Positions.objects.all() 
     return context 

在模板:

<div class="form-group"> 
     <label for="{{ form.club.id_for_label }}" class="col-sm-2 control-label">Club</label> 
     <div class="col-sm-10">  
     <select id="{{ form.club.id_for_label }}" name="{{ form.club.html_name }}" class="form-control"> 
      <option value="" selected>None</option> 
      {% for club in clubs %} 
      <option value="{{ club.club_id }}">{{ club.nickname }}</option> 
      {% endfor %} 
     </select>  
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="{{ form.player.id_for_label }}" class="col-sm-2 control-label">Player</label> 
     <div class="col-sm-10">  
     <select id="{{ form.player.id_for_label }}" name="{{ form.player.html_name }}" class="form-control"> 
      <option value="" selected>Please select a player</option> 
      {% for player in players %} 
      <option value="{{ player.player_id }}">{{ player.display_name }}</option> 
      {% endfor %} 
     </select>  
     </div> 
    </div> 

    <div class="form-group"> 
     <label for="{{ form.postion_code.id_for_label }}" class="col-sm-2 control-label">Position Code</label> 
     <div class="col-sm-10">  
     <select id="{{ form.position_code.id_for_label }}" name="{{ form.position_code.html_name }}" class="form-control"> 
      <option value="" selected>Please select a Position</option> 
      {% for position in positions %} 
      <option value="{{ position.position_code }}">{{ position.name }}</option> 
      {% endfor %} 
     </select>  
     </div> 
    </div>