фреймворк django rest: как добавить собственный класс css в ModelSerializer - PullRequest
Новая
       12

фреймворк django rest: как добавить собственный класс css в ModelSerializer

0 голосов
/ 03 ноября 2018

Я использую django rest framework и хочу добавить дополнительные имена классов css в поля PostSerializer. Это мой код:

models.py

class Post(models.Model):
    title = models.CharField(default="New Post", max_length=50)
    text = models.TextField(blank=True, null=True)


serializers.py

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = ('id', 'title', 'text')

Поле типа title будет отображаться как: 

<div class="form-group ">
    <label >Title</label>
    <input name="title" class="form-control" type="text"  value="" >    
</div>

Уже существует класс form-control, я хочу добавить еще один, как я могу его достичь?

1 Ответ

0 голосов
/ 04 ноября 2018

Чтобы установить пользовательский класс для поля сериализатора в вашем API, вы должны определить пользовательский шаблон для типа поля, а затем определить поле сериализатора с этим пользовательским шаблоном.

Сначала создайте пользовательский шаблон, например, для поля ввода, который является копией встроенной в остальные структуры input.html с добавлением {{ style.class }} рядом с form-control. Поместите это в папку шаблонов, либо в папку шаблонов вашего приложения, либо в папку шаблонов проекта. 

custom_input.html

<div class="form-group {% if field.errors %}has-error{% endif %}">
  {% if field.label %}
    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
      {{ field.label }}
    </label>
  {% endif %}

  <div class="col-sm-10">
    <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control {{ style.class }}"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value is not None %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>

    {% if field.errors %}
      {% for error in field.errors %}
        <span class="help-block">{{ error }}</span>
      {% endfor %}
    {% endif %}

    {% if field.help_text %}
      <span class="help-block">{{ field.help_text|safe }}</span>
    {% endif %}
  </div>
</div>

А затем объявите ваш сериализатор с custom_input.html и атрибутом class, установленным в требуемые классы. В этом примере test1 и test2 классы будут добавлены рядом с form-control class. 

serializers.py

class PostSerializer(serializers.ModelSerializer):

    title = serializers.CharField(style={'template': 'your_template_folder/custom_input.html', 'class': 'test1 test2'})

    class Meta:
        model = Post
        fields = ('id', 'title', 'text')
...