Foxnic-Web 代码生成 (6) —— 配置字段的表单组件
概述
上一篇中我们讲述了字段配置的通用项,本篇将详细介绍字段的表单编辑器配置。针对不同的表单编辑器,可以指定不同的代码生成参数。默认情况下,代码生成会根据表字段的类型等信息自动匹配一个表单组件。当然,开发人员也可以手动指定每个字段的表单组件类型。
虽然表单组件是呈现在表单界面的,但是它的设置同样会影响搜索区域对应的条件输入框。搜索区域的条件输入框组件按一定的规则与表单组件对应。本文将逐个介绍表单组件以及它们的代码生成配置项。
本文中的示例代码均可在 https://gitee.com/LeeFJ/foxnic-samples 项目中找到,本文对照 webfull 项目讲解。
完整示例
由于,每个组件的配置较多,本篇也不能完全一一列举,提供 Foxnic-Web 项目下有一各种组件支持的完整示例,请大家参考:
单行文本框
单行文本框是大多数情况下字段的默认组件。通过 view.field(XXX).form().textInput() 方法指定,默认搜索框为单行文本框。它的配置项有:
配置项 | 说明 |
---|---|
defaultText | 指定默认文本 |
多行文本框
多行文本框通过 view.field(XXX).form().textArea() 方法指定,默认搜索框为单行文本框。它的配置项有:
配置项 | 说明 |
---|---|
defaultText | 指定默认文本 |
height | 指定文本框高度 |
数值输入框
数值输入框通过 view.field(XXX).form().numberInput() 方法指定,默认搜索框为数值输入框。它的配置项有:
配置项 | 说明 |
---|---|
allowNegative | 是否允许负数,默认允许 |
decimal | 指定为小数输入框 |
integer | 指定为整数输入框 |
defaultValue | 默认值 |
range | 数值范围 |
scale | 小数位 |
step | 滚轮步长 |
按钮组件
按钮组件通过 view.field(XXX).form().button() 方法指定。它的配置项有:
配置项 | 说明 |
---|---|
action | 指定默认文本 |
chooseOrganization | 打开组织选择对话框 |
chooseCompany | 打开公司选择对话框 |
chooseDepartment | 打开部门选择对话框 |
chooseEmployee | 打开员工选择对话框 |
choosePosition | 打开岗位对话框 |
复选框
复选框组件通过 view.field(XXX).form().checkBox() 方法指定,默认搜索框为下拉框。它的配置项有:
配置项 | 说明 |
---|---|
defaultValue | 指定默认选中的值 |
defaultIndex | 指定默认选中的序号 |
enumType | 指定选项为枚举类型 |
dict | 指定选项为数据字典 |
单选框
单选框组件通过 view.field(XXX).form().radioBox() 方法指定,默认搜索框为下拉框。它的配置项有:
配置项 | 说明 |
---|---|
defaultValue | 指定默认选中的值 |
defaultIndex | 指定默认选中的序号 |
enumType | 指定选项为枚举类型 |
dict | 指定选项为数据字典 |
下拉框
下拉框组件通过 view.field(XXX).form().selectBox() 方法指定,默认搜索框为下拉框。它的配置项有:
配置项 | 说明 |
---|---|
defaultValue | 指定默认选中的值 |
defaultIndex | 指定默认选中的序号 |
enumType | 指定选项为枚举类型 |
dict | 指定选项为数据字典 |
fillWith | 指定用哪个属性的数据填充下拉框的已选值 |
filter | 是否使用过滤功能 |
muliti | 配置为是否多选 |
paging | 是否分页 |
size | 分页大小 |
queryApi | 指定取数的 API 地址 |
valueField | 设置值列名 |
textField | 设置显示列名 |
toolbar | 是否使用工具栏 |
日期选择框
日期选择框通过 view.field(XXX).form().dateInput() 方法指定。它的配置项有:
配置项 | 说明 |
---|---|
format | 格式,如: yyyy-MM-dd HH:mm:ss , yyyy-MM-dd默认,为自动识别 |
defaultNow | 设置默认值为当前时间 |
renderAtTop | 为避免 iframe 区域太小而被遮挡,可设置改值使其弹出框显示在 iframe 之外 ; 默认 false |
Switch组件
Switch 组件通过 view.field(XXX).form().logicField() 方法指定。它的配置项有:
配置项 | 说明 |
---|---|
defaultValue | 指定默认文本 |
on | 设置开启(逻辑真)状态下的标签与值 |
off | 设置关闭(逻辑假)状态下的标签与值 |
文件上传组件
文件上传组件通过 view.field(XXX).form().upload() 方法指定。它的配置项有:
配置项 | 说明 |
---|---|
acceptAllType | 允许上传任意类型的文件 |
acceptAudioType | 仅允许上传音频 |
acceptImageType | 仅允许上传图片 |
acceptSingleFile | 仅允许上传单个文件 |
acceptSingleImage | 仅允许上传单个图片 |
acceptVideoType | 仅允许上传视频 |
acceptMime | 允许上传的Mime |
acceptExts | 允许上传的文件扩展名 |
buttonLabel | 文件浏览按钮的显示文本 |
displayFileName | 是否显示文件名 |
maxFileCount | 最大文件数量 |
小结
本节列举了 Foxnic-Web 目前已经支持的全部表单组件。表格中的每个配置方法都包含若干参数,由于篇幅限制不能一一列举每个方法内参数的用法,大家可以按 JavaDoc 提示指定参数值。
相关项目
https://gitee.com/LeeFJ/foxnic
https://gitee.com/LeeFJ/foxnic-web
https://gitee.com/LeeFJ/foxnic-samples