表单设计器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单设计器</title>
<link rel="stylesheet" href="https://www.jq22.com/demo/form-design202306120010/js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.jq22.com/demo/form-design202306120010/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://www.jq22.com/demo/form-design202306120010/css/index.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/demo/form-design202306120010/js/bootstrap/js/bootstrap.min.js"></script>
<script src="https://www.jq22.com/demo/form-design202306120010/js/index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
$.formDesign.build({ el: '#app', height: '600px',type:"design",
saveForm:function (data){
//保存按钮回调
alert(JSON.stringify(data))
},
"data":{
"config": {
"align": 0,
"rand": 0
},
"topics": [
{
"type": "radio",
"name": "选择",
"options": [
{
"label": "选项1",
"value": 0
},
{
"label": "选项1",
"value": 1
}
],
"required": 0,
"rand": 0,
"id": 1,
"uuid": "xsxsxx"
},
{
"type": "multiple",
"name": "多行文本框",
"placeholder": "",
"height": 80,
"required": 0,
"id": 0,
"uuid": "multiple_1685337313869"
},
{
"type": "radio",
"name": "单选框",
"options": [
{
"label": "选项1",
"value": 0
},
{
"label": "选项1",
"value": 1
}
],
"required": 0,
"rand": 0,
"id": 0,
"uuid": "radio_1685337316044"
},
{
"type": "date",
"name": "时间框",
"required": 0,
"id": 0,
"uuid": "date_1685337317396"
},
{
"type": "checkbox",
"name": "多选框",
"options": [
{
"label": "选项1",
"value": 0
},
{
"label": "选项1",
"value": 1
}
],
"required": 0,
"rand": 0,
"id": 0,
"uuid": "checkbox_1685337319148"
},
{
"type": "select",
"name": "下拉选择框",
"options": [
{
"label": "选项1",
"value": 0
},
{
"label": "选项1",
"value": 1
}
],
"required": 0,
"id": 0,
"uuid": "select_1685337320541"
}
]
}
})
</script>
</html>
页:
[1]