自定义表单控件 === 表单设计器控件如下图: ![输入图片说明](https://static.oschina.net/uploads/img/201804/24144533_muPl.png "在这里输入图片标题") ### 1.单行输入框 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24144618_AXPP.png "在这里输入图片标题") 单行输入框对应表单的普通输入框 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24144644_PRHm.png "在这里输入图片标题") 控件名称:控件的名称 默认值:表单控件默认值 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 数据类型: 普通文本:文本输入框 邮箱地址:文本输入框,邮件地址校验 整数:文本输入框,整数校验 小数:文本输入框,两位小数校验 身份证号码:文本输入框,身份证号校验 日期(yyyy-MM-dd):文本输入框,时间控件(yyyy-MM-dd) 日期(yyyy-MM-dd HH:mm:ss):文本输入框,时间控件(yyyy-MM-dd HH:mm:ss) 对齐方式:控件页面对齐方式,左对齐、居中对齐、右对齐 长X宽 &字体大小:设置文本输入框的长宽和字体的大小 可见性:隐藏 勾选后 文本框type为hidden 校验规则:文本框的校验规则 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 ### 2.多行文本框 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24144800_bjTX.png "在这里输入图片标题") 多行文本框展示效果: ![总体概述](http://jeecg3.mydoc.io?v=41193&t=278317) 输入图片说明](https://static.oschina.net/uploads/img/201804/24144829_hld8.png "在这里输入图片标题") 控件名称:控件的名称 字体大小:设置多行文本框字体的大小 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 输入框样式:设置多行文本框的宽、高 增强:富文本形式,勾选后多行文本增加富文本编辑器控件 校验规则:文本框的校验规则 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 默认值:多行文本默认值 ### 3.下拉菜单 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145108_mfY8.png "在这里输入图片标题") 下拉框展示效果: ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145136_rkJd.png "在这里输入图片标题") 控件名称:控件的名称 控件样式:设置下拉框字体的宽高 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 数据字典:选择下拉框的数据字典 初始选定:下拉框的默认选择 校验规则:文本框的校验规则 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 列表值:不使用数据字典的话,设置的下拉框列表 ### 4.单选框 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145215_a4wI.png "在这里输入图片标题") 单选框展示效果: ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145239_9UOA.png "在这里输入图片标题") 控件名称:控件的名称 排列方式:单选项排列方式,横排、竖排 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 数据字典:选择下拉框的数据字典 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 添加选项:不选择校验字典时,在此设置单选框选项 ### 5.复选框 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145314_v2xj.png "在这里输入图片标题") 复选框预览效果 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145339_gDTo.png "在这里输入图片标题") 控件名称:控件的名称 排列方式:复选项排列方式,横排、竖排 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 数据字典:选择下拉框的数据字典 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 添加选项:不选择校验字典时,在此设置复选框选项 ### 6.列表控件 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145424_A2bC.png "在这里输入图片标题") 列表控件预览效果: ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145440_G5wV.png "在这里输入图片标题") 控件名称:列表控件名称 数据源:要展示成列表的数据源 宽:列表的宽度设置 外键字段:设置子表作为外键的字段 关联数据源字段:该字段配置自定义表单设置的主表数据源一起使用,该字段为子表外键与主表数据源关联的字段 列表行信息设置: 序号:列展示的顺序 表头:列表表头信息 类型:列字段展示的控件类型 字段:列展示的数据源字段 长度:列字段展示的控件的长度 单位:列字段展示的控件的单位 数据字典:列字段展示的为下拉框、单选框、复选框时,展示数据字典内容 合计:该列是否是合计列 默认值:列字段展示,添加模式下的默认值 校验规则:列字段在添加、编辑模式下的校验规则 隐藏:该列是否隐藏 ### 7.Popup控件 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145539_0Zky.png "在这里输入图片标题") 展示效果: ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145555_vDgV.png "在这里输入图片标题") 点击选择 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145609_rRuI.png "在这里输入图片标题") 选择后: ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145636_gAtJ.png "在这里输入图片标题") 控件名称:控件的名称 控件样式:设置控件宽高 数据源:表单控件展示数据的数据源 字段:展示数据的数据源字段 Popup报表:online报表编码 校验规则:列字段在添加、编辑模式下的校验规则 校验必填:必填校验有效,勾选后该文本框必须录入,录入时进行校验 值ID:popup弹出框选择后填充到控件的字段 值文本:暂时没有使用 ### 8.Button按钮控件 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145720_Lpmi.png "在这里输入图片标题") 页面效果: ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145739_13UW.png "在这里输入图片标题") 控件标题:按钮显示的名称 控件名称:生成的按钮name、id属性的值,可以通过该属性绑定按钮事件 (js增增强,jquery给其绑定事件) 控件样式:按钮的样式控制 ### 9.控件校验规则 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145828_h3r0.png "在这里输入图片标题") (1)表单校验规则使用validform表单验证插件 验证规则参照validform datatype 规则的使用 (2)该校验规则下拉框内容再数据字典中维护,若要增加自定义的规则,则需要在数据字典中添加 ![输入图片说明](https://static.oschina.net/uploads/img/201804/24145904_bIgQ.png "在这里输入图片标题")