web2py 中 SQLFORM 小部件输入的自定义 CSS 类 [英] Custom CSS classes for SQLFORM widget input in web2py

问题描述

给定控制器中的这个 SQLFORM:

form = SQLFORM.factory(db.source_server, db.target_server)

具有以下表定义:

db.define_table('target_server',Field('target_url', 'string'),Field('target_user', 'string'),Field('target_password', '密码'))db.define_table('target_server',Field('target_url', 'string'),Field('target_user', 'string'),Field('target_password', '密码'))

如何为每个表单小部件 元素应用自定义 CSS 类?

 {{=form.custom.begin}}<字段集><legend>源服务器</legend><div class="clearfix"><label for="source_url">网址:</label><div class="输入"><input class="bla bla" name="field_name">

...{{=form.custom.end}}

解决方案

注意，所有小部件都已经有一个以小部件类型命名的类(例如，字符串"、整数"、日期"等)作为以及形式为tablename_fieldname"的 id，因此您可以在 CSS 中使用它们，而无需添加自定义类.请参阅此处了解更多详情.

如果您确实需要自定义类，请注意 web2py FORM 和 SQLFORM 对象及其子组件是 HTML helper 对象 并且可以像任何 HTML helper 一样操作.特别是，helpers 就其组件而言充当列表，而在其属性方面充当字典(输入类是 INPUT 对象的属性).因此，您可以在创建表单的控制器或视图中执行类似操作:

form.custom.widget.field_name['_class'] = 'bla bla'

如果您需要更改特定类型的所有小部件的类，您也可以通过 .elements() 搜索功能:

 for input in form.elements('input', _class='string'):输入['_class'] = '我的字符串'

另一个选项是在表定义中明确为字段定义小部件，使用自定义小部件或简单地将 _class 属性传递给内置小部件之一:

Field('target_user', 'string', widget = lambda field, value:SQLFORM.widgets.string.widget(field, value, _class='my-string'))

此方法将影响包含此字段的所有表单(除非您在创建表单之前明确删除或替换小部件).

Given this SQLFORM in the controller:

form = SQLFORM.factory(db.source_server, db.target_server)

with the following table definition:

db.define_table('target_server',
                Field('target_url', 'string'),
                Field('target_user', 'string'),
                Field('target_password', 'password'))
db.define_table('target_server',
                Field('target_url', 'string'),
                Field('target_user', 'string'),
                Field('target_password', 'password'))

how can I apply custom CSS classes for each form widget <input> element?

  {{=form.custom.begin}}
  <fieldset>
    <legend>Source Server</legend>
    <div class="clearfix">
      <label for="source_url">URL:</label>
      <div class="input">

        <input class="bla bla" name="field_name">

      </div>
    </div>
  ...
  {{=form.custom.end}}

解决方案

Note, all widgets already have a class named for the type of widget (e.g., "string", "integer", "date", etc.) as well as an id of the form "tablename_fieldname", so you might be able to make use of those in your CSS without needing to add custom classes. See here for more details.

If you do need to customize the classes, note that web2py FORM and SQLFORM objects and their sub-components are HTML helper objects and can be manipulated like any HTML helpers. In particular, helpers act as lists with respect to their components and dictionaries with respect to their attributes (an input class is an attribute of the INPUT object). So, you can do something like this, either in the controller that creates the form or in the view:

form.custom.widget.field_name['_class'] = 'bla bla'

If you need to change the class of all widgets of a particular type, you can also do that via the .elements() search functionality:

for input in form.elements('input', _class='string'):
    input['_class'] = 'my-string'

An additional option is to explicitly define a widget for the Field in the table definition, either using a custom widget or simply passing a _class attribute to one of the built-in widgets:

Field('target_user', 'string', widget = lambda field, value:
    SQLFORM.widgets.string.widget(field, value, _class='my-string'))

This method will affect all forms that include this field (unless you explictly remove or replace the widget before creating the form).

这篇关于web2py 中 SQLFORM 小部件输入的自定义 CSS 类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！