欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Javascript json动态生成表单

程序员文章站 2024-03-12 20:10:32
...

JSON.stringify(mock,null,4).toString()格式化json格式在页面输出，这个form-create是一个开源框架
/*! form-create v1.3 | github https://github.com/xaboy/form-create | author xaboy */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form-create-preview示例</title>

    <link href="../../../static/iview/styles/iview.css" rel="stylesheet">
    <script src="../../../static/vue/vue.min.js"></script>
    <script src="../../../static/iview/iview.min.js"></script>

    <!--省市区三级联动json数据-->
    <script src="./form-create.min.js"></script>
    <style>
        .container{
            width: 1300px;
            overflow: hidden;
            margin: 0 auto;
        }
        .jsonBox,.formCreate{
            overflow: auto;
            width:100%;
            resize: none;
            margin-top: 20px;
            height:600px;
            border:1px solid #666;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        button{
            width: 100%;
            height: 40px;
            line-height: 40px;
            border:none;
            font-size: 16px;
            outline:none;
            color: #fff;
            cursor: pointer;
            background:#2d8cf0;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="fl" style="width:50%">
            <textarea class="jsonBox" id="jsonBox" v-model="model"></textarea>
        </div>
        <div class="formCreate fr" id="formCreate" style="width:50%"></div>
        <button @click="markHtml">生成html</button>
    </div>
</div>
<script>
    // 定义模板
    let mock = [
        {
            type:"input",
            title:"商品名称",//label名称
            field:"goods_name1",//字段名称
            props: {
                "type": "text", //输入框类型，可选值为 text、password、textarea、url、email、date
                "clearable":false, //是否显示清空按钮
                "disabled": false, //设置输入框为禁用状态
                "readonly": false, //设置输入框为只读
                "rows": 4, //文本域默认行数，仅在 textarea 类型下有效
                "autosize": false, //自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }
                "number": false, //将用户的输入转换为 Number 类型
                "autofocus": false, //自动获取焦点
                "autocomplete": "off", //原生的自动完成功能，可选值为 off 和 on
                "placeholder": "请输入商品名称", //占位文本
                "size": "default", //输入框尺寸，可选值为large、small、default或者不设置,
                "spellcheck": false, //原生的 spellcheck 属性
                "required":false,
            }
        },
        {
            type:"input",
            title:"商品名称",//label名称
            field:"goods_name2",//字段名称
            props: {
                "type": "text", //输入框类型，可选值为 text、password、textarea、url、email、date
                "clearable":false, //是否显示清空按钮
                "disabled": false, //设置输入框为禁用状态
                "readonly": false, //设置输入框为只读
                "rows": 4, //文本域默认行数，仅在 textarea 类型下有效
                "autosize": false, //自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }
                "number": false, //将用户的输入转换为 Number 类型
                "autofocus": false, //自动获取焦点
                "autocomplete": "off", //原生的自动完成功能，可选值为 off 和 on
                "placeholder": "请输入商品名称", //占位文本
                "size": "default", //输入框尺寸，可选值为large、small、default或者不设置,
                "spellcheck": false, //原生的 spellcheck 属性
                "required":false,
            }
        }
    ];
    //定义模板数据
    let mockData = [
        {
            field:'goods_name1',
            newField:'goods_name01',
            value:'商品01'
        },
        {
            field:'goods_name2',
            newField:'goods_name02',
            value:'商品02'
        },
        {
            field:'goods_name3',
            newField:'goods_name03',
            value:'商品03'
        }
    ]
    vm = new Vue({
        el:'#app',
        cus:'foo',
        data:{
            model:JSON.stringify(mock,null,4).toString()
        },
        methods:{
            markHtml(){
                this.model = this.model?this.model:this.mocks;
                if(!this.model){
                    return alert('请输入要生成的json数据')
                }
                model = JSON.parse(this.model);
                window.formData = {};
                let root = document.getElementById('formCreate');
                $f = this.$formCreate(model,{
                    el:root,
                    submitBtn:false
                });
                $f.model(formData);
                console.log(formData,'formData')
                mock.forEach(items=>{
                    mockData.forEach(item=>{
                        if(items.field==item.field){
                            console.log(item)
                            $f.set(formData[item.field],'value',item.value);
                        }
                    })
                })
            },
        }
    });
</script>
</body>
</html>

因为项目是基于iview的ui框架，可能应用场景会受限，因为现在都流行elementui，但细心的你会发现iview的视觉效果更舒服更协调，用到后台系统是不错的选择，实现可视化界面

相关标签： iview

上一篇： 去掉iview对话框modal中的确认和取消按钮

下一篇： 猴子排序(Bogo Sort)算法的Java实现

推荐阅读