在django中使用一种模态用于多种形式?

时间:2017-05-21 23:40:21

标签: html css django

我无法弄清楚如何将一种模态用于多种形式。

现在,我找不到一种方法,只为我想要创建的几个窗体只有一个模态。对于我要提交的30个表单,我真的不想在html中有30个模态。

还有另一种方法可以自动填充它吗?

我的模特是

class Project(models.Model):

    project_name = models.CharField(max_length=30)
    project_status = models.IntegerField(choices=PROJECT_STATUS,default=1)
    project_sponsor = models.CharField('Project Sponsor', 
    max_length=255,default=1)
    scope = models.TextField(max_length=10240, blank=True)
    description = models.TextField(max_length=10240, blank=True)

然后,我希望每个模型属性都有一个表单。例如,我想要一个描述表单,然后另一个表示范围......

class ScopeForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(ScopeForm, self).__init__(*args, **kwargs)
        for field in self.fields:
            self.fields[field].required = False

    class Meta:
        model = Project
        fields = ['project_scope',]


class DescriptionForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(DescriptionForm, self).__init__(*args, **kwargs)
        for field in self.fields:
            self.fields[field].required = False

    class Meta:
        model = Project
        fields = ['description',]

在我的html文件中,我使用模式提交表单

<a href="#" data-toggle="modal" data-target="#purpose">Purpose</br></a>

<div class="modal fade" id="purpose" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
			<h3 class="modal-title" id="lineModalLabel">Purpose</h3>
		</div>
		<div class="modal-body">
			<form>
              <div class="form-group">
                <label>
                The Purpose will provide a brief overview of the purpose of the project and provide enough of a description to complete
                the following sections. If information to complete the following sections is not available, state that it is unavailable and
                state the person accountable and schedule for completion. </label>                
              </div>
              <div class="form-group" "width: 300px" "height: 100px" "border: 1px solid blue">
                <label for="purpose">Purpose</label>
                <textarea id="txtCommentHere" class="form-control" rows="3" id="purpose" placeholder="Purpose">
                </textarea>
              </div>              
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Draft                                     
                </label></br>
                <label>
                  <input type="checkbox"> In Progress           
                </label>
                
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>

		</div>
    </div>
   </div>
</div>

1 个答案:

答案 0 :(得分:0)

您可以在bootstrap文档中查看此内容 Bootstrap (Many to 1) Modal

基本上你需要通过js / jquery将数据传递给modal。