用于 jqueryui 的 Django radioselect 自定义渲染器答案

【问题标题】：Django radioselect custom renderer for jqueryui用于 jqueryui 的 Django radioselect 自定义渲染器
【发布时间】：2011-11-12 02:06:10
【问题描述】：

我想将 jquery ui 按钮集用于 django 表单中的无线电选择。我正在为 radioselect 小部件使用下面的自定义渲染器，但输入位于标签内。 jquery ui 不适用于该结构。我需要在渲染器中进行哪些更改才能将输入标签放在标签之前？

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 在模板中的呈现方式：

<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 期望的样子：

<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>

提前感谢您的帮助。

【问题讨论】：

标签： django jquery-ui

【解决方案1】：

尝试以下方法：

myradiofield = forms.ChoiceField(choices=YOURCHOICES,initial=0,
                     widget=forms.RadioSelect(renderer=HorizontalRadioRenderer),)

【讨论】：

你从哪里导入 HorizontalRadioRenderer？它似乎没有内置到 Django 中。
抱歉，将以下内容放入您的middleware.py 文件class HorizontalRadioRenderer(forms.RadioSelect.renderer): def render(self): return mark_safe(u'\n'.join([u'%s\n' % w for w in self])) 然后使用from middleware import HorizontalRadioRenderer 这会将您的所有组单选按钮放在一行中，这样如果您使用jQueryUI groupRadio，它们会看起来不错
Sevenearths，你在 jquery ui buttonsets 中成功使用过这个吗？它似乎与我正在使用的渲染器几乎相同。
链接代码中的 radioselect 是我正在寻找的，但似乎不是由 Django 呈现的。您能否分享您的模板语法和浏览器呈现的 HTML？
链接是 HTML 输出（和模板，由于 radioGroupButtons 的性质，它主要是硬编码的），答案是您在 forms.py 中需要的。我的建议是玩弄它并遵循这个 - wikis.utexas.edu/display/~bm6432/…

【解决方案2】：

您可以针对问题扩展 RadioInput 和 RadioFieldRenderer 类并使用 MyCustomRenderer 作为渲染器

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

我们将修改最后一行

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

【讨论】：

请不要修改widgets.py，使用面向对象编程（继承）。
最终继承了 RadioInput 和渲染器。为 Guetti +1。