2011-01-16 3 views
2

나는 다음과 같은 형식이 있습니다RadioSelect에 이미지를 무선 값으로 저장하려면 어떻게합니까?

class ReviewForm(forms.ModelForm): 
class Meta: 
    model = Review 

    widgets = { 
     'tipo' : forms.RadioSelect(), 
    } 

을하지만 내 라디오 버튼의 값이, 이미지가 옵션에 따라 달라집니다 나는이 같은 이미지를 사용하려면 :

<input type="radio" id="id_tipo_0" value="UP" name="tipo" /><img src="/images/thumb_up.gif"/> 
<input type="radio" id="id_tipo_1" value="DOWN" name="tipo" /><img src="/images/thumb_DOWN.gif"/> 

내가 가진 이것을 달성하는 방법에 대한 단서도 없습니다.

+0

일반 CSS는 사용할 수 없습니다. OS 레벨 컨트롤입니다. 자바 스크립트로 가짜로 만들 수는 있지만 라디오 요소의 실제 화면 그리기를 제어 할 수있는 방법은 없습니다. –

+0

django의 form.as_p 출력 (이름과 ID)을 모방하여 양식을 하드 코드하면 어떻게됩니까? –

답변

2

RadioSelect (및 RadioFieldRenderer) 클래스를 재정의 할 수 있습니다.

OR! jquery (또는 이와 비슷한)를 사용하여 img를 동적으로 삽입 할 수 있습니다. 당신이 장고 양식 렌더링 기능을 사용하려면

$(document).ready(function(){ 
    $("#id_tipo_0").after('<img src="/images/thumb_up.gif"/>') 
    $("#id_tipo_1").after('<img src="/images/thumb_down.gif"/>') 
}); 
+0

더 설명해 주시겠습니까? 양식을 사용자 정의하는 것은 처음입니다. {{form.tipo}}로 작성하면 모든 옵션이 인쇄되므로 옵션 값에 따라 각 옵션마다 다른 이미지를 렌더링하고 싶습니다. –

+0

{{form.tipo}}도 두 개의 라디오 버튼을 그대로 렌더링합니다. –

+0

니스, 저는 RadioFieldRenderer에 대해 더 자세히 읽겠습니다. –

0

, 당신은 DOM을 modifiy 자바 스크립트를 사용해야합니다, 이것은 옵션의 이름이 바로 입력 태그 후 렌더링되기 때문에 엉망이되지 않습니다 임의의 태그로 묶여 ...

양식에 다른 태그가 없다면 입력과 같이 입력하십시오. 신중하게 장고 이름과 라디오 입력 값을 사용하고 제출 버튼을 추가하십시오 , CSRF 토큰 등이 있습니다. {{form.as_p}}를 통해 렌더링 된 것처럼 양식의 유효성을 검사 할 수 있습니다.

+0

나는 장고의 형태를 렌더링 할 것이라고 생각한다. 앞으로 어떤 문제가 생길 수 있습니까? 파이썬 클래스에서 HTML 및 CSS attrs를 정의하는 것을 정말 좋아하지 않습니다. –

+0

유일한 문제는 DRY가 아니라는 것입니다. 필드 이름을 "tipo"로 변경하면 변경 사항을 반영하기 위해 템플릿을 편집해야합니다. 큰 문제는 아닙니다. 시작하는 경우 모든 양식에서이 작업을 수행하십시오. –

+0

RadioFieldRenderer를 확장하고 메서드 렌더링을 재정의하는 방법에 대해 읽었지만 여전히 값을 변경하는 방법을 찾을 수 없습니다. 이 클래스에서는 태그가 이미 만들어져 있으며 다음과 같이 주변 코드 만 변경할 수 있습니다. return mark_safe (u '\ n % s \ n'% u '\ n'. 조인 ([u '% s'% force_unicode (w) for self]))) –

9

이 문제에 대한 해결책!

ModelChoiceField은 방법이 label_from_instance(self, obj)입니다. 이 메서드는 ModelChoiceField의 모든 옵션에 대해 호출됩니다.

def label_from_instance(obj): 
    """ 
    Shows an image with the label 
    """ 
    image = conditional_escape(obj.thumbnail_image.url) 
    title = conditional_escape(obj.title) 

    label = """<img src="%s" />%s""" % (image, title) 

    return mark_safe(label) 

참고 :

당신과 ModelChoiceField.label_from_instance를 덮어 쓸 수 있습니다 당신이 그렇지 않으면 렌더러가 img 태그를 피할 것, mark_safe를 사용해야합니다. 사용자 입력 값 (제목 및 URL)에 conditional_escape을 적용하십시오.

일반 ChoiceField을 사용하려는 경우 choices 매개 변수에 HTML을 추가하고 mark_safe을 추가하면됩니다.

관련 문제