首页 > 解决方案 > Django - 如何修改酥脆的表格?

问题描述

首先,我想生成一个如下所示的页面:

在此处输入图像描述

有三件事使它变得困难。1. 标签 + 输入字段集应该水平排列 2. 一些字段有复选框 3. 日期字段有一个特殊的 Bootstrap 插件。

以下是每种类型的 html 源代码:

通用类型:

    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" style="margin-bottom: 5px">
      <label class="input-upper-title">Drill String Name</label>
      <input type="text" id="" class="form-control  input-field-height-vertical" name="" required="">
    </div>

有复选框:

    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" style="margin-bottom: 5px">
      <label class="input-upper-title">String Length (ft)</label>
      <div class="has-checkbox">
        <input type="checkbox"><input disabled="disabled" type="text" id="" class="form-control input-field-height-vertical input-calculated" name="" data-parsley-trigger="" required="">
      </div>
    </div>

有日期插件:

    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" style="margin-bottom: 5px">
      <label class="input-upper-title">Date Run</label>
      <div class="form-group">
        <div class="input-group date" id="datetimepicker7" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input input-field-height-vertical" data-target="#datetimepicker7"/>
          <div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
          </div>
        </div>
      </div>
    </div>

这是我的forms.py

class BHA_overall_Form(forms.ModelForm):

    prefix = 'bha_overall'

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

    class Meta():
        model = BHA_overall
        fields = '__all__'

我应该如何修改我的forms.pycrispy_forms以获得与我的 html 源代码相同的效果?

标签: djangodjango-formsdjango-templatesdjango-crispy-forms

解决方案


推荐阅读