自定义表单
自定义表单顾名思义就是由用户定义表单,由用户觉定标签和组件,决定要填写什么格式的数据。
创建表单
方式一
创建组件
http://localhost:8080/form/configurers
[{
"label": "姓名",
"cpnType": "TEXT",
"validators": [{
"min": 0,
"max": 16,
"message": "长度范围 0 - 16 个字符",
"validatorType": "LENGTH"
}, {
"required": true,
"message": "必填项",
"validatorType": "REQUIRED"
}],
"defaultValue": "Rick",
"placeholder": "请输入姓名"
}, {
"label": "年龄",
"cpnType": "NUMBER_TEXT",
"validators": [{
"min": 18,
"max": 100,
"message": "大小范围是18 - 100",
"validatorType": "SIZE"
}, {
"required": true,
"message": "必填项",
"validatorType": "REQUIRED"
}],
"defaultValue": "18",
"placeholder": "请输入年龄"
}, {
"label": "兴趣爱好(单选)",
"cpnType": "SELECT",
"validators": [{
"required": true,
"message": "必填项",
"validatorType": "REQUIRED"
}],
"options": ["足球", "篮球", "乒乓球", "羽毛球"],
"defaultValue": "足球",
"placeholder": "请输入兴趣爱好"
}, {
"label": "信息收集",
"cpnType": "TABLE",
"validators": [],
"placeholder": "请输入信息收集",
"additionalInfo": {
"labels": ["姓名", "年龄"]
}
}, {
"label": "兴趣爱好(多选)",
"cpnType": "CHECKBOX",
"validators": [],
"options": ["足球", "篮球", "乒乓球", "羽毛球"],
"defaultValue": "[\"足球\", \"篮球\"]",
"placeholder": "请输入兴趣爱好"
}]
创建表单
http://localhost:8080/form/configurers
{
"name": "人员信息登记表"
}
表单关联组件
http://localhost:8080/forms/488683635382583296/configs
["488675379486556160","488675379490750464","488675379490750465","488675379490750466","488675379494944768"]
方式二
创建表单和组件并关联
{
"form": {
"name": "我的第N个表单"
},
"configs": [{
"label": "姓名",
"cpnType": "TEXT",
"validators": [{
"min": 0,
"max": 16,
"message": "长度范围 0 - 16 个字符",
"validatorType": "LENGTH"
}, {
"required": true,
"message": "必填项",
"validatorType": "REQUIRED"
}],
"defaultValue": "Rick",
"placeholder": "请输入姓名"
}, {
"label": "年龄",
"cpnType": "NUMBER_TEXT",
"validators": [{
"min": 18,
"max": 100,
"message": "大小范围是18 - 100",
"validatorType": "SIZE"
}, {
"required": true,
"message": "必填项",
"validatorType": "REQUIRED"
}],
"defaultValue": "18",
"placeholder": "请输入年龄"
}, {
"label": "兴趣爱好(单选)",
"cpnType": "SELECT",
"validators": [{
"required": true,
"message": "必填项",
"validatorType": "REQUIRED"
}],
"options": ["足球", "篮球", "乒乓球", "羽毛球"],
"defaultValue": "足球",
"placeholder": "请输入兴趣爱好"
}, {
"label": "信息收集",
"cpnType": "TABLE",
"validators": [],
"placeholder": "请输入信息收集",
"additionalInfo": {
"labels": ["姓名", "年龄"]
}
}, {
"label": "兴趣爱好(多选)",
"cpnType": "CHECKBOX",
"validators": [],
"options": ["足球", "篮球", "乒乓球", "羽毛球"],
"defaultValue": "[\"足球\", \"篮球\"]",
"placeholder": "请输入兴趣爱好"
}]
}
查看表单
http://localhost:8080/forms/ajax/488686638231617536
{
"form": {
"id": "488686638231617536",
"name": "我的第N个表单"
},
"instanceId": null,
"propertyList": [
{
"id": 488686640483958784,
"name": "ZghRwhvcGu",
"configurer": {
"id": "488686639036923904",
"label": "姓名",
"cpnType": "TEXT",
"validators": [
{
"min": 0,
"max": 16,
"message": "长度范围 0 - 16 个字符",
"validatorType": "LENGTH"
},
{
"required": true,
"message": "必填项",
"validatorType": "REQUIRED"
}
],
"options": null,
"defaultValue": "Rick",
"placeholder": "请输入姓名",
"additionalInfo": null
},
"value": "Rick",
"validatorProperies": {
"Required.required": true,
"Length.min": 0,
"Length.max": 16
}
},
{
"id": 488686640483958785,
"name": "VnmnWkziwe",
"configurer": {
"id": "488686639036923905",
"label": "年龄",
"cpnType": "NUMBER_TEXT",
"validators": [
{
"min": 18,
"max": 100,
"message": "大小范围是18 - 100",
"validatorType": "SIZE"
},
{
"required": true,
"message": "必填项",
"validatorType": "REQUIRED"
}
],
"options": null,
"defaultValue": "18",
"placeholder": "请输入年龄",
"additionalInfo": null
},
"value": 18,
"validatorProperies": {
"Size.min": 18,
"Size.max": 100,
"Required.required": true
}
},
{
"id": 488686640488153088,
"name": "WIRyhGtAhh",
"configurer": {
"id": "488686639036923906",
"label": "兴趣爱好(单选)",
"cpnType": "SELECT",
"validators": [
{
"required": true,
"message": "必填项",
"validatorType": "REQUIRED"
}
],
"options": [
"足球",
"篮球",
"乒乓球",
"羽毛球"
],
"defaultValue": "足球",
"placeholder": "请输入兴趣爱好",
"additionalInfo": null
},
"value": "足球",
"validatorProperies": {
"Required.required": true
}
},
{
"id": 488686640488153089,
"name": "EsaBSGeoNF",
"configurer": {
"id": "488686639041118208",
"label": "信息收集",
"cpnType": "TABLE",
"validators": [],
"options": null,
"defaultValue": null,
"placeholder": "请输入信息收集",
"additionalInfo": {
"labels": [
"姓名",
"年龄"
]
}
},
"value": null,
"validatorProperies": {}
},
{
"id": 488686640488153090,
"name": "dCrOsUvnkb",
"configurer": {
"id": "488686639041118209",
"label": "兴趣爱好(多选)",
"cpnType": "CHECKBOX",
"validators": [],
"options": [
"足球",
"篮球",
"乒乓球",
"羽毛球"
],
"defaultValue": "[\"足球\", \"篮球\"]",
"placeholder": "请输入兴趣爱好",
"additionalInfo": null
},
"value": [
"足球",
"篮球"
],
"validatorProperies": {}
}
],
"method": "POST",
"actionUrl": "488686638231617536"
}
填写表单数据
我的模版是是基于 thymeleaf
jQuery
Bootstrap
实现的。
浏览器访问:http://localhost:8080/forms/page/488686638231617536
数据填写完成后,会生实例id
实例id查看实例数据
488693516797902848 就是实例id
http://localhost:8080/forms/page/488686638231617536/488693516797902848