{"version":"1.0.0","formName":"表单示例","Author":"快码编程UI设计器","formId":"formPreviewForm","generateId":2,"data":[{"id":"textBox_1","index":0,"tag":"textBox","tagIcon":"layui-icon layui-icon-picture","title":"文本框","width":"100","height":"30","margin":"","padding":"","transformRotate":"0","writingMode":"","left":7,"top":9,"zIndex":1,"TextValue":"文本框","TextSize":"15","fontFamily":"微软雅黑","textBoxDataType":"普通文本框","HorizontalAlignment":"center","VerticalAlignment":"center","BorderLineStyle":"","BorderLineSize":"1","BorderLineColor":"#000000","BackgroundValue":"","ColorValue":"#000","grid":false},{"id":"textBox_2","index":1,"tag":"textBox","tagIcon":"layui-icon layui-icon-picture","title":"文本框","width":"100","height":30,"margin":"","padding":"","transformRotate":"0","writingMode":"","left":5,"top":39,"zIndex":2,"TextValue":"文本框","TextSize":"15","fontFamily":"微软雅黑","textBoxDataType":"普通文本框","HorizontalAlignment":"center","VerticalAlignment":"center","BorderLineStyle":"","BorderLineSize":"1","BorderLineColor":"#000000","BackgroundValue":"","ColorValue":"#000","grid":false}],"optionsArray":[{"id":"textBox_1","index":0,"tag":"textBox","tagIcon":"layui-icon layui-icon-picture","title":"文本框","width":"100","height":"30","margin":"","padding":"","transformRotate":"0","writingMode":"","left":7,"top":9,"zIndex":1,"TextValue":"文本框","TextSize":"15","fontFamily":"微软雅黑","textBoxDataType":"普通文本框","HorizontalAlignment":"center","VerticalAlignment":"center","BorderLineStyle":"","BorderLineSize":"1","BorderLineColor":"#000000","BackgroundValue":"","ColorValue":"#000","grid":false},{"id":"textBox_2","index":1,"tag":"textBox","tagIcon":"layui-icon layui-icon-picture","title":"文本框","width":"100","height":30,"margin":"","padding":"","transformRotate":"0","writingMode":"","left":5,"top":39,"zIndex":2,"TextValue":"文本框","TextSize":"15","fontFamily":"微软雅黑","textBoxDataType":"普通文本框","HorizontalAlignment":"center","VerticalAlignment":"center","BorderLineStyle":"","BorderLineSize":"1","BorderLineColor":"#000000","BackgroundValue":"","ColorValue":"#000","grid":false}],"dataSource":{},"formData":{},"globalDisable":false,"viewOrDesign":true,"formDefaultButton":true,"formProperty":{},"selectItems":[],"model":"H5","page":{"id":""},"elem":{"0":{"sizzle1710385668888":{"undefined":{"parentNode":[5605,35,false]}}},"length":1},"id":"formdesigner","size":["100%","100%"],"selectItem":{"id":"textBox_2","index":1,"tag":"textBox","tagIcon":"layui-icon layui-icon-picture","title":"文本框","width":"100","height":30,"margin":"","padding":"","transformRotate":"0","writingMode":"","left":5,"top":39,"zIndex":2,"TextValue":"文本框","TextSize":"15","fontFamily":"微软雅黑","textBoxDataType":"普通文本框","HorizontalAlignment":"center","VerticalAlignment":"center","BorderLineStyle":"","BorderLineSize":"1","BorderLineColor":"#000000","BackgroundValue":"","ColorValue":"#000","grid":false}}

首先上面设计了一个最简单的布局：

然后使用代码加载到页面，并动态添加一些组件：

<!文档类型 网页类型>
<网页 语言代码="中文">
    <网页头部>
        <网页信息 文档编码="UTF8" />
        <网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度,初始缩放值=1,最大缩放值=1,用户缩放状态=假" />
        <网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本" />
        <网页标题>Document</网页标题>
    </网页头部>
    <网页主体>
        <按钮 按钮类型="普通按钮" id="测试按钮iD2" 行内样式="显示模式: 无效;" 类名="lay-按钮">测试按钮2</按钮>
        <脚本>
            设计器类.初始化页面()
            //这里执行相关的JS代码
            设计器类.加载布局文件({
                "布局地址": "@文件_17103856963591491.js",
                "加载方式": 1,
                "布局名称": "测试布局",
                "加载回调": (加载状态) => {
                    调试输出(加载状态);
                    //这一一般加载完毕,想要动态添加元素 使用JQ即可
                    局部变量 行内元素 = `<行内元素 id="测试文本框" 类名="测试文本框">我是一段文本</行内元素>`
                    局部变量 测试按钮 = `<按钮 按钮类型="普通按钮" id="测试按钮iD" 类名="lay-按钮">一个标准的按钮</按钮>`
                    $("#formPreviewForm").元素内向后添加内容(行内元素)
                    $("#formPreviewForm").元素内向后添加内容(测试按钮)
                    //上面是第一种方式
                    //下面是第二种方式,提前写好HTML,然后进行添加
                    局部变量 按钮代码 = $("#测试按钮iD2")[0]["outerHTML"];
                    调试输出(按钮代码)
                    按钮代码 = 按钮代码.替换("测试按钮iD2","测试按钮iD3")
                    $("#formPreviewForm").元素内向后添加内容(按钮代码)
                    $("#测试按钮iD3").显示标签()
                }
            });
        </脚本>
        <样式>
            .测试文本框{
                显示模式: 内联块元素;
                上边距: 100px;
            }
        </样式>
    </网页主体>
</网页>

完整实例：

动态添加元素实例.zip

里面的"#formPreviewForm" 这个ID是布局器父盒子的ID