代码拉取完成,页面将自动刷新
同步操作将从 谁家没一个小强/ayq-layui-form-designer 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
基于layui的表单设计器
希望有bug及时给我反馈,我会根据问题进行完善,也希望小伙伴也可以加入进来一起完善,一起开发。
var render = formDesigner.render({
data:[],
elem:'#formdesigner'
});
//重新渲染数据
render.reload(options)
//获取相关配置信息
render.getOptions()
{
"version": "1.0.0",
"formName": "表单示例",
"formId": "id",
"generateId": 1,
"data": [
{
"id": "input_1",
"index": 0,
"label": "单行文本",
"tag": "input",
"tagIcon": "input",
"placeholder": "请输入",
"defaultValue": null,
"labelWidth": null,
"width": "100%",
"clearable": true,
"maxlength": null,
"showWordLimit": false,
"readonly": false,
"disabled": false,
"required": true,
"expression": "",
"document": ""
}
],
"dataSource": {},
"htmlCode": {
"css": "",
"html": "",
"script": ""
},
"elem": {
"0": {},
"length": 1,
"context": {
"location": {
"ancestorOrigins": {},
"href": "http://localhost:8083/activitiManager/getFormDesigner/1402562618899579000?authorization=178aa01f-32b9-450e-96a4-e6e531dcef36%231",
"origin": "http://localhost:8083",
"protocol": "http:",
"host": "localhost:8083",
"hostname": "localhost",
"port": "8083",
"pathname": "/activitiManager/getFormDesigner/1402562618899579000",
"search": "?authorization=178aa01f-32b9-450e-96a4-e6e531dcef36%231",
"hash": ""
},
"jQuery112305065006406520325": 1
},
"selector": "#formdesigner"
},
"id": "formdesigner",
"selectItem": {
"id": "input_1",
"index": 0,
"label": "单行文本",
"tag": "input",
"tagIcon": "input",
"placeholder": "请输入",
"defaultValue": null,
"labelWidth": null,
"width": "100%",
"clearable": true,
"maxlength": null,
"showWordLimit": false,
"readonly": false,
"disabled": false,
"required": true,
"expression": "",
"document": ""
}
}
//获取表单数据
render.getData()
[
{
"id": "input_1",
"index": 0,
"label": "单行文本",
"tag": "input",
"tagIcon": "input",
"placeholder": "请输入",
"defaultValue": null,
"labelWidth": null,
"width": "100%",
"clearable": true,
"maxlength": null,
"showWordLimit": false,
"readonly": false,
"disabled": false,
"required": true,
"expression": "",
"document": ""
}
]
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
elem | String | 指定原始 table 容器的选择器,方法渲染方式必填 | "#elem" |
data | Array | 直接赋值数据 | [{},{},...] |
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
id | String | 指定组件标识(唯一),表单提交字段name值 | "field" |
label | String | 文本框标题 | "姓名" |
tag | String | 表单类型 | "input" |
placeholder | String | placeholder | "请输入" |
defaultValue | object | 组件默认值 | "姓名" |
width | String | 组件宽度 | "100%" |
labelWidth | String | 文本框宽度 | "250px" |
readonly | Boolean | 只读 | true,false |
disabled | Boolean | 禁用 | true,false |
required | Boolean | 必填 | true,false |
columns | number | 栅格布局列数 | true,false |
maxValue | object | 最大值 | "" |
minValue | object | 最小值 | "" |
expression | String | 验证 | "email" |
stepValue | number | 滑块步长 | 2 |
isInput | Boolean | 滑块显示输入框 | true,false |
datetype | String | 日期类型 | "时间选择器" |
dateformat | String | 日期格式 | "yyyy-MM-dd" |
rateLength | number | 星星个数 | 5 |
interval | number | 轮播间隔毫秒 | 3000 |
autoplay | Boolean | 轮播自动切换 | true,false |
anim | object | 切换方式 | {text: '左右切换', value: 'default'} |
arrow | object | 切换箭头 | {text: '悬停显示', value: 'hover'} |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。