Django: Thêm các lớp CSS khi hiển thị các trường biểu mẫu trong một mẫu

Question

Tôi đang xuất các trường của biểu mẫu trong một mẫu như thế này {{ form.first_name }} và tôi muốn thêm một lớp (ví dụ: bản thiết kế span-x -class) cho nó. Vì vậy, tôi muốn biết nếu có một giải pháp readymade tốt đẹp (bộ lọc mẫu) cho rằng, mà tôi có thể sử dụng trong thời trang {{ form.first_name|add_class:"span-4" }}? (Tôi chỉ muốn biết các nhà phát triển của Django hay bất kỳ ai đã nghĩ về điều đó mà không có kiến ​​thức của tôi trước khi tự mình làm)

Answer 1

Để giải quyết vấn đề này, tôi đã tạo bộ lọc mẫu của riêng mình, bạn có thể áp dụng nó trên bất kỳ thẻ nào, không chỉ các yếu tố đầu vào!

class_re = re.compile(r'(?<=class=["\'])(.*)(?=["\'])') 
@register.filter 
def add_class(value, css_class): 
    string = unicode(value) 
    match = class_re.search(string) 
    if match: 
     m = re.search(r'^%s$|^%s\s|\s%s\s|\s%s$' % (css_class, css_class, 
                css_class, css_class), 
                match.group(1)) 
     print match.group(1) 
     if not m: 
      return mark_safe(class_re.sub(match.group(1) + " " + css_class, 
              string)) 
    else: 
     return mark_safe(string.replace('>', ' class="%s">' % css_class)) 
    return value 

Answer 2

Bạn cần chỉ định tiện ích một cách rõ ràng và thêm lớp bằng cách sử dụng attrs keyword argument. Không có cách nào khác mà tôi biết.

Tuy nhiên, nếu điều này quá cồng kềnh, bạn vẫn có thể bọc trường trong phần tử khác, chẳng hạn như div hoặc span và thêm lớp vào đó. Sau đó sửa đổi CSS của bạn cho phù hợp.

Answer 3

tôi vẫn đang học Django, nhưng bạn không thể làm một cái gì đó như thế này này -

from django import forms 

class SomeForm(forms.Form): 
    f = forms.CharField(label='x',widget=forms.TextInput(attrs={'class':'name'})) 

Tôi đoán không có nhu cầu để làm điều này ở mẫu mực (hoặc bộ lọc sử dụng), trừ khi bạn có một số yêu cầu mà tôi không hiểu.

Answer 4

Một vài lưu ý bổ sung về cách tìm hiểu giải pháp rất tiện lợi của Lazerscience. Dưới đây là cách tệp trông với nhập khẩu phụ thuộc:

import re 
from django.utils.safestring import mark_safe 
from django import template 
register = template.Library() 

class_re = re.compile(r'(?<=class=["\'])(.*)(?=["\'])') 
@register.filter 
def add_class(value, css_class): 
    string = unicode(value) 
    match = class_re.search(string) 
    if match: 
     m = re.search(r'^%s$|^%s\s|\s%s\s|\s%s$' % (css_class, css_class, 
                css_class, css_class), 
                match.group(1)) 
     print match.group(1) 
     if not m: 
      return mark_safe(class_re.sub(match.group(1) + " " + css_class, 
              string)) 
    else: 
     return mark_safe(string.replace('>', ' class="%s">' % css_class)) 
    return value 

Tôi đã dán tệp này vào tệp được gọi là add_class.py. Cấu trúc thư mục là: mydjangoproject> general_tools_app> templatetags> add_class.py

general_tools_app là một ứng dụng thu thập chức năng hữu ích như thế này mà tôi thêm vào dự án django mới.

(The general_tools_app và templatetags danh bạ cả hai đều có một __init__.py tập tin rỗng để họ được đăng ký một cách chính xác)

Trong settings.py, tuple INSTALLED_APPS tôi bao gồm các mục nhập 'mydjangoproject.general_tools_app'.

Để sử dụng bộ lọc trong mẫu, tôi thêm dòng {% load add_class %} ở đầu tệp. Nếu tôi muốn thêm lớp 'xóa' để một lĩnh vực, tôi muốn làm

{{ myfield|add_class:'delete' }} 

Answer 5

Thêm một ghi chú này về giải pháp lazerscience của: nếu bạn áp dụng điều này để một < chọn > yếu tố không có thuộc tính lớp, chuỗi thay thế trong trường hợp khác sẽ tạo ra một cái gì đó như thế này:

<select name="state" id="id_state" class="class1 class2"> 
    <option value="AL" class="class1 class2">Alabama</option class="class1 class2"> 
    <option value="AK" class="class1 class2">Alaska</option class="class1 class2"> 
    <option value="AZ" class="class1 class2">Arizona</option class="class1 class2"> 
</select class="class1 class2"> 

Tôi khá chắc chắn các trình duyệt loại bỏ các định nghĩa lớp không liên quan, nhưng đó là rất nhiều chuỗi thay thế khi bạn chỉ cần một. Một phương thuốc dễ dàng cho việc này:

return mark_safe(string.replace('>', ' class="%s">' % css_class, 1)) 

Đó tranh luận cuối cùng (1) sẽ đảm bảo rằng chỉ những trường hợp đầu tiên của ">" sẽ được thay thế bằng "class =" ... ">, đó là một cách logic chính xác cho bất kỳ phần tử biểu mẫu.

Answer 6

Bạn chỉ cần phải cài đặt Django widget_tweaks

pip install django-widget-tweaks 

Sau khi bạn có thể làm điều gì đó như thế trên mẫu của bạn:

{{ form.search_query|attr:"type:search" }} 

-

Đọc tất cả về nó here.

Answer 7

Một cách khác là sử dụng phương pháp as_widget trên một trường để thay đổi nó - đơn giản và an toàn hơn so với phương pháp tiếp cận regex và không yêu cầu bất kỳ phụ thuộc bổ sung nào.

Xác định một custom template filter: Tôi

{{ form.first_name|add_class:"span-4" }} 

Bạn cũng có thể sử dụng as_widget thêm các thuộc tính khác, như placeholder vv