自定义表单控件 === 表单设计器控件如下图: ![](https://img.kancloud.cn/2d/c8/2dc8ce8df526c22811031dcbb50cdbff_660x345.png) ### 1.单行输入框 ![](https://img.kancloud.cn/19/5b/195bc19691a209c2dd0ae0b86f709880_602x383.png) 单行输入框对应表单的普通输入框 ![](https://img.kancloud.cn/c5/28/c528d26c3d5e674d2e95bad5bab570fb_330x33.png) 控件名称:控件的名称 默认值:表单控件默认值 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 数据类型: 普通文本:文本输入框 邮箱地址:文本输入框,邮件地址校验 整数:文本输入框,整数校验 小数:文本输入框,两位小数校验 身份证号码:文本输入框,身份证号校验 日期(yyyy-MM-dd):文本输入框,时间控件(yyyy-MM-dd) 日期(yyyy-MM-dd HH:mm:ss):文本输入框,时间控件(yyyy-MM-dd HH:mm:ss) 对齐方式:控件页面对齐方式,左对齐、居中对齐、右对齐 长X宽 &字体大小:设置文本输入框的长宽和字体的大小 可见性:隐藏 勾选后 文本框type为hidden 校验规则:文本框的校验规则 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 ### 2.多行文本框 ![](https://img.kancloud.cn/a0/c2/a0c2a414ceebfe38a1f43d5d7ebd866b_605x401.png) 多行文本框展示效果: ![](https://img.kancloud.cn/16/d2/16d2edc8cb720a3b9d412e9b2787aebf_638x100.png) 控件名称:控件的名称 字体大小:设置多行文本框字体的大小 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 输入框样式:设置多行文本框的宽、高 增强:富文本形式,勾选后多行文本增加富文本编辑器控件 校验规则:文本框的校验规则 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 默认值:多行文本默认值 ### 3.下拉菜单 ![](https://img.kancloud.cn/30/79/30794546db3ca1a2e340e0e99c46be83_593x440.png) 下拉框展示效果: ![](https://img.kancloud.cn/5f/0c/5f0cb0045c4af4b193719577c181bdfe_325x42.png) 控件名称:控件的名称 控件样式:设置下拉框字体的宽高 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 数据字典:选择下拉框的数据字典 初始选定:下拉框的默认选择 校验规则:文本框的校验规则 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 列表值:不使用数据字典的话,设置的下拉框列表 ### 4.单选框 ![](https://img.kancloud.cn/29/d1/29d173ab804097390c523210e7955bbe_594x442.png) 单选框展示效果: ![](https://img.kancloud.cn/21/2f/212f786d613c56d23ae97dccebc7100c_260x39.png) 控件名称:控件的名称 排列方式:单选项排列方式,横排、竖排 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 数据字典:选择下拉框的数据字典 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 添加选项:不选择校验字典时,在此设置单选框选项 ### 5.复选框 ![](https://img.kancloud.cn/c1/bc/c1bc2868d22e02fb4881806568030360_604x471.png) 复选框预览效果 ![](https://img.kancloud.cn/a2/db/a2db9a5e068a13300d7cea6db081ce00_244x44.png) 控件名称:控件的名称 排列方式:复选项排列方式,横排、竖排 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 数据字典:选择下拉框的数据字典 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 添加选项:不选择校验字典时,在此设置复选框选项 ### 6.列表控件 ![](https://img.kancloud.cn/69/c5/69c5e1a9c741e7406072db03b8a57e93_1108x473.png) 列表控件预览效果: ![](https://img.kancloud.cn/d9/6e/d96e48112e7c99af30ff98a2058b2e97_1257x206.png) 控件名称:列表控件名称 数据源:要展示成列表的数据源 宽:列表的宽度设置 外键字段:设置子表作为外键的字段 关联数据源字段:该字段配置自定义表单设置的主表数据源一起使用,该字段为子表外键与主表数据源关联的字段 列表行信息设置: 序号:列展示的顺序 表头:列表表头信息 类型:列字段展示的控件类型 字段:列展示的数据源字段 长度:列字段展示的控件的长度 单位:列字段展示的控件的单位 数据字典:列字段展示的为下拉框、单选框、复选框时,展示数据字典内容 合计:该列是否是合计列 默认值:列字段展示,添加模式下的默认值 校验规则:列字段在添加、编辑模式下的校验规则 隐藏:该列是否隐藏 ### 7.Popup控件 ![](https://img.kancloud.cn/0a/af/0aaf97699d6d71486165d47880831398_595x439.png) 展示效果: ![](https://img.kancloud.cn/d8/3c/d83cfb05b29734c5a8cb66eb879c083a_279x54.png) 点击选择 ![](https://img.kancloud.cn/1f/1b/1f1b92e4979b5f8af466a0b0cc59d417_803x465.png) 选择后: ![](https://img.kancloud.cn/41/84/4184d1d0ec9aafa6ef12ea5ff12bf1b3_269x47.png) 控件名称:控件的名称 控件样式:设置控件宽高 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 Popup报表:online报表编码 校验规则:列字段在添加、编辑模式下的校验规则 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 值ID:popup弹出框选择后填充到控件的字段 值文本:暂时没有使用 ### 8.Button按钮控件 ![](https://img.kancloud.cn/da/93/da9318ecdfc62fbfe7c1259f955c88b0_591x435.png) 页面效果: ![](https://img.kancloud.cn/57/bb/57bb0aaa742ca52da4a93ba73825e220_171x72.png) 控件标题:按钮显示的名称 控件名称:生成的按钮name、id属性的值,可以通过该属性绑定按钮事件 (js增增强,jquery给其绑定事件) 控件样式:按钮的样式控制 ### 9.控件校验规则 ![](https://img.kancloud.cn/7b/23/7b236ae582099bb6211dbe87451cf541_313x94.png) (1)表单校验规则使用validform表单验证插件 验证规则参照validform datatype 规则的使用 (2)该校验规则下拉框内容再数据字典中维护,若要增加自定义的规则,则需要在数据字典中添加 ![](https://img.kancloud.cn/5c/dd/5cdd8d380e0eca9def64be30a7f2e75f_1041x539.png)