ayq-layui-form-designer
/
preview.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="./layui/css/layui.css" />
  <link rel="stylesheet" href="./ayq/modules/formDesigner.css" />
  <link rel="stylesheet" href="./ayq/modules/cron/cron.css" />
  <link rel="stylesheet" href="./ayq/modules/labelGeneration/labelGeneration.css" />
  <style>
    /* 图片上传 */
    .uploader-list {
      margin-left: -15px;
    }
    .uploader-list .info {
      position: relative;
      margin-top: -25px;
      background-color: black;
      color: white;
      filter: alpha(Opacity=80);
      -moz-opacity: 0.5;
      opacity: 0.5;
      width: 100px;
      height: 25px;
      text-align: center;
      display: none;
    }
    .uploader-list .handle {
      position: relative;
      background-color: black;
      color: white;
      filter: alpha(Opacity=80);
      -moz-opacity: 0.5;
      opacity: 0.5;
      width: 100px;
      text-align: right;
      height: 18px;
      margin-bottom: -18px;
      display: none;
    }
    .uploader-list .handle i {
      margin-right: 5px;
    }
    .uploader-list .handle i:hover {
      cursor: pointer;
    }
    .uploader-list .file-iteme {
      margin: 12px 0 0 15px;
      padding: 1px;
      float: left;
    }
  </style>
</head>

<body >
  <div >
    <div  id="testdemo" style="margin: 20px 20px;padding: 20px 20px;border: 1px solid #009688;">

    </div>
  </div>
  <script type="text/javascript" src="./layui/layui.js"></script>
  <script type="text/javascript" src="./ayq/modules/Sortable/Sortable.js"> </script>
  <script type="text/javascript" src="./ayq/modules/numberInput/numberInput.js"></script>
  <script type="text/javascript" src="./ayq/modules/icon/iconPicker.js"></script>
  <script type="text/javascript" src="./ayq/modules/cron/cron.js"></script>
  <script type="text/javascript" src="./ayq/modules/iceEditor/iceEditor.js"></script>
  <script type="text/javascript" src="./ayq/modules/labelGeneration/labelGeneration.js"></script>
  <script type="text/javascript" src="./ayq/js/config.js?v=100"></script>

  <script>
    var demojs = [];
    //JavaScript代码区域
    layui.config(
		{base: './ayq/modules/'}).use(['formPreview', 'form','layer'], function () {
      var layer = layui.layer;
      var $ = layui.jquery;
      var index = layui.index;
      var formPreview = layui.formPreview;
      var form = layui.form;
      var render;
      if (window.localStorage.getItem('layui_form_json') !== undefined) {
        demojs = JSON.parse(window.localStorage.getItem('layui_form_json'));
        render = formPreview.render({
          elem: '#testdemo',
          data: demojs
        });
      }
      //监听提交
      form.on('submit(demo1)', function(data){
        var iceEditorObjects = render.geticeEditorObjects();
        var json = data.field;
        for(let key  in iceEditorObjects){
          json[key] = iceEditorObjects[key].getHTML();
        }
        layer.msg( JSON.stringify(json), {icon: 6});
        /*$.ajax({
          url:"/activiti-manager/addActivitiManagera",
          type:"POST",
          data:temp,
          contentType:"application/json",
          dataType: "json",
          success:function(res){
            alert(res.message);
          }
        });*/
        return false;
      });
    });


    function getSubmitData(){
        var data=$('#testdemo').form[0].serialize();
        console.log(data);
        return data;
      }

  </script>
</body>

</html>