btc-flex-forms 2.2

快速入门

1. 将“flex_forms”添加到已安装的应用程序设置中，如下所示：

   INSTALLED_APPS = (
       ...
       'flex_forms',
   )
   

   在

2. 添加静态文件css:

   ^{pr2}$ 在

3. 用于使用的类：StaticFieldset仅用于呈现静态字段集：

   # Usage: when you need to display arbitrary static information on the page.
   # For example:
   
   # In view:
   static_data = StaticFieldset(model_1=some_model, model_2=another_model)
   
   # In form:
   grid = {
       ['field_1', 'field_2'],  # etc.
       ...
   }
   field_1 = StaticFlexField(label='Data 1', help_text='Field 1')
   field_2 = StaticFlexField(data='Some data', label='Data 2')
   
   def __init__(*args, **kwargs)
       self.model_1 = kwargs.pop('model_1', None)
       self.model_2 = kwargs.pop('model_2', None)
       super().__init__(*args, **kwargs)
       self.static_fieldset['field_1'].data = self.model_1.field_1 + self.model_2.field_1
       ...
   

   在

4. 静态模型字段集：

   # Usage: when you need to display static information on a page based on model data.
   # For example:
   
   # In view:
   my_model = get_object_or_404(MyModel, pk=self.kwargs.get('pk'))
   static_model_data = StaticModelFieldset(instance=my_model)
   
   # In form:
   # Support is for StaticFlexField only.
   grid = {
       '_1': ['model_field_1', 'model_field_2'],
       '_2': ['separate_static_field'],  # etc.
       ...
   }
   separate_field = StaticFlexField('This is a static field')  # only static fields can be defined.
   

   在

5. 混合FlexForm：

   # Usage: when you need to display multiple forms on a page with a mixed arrangement of fields.
   # For example:
   
   # In view:
   mix = MixedFlexForm([form_1, form_2, formset_1])  # form_1, form_2, formset_1 - must be are flex too!
   
   # In form:                  static field from the form_2
   grid = {                               /
       '_1': ['form_1_field_2', 'form_2_static_field_1', [formset_1_field_1, form_1_field_1]],
       '_2': ['separate_field', 'form_1_field_3', 'separate_static_field'],  # etc.
       ...                                                \
   }                                        field defined below (non-forms field)
   
   # You can define separate non-forms fields and specify them in grid.
   separate_field = forms.CharField()
   separate_static_field = StaticFlexField('This is a static field')
   
   # If you use prefixes for forms (this will be needed if the forms have the same field names (formset)),
   # you must specify fields with prefixes:
   grid = {
       ['form_1_prefix-form_1_field_2', 'form_2_prefix-form_2_field_1'],  # etc.
       ...
   }
   

   在

6. FlexForm，FlexModelForm设计用于呈现著名的django表单-表单，ModelForm，具有flex布局：

   class CustomFlexForm(FlexForm):
   
       grid = {
           'Fields': ['field_1', 'field_2'],
           'New row': ['field_3'],
           'Controls': ['button'],
           ...
       }
   
       field_1 = forms.MultipleChoiceField(
           label='Fruits?',
           choices=(('0', 'Apple'), ('1', 'Mango')),
           widget=forms.CheckboxSelectMultiple(attrs={
               'field_group_class': 'checkbox-as-button checkbox-as-row',
           })
       )
   
       # static fields support
       field_2 = StaticFlexField(
           data='Example', label='Example', help_text='Example')
       )
       field_3 = StaticFlexField(data='Example', label='Example')
       button = FlexButton('Submit')
       ...
   

   在

7. 分别实现 BaseFormSet，BaseModelFormSet，BaseInlineFormSet：

   formset = formset_factory(CustomFlexForm, FlexFormset, extra=4)
   

   在

8. Grid：要定位字段，必须在如下所示的Grid变量中指定它们。dict键是行标题 允许水平拆分字段行。如果不需要标题，则必须以符号开头：

   grid = {
       'User Info': ['field_1', 'field_2'],
       '_1': ['field_3', ['field_4', 'field_5'], 'field_6'],
       '_2': ['field_7', 'field_8'],
       '_3': ['field_9', 'field_10', 'field_14'],
       '_4': ['field_11'],
       '_5': ['field_12'],
       '_6': ['button'],
   }
   

   在

9. 模板标记：

   {% load flex_forms %}
   
   {% as_flex form_object %}  # use this tag for rendering form or formset
   {% flex_form_grid form %}  # use this tag for rendering form body generated with form_grid (visible fields)
   {% complex_flex_field field %}  # use this tag for rendering a single flex field of the form
   

   在

• 人工模板制作：

  # Create template for the form (or fieldset).
  # For example, custom template:
  # custom_form_template.html:
  
  {% load flex_forms %}
  
  <form {{ html_params|safe }}>
      {% csrf_token %}
      {% for field in form.hidden_fields %}
          {{ field }}
      {% endfor %}
  
      <div class="flex-fields-column">
          <div class="flex-fields-row_title">Title</div>
          <div class="flex-fields-row">
              <div class="flex-fields-block block-with-padding">
                  {% complex_flex_field form.field_1 %}
                  {% complex_flex_field form.static_fieldset.field_44 default_value='No value' %}
                  {% complex_flex_field form.static_fieldset.button %}
              </div>
          </div>
      </div>
      <div class="flex-fields-column">
          <div class="flex-fields-row_title">Controls</div>
          <div class="flex-fields-row">
              <div class="flex-fields-block block-with-padding">
                  {% complex_flex_field form.static_fieldset.button %}
              </div>
          </div>
      </div>
  </form>
  
  # In form class set template path:
  class MyForm(FlexForm):
  
      template = 'custom_form_template.html'
  
  # In this case form grid does not need to be set up.
  

  在

1. 表单的外观应该通过css属性配置，使用 ：nth-of-type（）和：nth child（n+x）：第n个子（-n+x+y）选择器来设置行样式。涉及的默认表单样式 内置样式“flex form”。在

示例