【问题标题】:Create repeatable custom form fields in web2py?在 web2py 中创建可重复的自定义表单字段?
【发布时间】:2013-10-11 01:32:12
【问题描述】:

我想创建 twitter bootstrap 兼容表单。根据docs for Twitter Bootstrap v2.2.2(web2py 中包含的版本),html 应如下所示:

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
            <input type="text" id="inputEmail" placeholder="Email">
        </div>
    </div>
...

我目前正在使用 SQLFORM,它输出的 html 并不真正适合这个(即使使用 formstyle='divs')。此外,我希望我的 html 输出是干净的,没有 web2py 工件,例如class="w2p_fl"。所以我的想法是使用自定义表单。然而,这样做会有很多重复的代码。也就是说,基本上每个字段都需要重复以下内容。

{{=form.custom.begin}}
<div class="control-group">
    {{=LABEL(form.custom.label['myfield'], _class='control-label',
        _for='mytable_myfield')}}
    <div class="controls">{{=form.custom.widget.myfield}}</div>
</div>
...
{{=form.custom.end}}

那么我怎样才能重复上面的代码单元,以便我可以用 {{=bootstrap_field(db.mytable.myfield)}} 之类的东西或其他一些遵守 DRY 的方式来替换它?

执行此操作的 web2py 方法是什么?创建视图函数?在控制器返回的字典中传递一个函数?创建我自己的 html 助手?创建我自己的小部件?另一种方式?

【问题讨论】:

    标签: forms twitter-bootstrap dry web2py


    【解决方案1】:

    如果您使用的是 Bootstrap 2,您可以这样做:

    form = SQLFORM(..., formstyle='bootstrap')
    

    对于 Bootstrap 3(或您想要创建的任何其他自定义表单样式),formstyle 参数可以是生成表单 DOM 的函数(或其他可调用)。该函数将传递表单和一个fields 对象,它是一个元组列表,每个元组包含一个CSS id、标签、输入元素和(可能为空的)注释/帮助文本。要了解此类函数的外观,请查看the one used for Bootstrap 2 forms

    【讨论】:

    • 完美!奇怪的是 bootstrap formstyle 在我能找到的文档中没有。我还看到 formstyle 可以在文档中调用:formstyle can also be a function that takes (record_id, field_label, field_widget, field_comment) as attributes and returns a TR() object. 但是因为它说TR 并且我不想要一张桌子,所以我认为它不能满足我的要求。
    • 我的回复中的所有内容都没有记录。你从书中引用的文本已经过时了——它仍然有效,但你现在可以传入一个生成整个表单 DOM 的可调用对象,而不仅仅是单个 TR 对象(框架代码将检查你的函数以确定它是遗留类型还是新类型,取决于它需要多少个参数——如果它需要 4 个参数,它会假定它是一个遗留函数。
    • 另外,如果您有要编辑的答案,我仍然会对如何处理可重复代码单元(除了 formstyle 函数)的问题的更直接的答案感兴趣。
    • 如果您想要可重复的代码来生成表单 DOM,那么像 formstyle 函数之类的方法将是可行的方法(即使您实际上并未将它与 formstyle 参数一起使用,您也可以d 仍然想要一个类似的函数来以编程方式构建表单)。
    • 我要么在模型文件中定义函数,以便它在任何地方都可用,要么将它放在一个模块中并导入它。您也可以考虑在控制器中调用它,然后将最终表单 DOM 传递给视图。如果您只需要调整现有的表单 DOM,您可以使用 server-side DOM 功能。另一种选择可能是创建一个特殊的视图模板,将其包含在视图中,并确保从控制器返回所需的数据。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多