表单设计器

 查看演示  website  立即下载

更新时间：2023-06-28 12:08:48

更新说明：

1. $.formDesign.build()配置补充type类型（preview->预览模式|design->设计模式）

2. 补充预览调用demo

3. 调整插件核心代码结构

更新时间：2023-06-12 00:06:13

更新说明：解决表单预览时，获取表单值为空的问题

更新时间：2023-5-29 13:27:27

概述：基于boostrap布局的表单设计器，全局实例为formDesign 初始化：

formDesign.build(opt);

• opt为配置参数    

• el：为引用页面待渲染的容器  

• height：容器高度   

• type:渲染类型（design->设计模式|preview:预览模式）   

• saveForm:回调函数，保存设计的表单数据按钮的回调   

• data：回显表单的数据，不需要回显可为空   

• data.config:表单全局配置   

• data.topics:表单具体子项配置 

eg: {
    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"
        }]
    }
}

PREVIOUS:
NEXT:
jQuery车牌号选择（包含新能源）
开关插件NZSwitcher(原创)