如何更改表单中元素的样式和属性

使用 jQuery ，能够访问表单上的任意 DOM元素。

在下面的示例中，在实体项的客户端模块的 on_edit_form_created 事件处理程序中，我们找到 确定(OK) 按钮，将其隐藏，并将编辑表单中 取消(Cancel) 按钮的文本更改为 “关闭(Close)” ：

function on_edit_form_created(item) {
    item.edit_form.find("#ok-btn").hide();
    item.edit_form.find("#cancel-btn").text('Close');
}

当应用程序创建输入控件(input)时，它会向每个输入控件(input)添加一个类(class)，该类的名称是相应字段的 field_name 属性值。

因此，使用 jQuery 选择器，我们就能向下面那样找到 customer 字段对应的输入控件(input) （我们使用 “customer” 样式类选择在编辑表单里的输入控件元素）：

item.edit_form.find("input.customer")

找到表单的元素后，就能使用 jQuery 方法对其更改。

由于字段的输入框是在 on_edit_form_created 事件触发后，由 create_inputs 方法自动创建的（可参考任务客户端模块中的 on_edit_form_created 事件处理器），因此你必须编写 on_edit_form_shown 事件处理器来修改输入框样式和属性。

示例代码

.. code-block:: js

function on_edit_form_shown(item) {
item.edit_form.find('input.name').css('color', 'red'); item.edit_form.find('input.name').css('font-size', '24px'); item.edit_form.find('input.tracks_sold').width(20); item.edit_form.find('input.genre').parent().width('40%'); item.edit_form.find('input.composer').prop('type', 'password');

}

将像下面一样修改表单的输入框:

请注意：若你需要修改带有前置按钮或后置按钮的输入框（日期、日期时间、查询字段的输入框）的宽度，请直接设置该输入框父元素的宽度：

item.edit_form.find('input.album').parent().width('50%');

更改 DOM 元素样式的另一种方法是使用 CSS。在应用程序构建器中选择任务节点后，“project.css” 按钮将出现在右侧窗格中。单击它，打开位于项目文件夹中的 project.css 文件。您可以使用在它里面输入定义项目中 DOM 元素样式的 CSS 。

项目中创建的每个实体项的表单都有 css 类，使开发人员能够识别定位表单。

每个表单都有一个类来标识它的类型：“view-form”、“edit-form”、“filter-form” 或 “param-form” 。

例如，以下代码将隐藏表单底部按钮中的图像：

.view-form .form-footer .btn i {
    display: none;
}

更多编辑表单的例子：

.edit-form #ok-btn {
    font-weight: bold;
    background-color: lightblue;
}

.edit-form.invoices input.total {
    color: red;
}

同样，每个表单有个样式类，其名称是对应实体项的 item_name 属性值。

The following code will remove images in the buttons only in the Invoices view form: 下面的代码将只隐藏 发票(Invoices) 表单中按钮的图像

.view-form.invoices .form-footer .btn i {
    display: none;
}

你可以更改表格的显示方式。由 create_table 方法创建的表格，有一个 “dbtable” 样式和一个以实体项的 item_name 属性值命名的样式。表格的每列也有一个样式，其名称是对应字段的 field_name 属性值。

示例中，以下代码将以粗体显示 Invoices 表**Customer** 列中单元格的内容：

.dbtable.invoices td.customer {
    font-weight: bold;
}

另一种改变字段列显示方式的方法是编写 on_field_get_html 事件处理程序。

例如：

function on_field_get_html(field) {
    if (field.field_name === 'total') {
        if (field.value > 10) {
            return '<strong>' + field.display_text + '</strong>';
        }
    }
}