所在位置：
首页 >
营销资讯 >
网站运营 > Foxnic-Web 代码生成 (7) —— 配置表单页
Foxnic-Web 代码生成 (7) —— 配置表单页
时间：2023-07-24 22:51:01 | 来源：网站运营
时间：2023-07-24 22:51:01 来源：网站运营
Foxnic-Web 代码生成 (7) —— 配置表单页：
Foxnic-Web 代码生成 (7) —— 配置表单页
概述
我们之前已经介绍了字段的通用配置和字段的表单组件配置，这些配置仅限于单个字段。由于 Foxnic-Web 的模块页面以打开窗口的方式呈现表单内容，自然就会有对表单窗口的控制，以及表单字段布局的控制。
本篇我们就来了解一下，在代码生成时的表单呈现方面，我们可以做点啥。
本文中的示例代码均可在
https://gitee.com/LeeFJ/foxnic-samples 项目中找到，本文对照 webfull 项目讲解。
完整示例
Foxnic-Web 项目提供代码生成的完整示例，请大家参考：
https://gitee.com/LeeFJ/foxnic-web/blob/1.7.0.RELEASE/common/generator/src/main/java/org/github/foxnic/web/generator/module/example/CodeExampleConfig.java
配置表单窗口
表单相关的配置可以在模块代码配置类的 configForm 方法内实现：
@Overridepublic void configForm(ViewOptions view, FormOptions form, FormWindowOptions formWindow) { formWindow.width("120px"); formWindow.bottomSpace(263);}配置表单窗口，通过 ViewOptions.formWindow() 选项控制。formWindow 提供的控制项包括：
| 配置项 | 说明 |
| width | 设置表单窗口的宽度，默认500px；字符串可以指定像素或百分比。 |
| bottomSpace | 设置最下方的表单组件和窗口底部之间的间距，用于撑高表单窗口的高度，便于下拉框展示。 |
表单窗是按表单内实际内容自动调节高度的，所以不必指定表单窗口的高度。单某些情况下，由于表单内字段较少，窗口高度也会比较低，这时，如果输入框是下拉框，那么可能不能很好地展示下拉选项，需要将表单窗口的高度人为的增加一些，这时就需要用到 bottomSpace 参数。
配置表单依赖文件
表单以及表单页面通过 FormOptions 配置。在代码生成时，表单页面可以额外包含其它的 js 和 css 文件，以及变量等，配置项如下：
| 配置项 | 说明 |
| addCss | 添加 css 文件引入 |
| addJs | 添加 js 文件引入。 |
| addJsVariable | 添加 js 变量；这是表单的服务端模版变量。 |
配置表单外观参数
表单的外观参数如下：
| 配置项 | 说明 |
| labelWidth | 设置标签宽度，单栏次默认 65px；多栏次默认 100px |
| disableFooter | 禁用 Footer，用于页面的嵌入。 |
| disableMargin | 禁用 Margin，用于页面的嵌入。 |
| enableContextMenu | 启用右键菜单，默认false。 |
配置表单布局
Foxic-Web 的表单布局是比较丰富的，支持分组、分栏；支持添加嵌入页面、Tab等，相关配置项如下：
| 配置项 | 说明 |
| columnLayout | 使用分栏布局 |
| addGroup | 添加一个分组布局 |
| addPage | 添加一个内嵌页面 |
| addTab | 添加一个内嵌的 Tab |
配置表单接口
Foxic-Web 的表单布局是比较丰富的，支持分组、分栏；支持添加嵌入页面、Tab等，相关配置项如下：
| 配置项 | 说明 |
| savingURL | 设置自定义保存接口地址 |
| loadingURL | 设置自定义数据加载接口地址 |
小结
本节主要从表单窗口、表单页面依赖、表单外观、布局、接口等方面介绍了在代码生成时如何控制表单的外观呈现与功能特性。下一节，我们将介绍表格以及搜索相关方面的代码生成配置项。
相关项目
https://gitee.com/LeeFJ/foxnichttps://gitee.com/LeeFJ/foxnic-webhttps://gitee.com/lank/eamhttps://gitee.com/LeeFJ/foxnic-samples官方文档
http://foxnicweb.com/docs/doc.html
在线咨询
