jQuery的Django radioselect自定义渲染器 [英] Django radioselect custom renderer for jqueryui

问题描述

我想对Django表单中的单选使用jquery ui按钮集.我将以下自定义渲染器用于radioselect小部件，但输入位于标签内. jQuery ui不适用于该结构.我需要在渲染器中进行哪些更改，以将输入标签放置在标签之前?

I would like to use jquery ui buttonset for a radioselect from a django form. I am using the custom renderer below for the radioselect widget, but the input lands inside the label. jquery ui doesn't work with that structure. What do I need to change in the renderer to put the input tag before the label?

forms.py:

class SimpleRadioFieldRenderer(forms.widgets.RadioFieldRenderer):
    def render(self):
        """Outputs widget without <ul> or <li> tags."""
        return mark_safe(u'\n'.join([u'%s'
                % force_unicode(w) for w in self]))
class MyForm(Form):
    myradiofield = ChoiceField(
            widget=RadioSelect(renderer=SimpleRadioFieldRenderer),
            required=True,
            choices=(('a','one choice'), ('b','another choice')))

django在模板中呈现的方式如下:

Here is how django renders this in the template:

<label for="id_myradiofield_0"><input type="radio" name="myradiofield" value="a" id="id_myradiofield_0"> one choice</label>
<label for="id_myradiofield_1"><input type="radio" name="myradiofield" value="b" id="id_myradiofield_0"> another choice</label>

这是jquery ui期望它的外观:

Here is how jquery ui expects it to look:

<input type="radio" name="myradiofield" value="a" id="id_myradiofield_0"><label for="id_myradiofield_0"> one choice</label>
<input type="radio" name="myradiofield" value="b" id="id_myradiofield_0"> <label for="id_myradiofield_1">another choice</label>

预先感谢您的帮助.

推荐答案

您可以扩展RadioInput和RadioFieldRenderer类来解决此问题，并使用MyCustomRenderer作为呈现器

You can extend RadioInput and RadioFieldRenderer classes for the issue and use MyCustomRenderer as renderer

class MyRadioInput(RadioInput):
    def __unicode__(self):
        if 'id' in self.attrs:
            label_for = ' for="%s_%s"' % (self.attrs['id'], self.index)
        else:
            label_for = ''
        choice_label = conditional_escape(force_unicode(self.choice_label))
        return mark_safe(u'<label%s>%s</label>%s' % (label_for, choice_label, self.tag()))


class MyCustomRenderer( RadioFieldRenderer ):

    def __iter__(self):
        for i, choice in enumerate(self.choices):
            yield MyRadioInput(self.name, self.value, self.attrs.copy(), choice, i)

    def __getitem__(self, idx):
        choice = self.choices[idx] # Let the IndexError propogate
        return MyRadioInput(self.name, self.value, self.attrs.copy(), choice, idx)

如果您要解决方案客户端，则:

<script>
    $("label>input").each(function(index, item){                
        $(item).insertBefore($(item).parent())  
    })
</script>

您可以通过修改django.forms.widgets.py来获得解决方案:
滚动到class RadioInput

You can have the solution by modifying django.forms.widgets.py:
scroll to class RadioInput

我们将修改

def __unicode__(self):

return mark_safe(u'<label%s>%s %s</label>' % (label_for, self.tag(), choice_label)) #OLD

转到

return mark_safe(u'<label%s>%s</label>%s' % (label_for, choice_label, self.tag())) #NEW

这篇关于jQuery的Django radioselect自定义渲染器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！