Question

我很想找到解释如何使用wtforms创建自定义窗口小部件的资源。我想显示一个切换按钮列表。到目前为止，我已经能够使用

创建一个复选框列表

SelectMultipleFields:
  class PrecisionForm(FlaskForm):
    phone_number = StringField('Phone number', [validators.Length(min=4, max=25)])
    contact_emails = SelectMultipleField(
        'Contact emails',
        [at_least_one],
        choices=[],
        option_widget=widgets.CheckboxInput(),
        widget=widgets.ListWidget(prefix_label=False)
     )

但现在我想用我的自定义小部件修改我的widget.CheckBoxInput()，如下所示：

<label class='switch'> <input type='checkbox'><span class='slider round'></span></label>

如果有人能够逐步解释如何做到这一点，我将非常感激。

- UPDATE -

我找到了一种方法来实现我想做的事情，但看起来非常糟糕：

class ToggleButtonWidget(object):
    def __call__(self, field):
        html = '<label class="switch"><input type="checkbox" id={} name={} value={}><span class="slider round"></span></label>'.format(field.id, field.name, field.label.__dict__['text'])
        return HTMLString(html)

尤其是这部分：field.label.__dict__['text']我用来设置我的复选框的值（来自wtforms的字段对象没有属性值）。还有更好的方法吗？

Answer 1

应在前端对输入字段进行样式设置。例如，您将拥有：

class CheckBoxWidget(Form):
    box1 = BooleanField()
    box2 = BooleanField()
    ...


widget = FormField(CheckBoxWidget)

然后在您的html文件中，您将得到类似的内容：

<div>
    form.widget.label("checkbox-class")
    form.widget("other-checkbox-class")
</div>

包裹在表单中。

使用flask wtforms创建自定义小部件

1 个答案: