2017-02-05 12 views
7

Примечание: Этот вопрос не должен сочетаться с прошлыми вопросами, которые похожи, но до Django 1.11, когда они освобождали от формы на основе шаблона.Как добавить класс CSS в виджет/поле с визуализацией формы на основе шаблонов Django 1.11

Я понимаю, что Django теперь имеет визуализацию формы на основе шаблонов. Насколько я понимаю, предполагается, что проблема заключается в том, что нужно вводить классы CSS из представления или формы, а не хранить все HTML/CSS в шаблонах.

Это моя цель: сохранить свои формы и представления, ориентированные на отображается то, что, и мои шаблоны сосредоточены на как, что отображается. Поэтому я хочу сохранить все HTML/CSS в своих шаблонах.

Итак, мои вопросы:

  • Как добавить класс (например, form-text) для всех TextInput виджетов из системы шаблонов?
  • Как добавить класс (например, alert-warning) ко всем сообщениям об ошибках (ошибки проверки) из системы шаблонов?

Возможно, я что-то неправильно понял об этой новой функции, поэтому, если бы я это сделал, не стесняйтесь, дайте мне знать, если это не так, как это работает, или если я прошу невозможного. В идеале я хотел бы реализовать эти изменения рендеринга формы в мастер-шаблоне.

Пример проблемы

views.py:

class SignUp(generic.edit.CreateView): 

    model = models.User 
    template_name = 'usermgmt/sign_up.html' 
    form_class = forms.UserCreateForm 
    success_url = '/sign_up_done/' 

templates/master.html (Я хочу, чтобы положить что-то здесь, что вызывает все TextInput виджеты, чтобы получить класс):

<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<title>{% block title %}{% endblock %} | Website</title> 
</head> 
<body> 
    <div class="content-wrapper clearfix"> 
    {% block main %}{% endblock %} 
    </div> 
</body> 
</html> 

templates/usermgmt/sign_up.html:

{% extends 'master.html' %} 

{% block title %}Sign Up{% endblock %} 

{% block main %} 
<h1>Sign Up</h1> 
<p>Enter your email to sign up!</p> 
<form class="form-group" method="post"> 
    {% csrf_token %} 
    <input type="hidden" name="next" value="{{ next }}"> 
    {{ form.as_p }} 
    <button class="btn btn-primary" type="submit">Sign Up</button> 
</form> 
{% endblock %} 

ответ

3

Насколько я понял из release notes of Django 1.11 и из моего собственного тестирования новые функции только позволяет нам легко настраивать способ отображения виджетов, просто предоставляя файлы HTML для каждого типа виджетов. В предыдущих версиях Django вам нужно было предоставить подкласс forms.widget.Widget и назначить этот виджет для полей модели/формы по одному (IIRC).

Если вы хотите сделать все виджеты TextInput, у вас должен быть свой класс text.html (и, возможно, ваш собственный attrs.html).

Например, у меня есть проект myforms с приложением main. Согласно документации:

Если вы используете TemplatesSetting визуализатор, перекрывая шаблоны виджетов работает так же, как переопределение любой другой шаблон в вашем проекте. Вы, , не можете переопределять встроенные шаблоны виджета, используя другие встроенные средства визуализации .

Таким образом, мы должны установить наш визуализатор в файле settings.py:

FORM_RENDERER = 'django.forms.renderers.TemplatesSetting' 

Но если мы только делаем это, мы должны были бы обеспечить шаблоны для всех входных элементов. Согласно документации:

С помощью этого средства визуализации наряду с встроенными шаблонами виджетов требует [...] [добавления] «django.forms» в INSTALLED_APPS и, по меньшей мере, один двигателя с APP_DIRS = True.

Поэтому мы добавляем django.forms в INSTALLED_APPS. Теперь для того, чтобы добавить нашу настройку, скажем, текстовых элементов ввода, нам нужно создать файл main/templates/django/forms/widgets/text.html и добавить наш пользовательский HTML-код там, как:

<input type="text" class="myclass" value="{{widget.value}}"> 

Таким образом, если мы покажем форму в шаблон, этот код будет отображаться всякий раз, когда необходимо, например, сделать CharField.

Но Все это не имеет значения, если вам нужен уровень управления на уровне поля, например, если каждому полю нужен другой класс. В этом случае вы должны объединить то, что я написал, с django-widget-tweaks, чтобы вы могли иметь более гибкую настройку виджета.

+0

Удивительного ответ; как бы я стилизовал все сообщения об ошибках с помощью класса 'custom-error'? Являются ли сообщения об ошибках «виджетом»? Мне это действительно не нужно, так как я могу создать ошибку, вручную введя «field.errors», но мне любопытно, возможно ли это путем простого создания шаблона. –

+0

расположение шаблона выше, обновленное в соответствии с ответом Анны Томас – Yunti

6

Продолжая ответ Хосе Томаса Tocino в выше, в Django 1.11 Я обнаружил, что моя структура каталогов должна быть:

главные/шаблоны/Джанго/форма/виджеты/text.html

+0

Я ценю усилия, но это, вероятно, должен быть комментарий или редактировать. Я понимаю, что вы новый пользователь. –

+2

@GregSchmit Вы правы, я пытался прокомментировать, но не имел репутации. Я подумал, что какой-то комментарий (надеюсь, поможет другому человеку) был лучше, чем никто. Спасибо за то, что не голосовали за меня –

 Смежные вопросы

  • Нет связанных вопросов^_^