基于Layui表单自定义的页面初始化问题

在前两篇笔记中波波记录了基于Layui自定义表单的实现，但是页面自定义表单的数据如何保存，以及在保存自定义表单数据后，如何在第二次打开页面时还原自定义的表单？

这里波波的思路是，自定义表单的数据采用JSON的格式保存成一条数据。页面在重新载入时根据保存的JSON数据还原表单。

首先我们在页面保存数据的JS代码片段：

  1. //点击save按钮时将自定义表单区域的值保存到extra中
  2.         $("#sav").on('click',function () {
  3.             var ext = {};
  4.             var i = 0;
  5.             $("#extra_attr").find("input[class='layui-input']").each(function () {
  6.                 var d = {};
  7.                 d['title'] = $(this).parent().parent().find("label").text();
  8.                 d['type'] = $(this).attr('cate');
  9.                 d['name'] = $(this).attr('name');
  10.                 d['value'] = $(this).val();
  11.                 ext[i] = d;
  12.                 i++;
  13.             })
  14.             $("#extra").val(JSON.stringify(ext));
  15.         });

保存数据示例如下。

  1. //{"0":{"title":"字段1","type":"numbers","name":"eng","value":"0.01"},"1":{"title":"字段2","type":"text","name":"dict","value":"ee"}}

在还原表单时，我们会根据上述JSON创建Form表单的HTML代码。

  1. //初始化页面，自动创建自定义属性的表单
  2.         $(document).ready(function () {
  3.             createElementByJson("extra_attr",$("#extra").val());
  4.         });

下面代码是根据Json创建Form表单的核心代码。大家可以复制后保存成单独的JS文件。

  1. /*
  2. *根据Json创建Form表单
  3. * i:元素ID;s:Json数据
  4. * 页面需加载Jquery库
  5. * Created By BoBo 2021
  6.  */
  8. function createElementByJson(i,s) {
  9.     console.log("初始化表单开始...");
  10.     if('' == s){
  11.         console.log('Json字符不能为空');
  12.     }
  13.     var tpl='';
  14.     $.each(JSON.parse(s),function (index,data) {
  15.         tpl += getFormTpl(data.type,data.title,data.name,data.value);
  16.     })
  17.     //return data;
  18.     $(tpl).hide().appendTo($('#'+i)).fadeIn('slow');
  19.     //如果页面注册有Form组件，否则必须注释掉；
  20.     window.form.render();
  21. }
  23. //获取Form模板
  24. function getFormTpl(type,input_title,input_name,input_val=''){
  25.     var data = '';
  26.     var tpl = "$(this).prev('img').attr('src', this.value)";
  27.     var tpl_del = '<div class="layui-form-mid layui-word-aux">\n' +
  28.         '            <button type="button" class="layui-btn layui-btn-primary layui-btn-xs delete"><i class="fa fa-close"></i></button>\n' +
  29.         '        </div>';
  30.     var tpl_img = '<div class="layui-form-item">\n' +
  31.         '        <label class="layui-form-label">'+ input_title +'</label>\n' +
  32.         '        <div class="layui-input-block">\n' +
  33.         '            <div class="layui-input-inline">\n'+
  34.         '                <img data-tips-image style="height:auto;max-height:100px;min-width:100px" src="/static/theme/default/img/image.png"/>\n' +
  35.         '                <input type="hidden" name="' + input_name + '"  onchange="'+ tpl +'"\n' +
  36.         '                   value="'+ input_val +'" class="layui-input" cate="images">\n' +
  37.         '                <button class="layui-btn layui-btn-sm" data-file="one" data-type="jpg,png,gif" data-field="' + input_name + '" type="button">上传</button>\n' +
  38.         '            </div>\n'+
  39.         '        </div>\n' +tpl_del+
  40.         '    </div>';
  41.     var tpl_file = '<div class="layui-form-item">\n' +
  42.         '        <label class="layui-form-label">'+ input_title +'</label>\n' +
  43.         '        <div class="layui-input-block" style="min-height: 0px">\n' +
  44.         '            <div class="layui-input-inline" style="width: 300px">\n' +
  45.         '                <input class="layui-input" name="' + input_name + '" placeholder="请上传附件..." value="'+ input_val +'" cate="files">\n' +
  46.         '            </div>\n' +
  47.         '            <div class="layui-input-inline">\n' +
  48.         '                <button type="button" class="layui-btn layui-btn-small layui-btn-radius" data-file="one" data-type="doc,ppt,txt,docx,pptx,zip" data-uptype="local" data-field="' + input_name + '">\n' +
  49.         '                    <i class="fa fa-cloud-upload"></i>上传\n' +
  50.         '                </button>\n' +
  51.         '            </div>\n' +
  52.         '        </div>\n' +tpl_del+
  53.         '    </div>';
  54.     var tpl_text = '<div class="layui-form-item">\n' +
  55.         '        <label class="layui-form-label">'+input_title+'</label>\n' +
  56.         '        <div class="layui-input-inline">\n' +
  57.         '            <input name="'+input_name+'" value="'+ input_val +'"  class="layui-input" title="请输入中文或英文字母" pattern="^[u4E00-u9FA5A-Za-z0-9_]+$" cate="text">\n' +
  58.         '        </div>\n' +tpl_del+
  59.         '    </div>';
  60.     var tpl_numandmoney = '<div class="layui-form-item">\n' +
  61.         '        <label class="layui-form-label">'+input_title+'</label>\n' +
  62.         '        <div class="layui-input-inline">\n' +
  63.         '            <input name="'+input_name+'" type="text" value="'+ input_val +'"  class="layui-input" title="请输入数字" pattern="(^[1-9]([0-9]+)?(\\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\\.[0-9]([0-9])?$)" cate="numbers">\n' +
  64.         '        </div>\n' +tpl_del+
  65.         '    </div>';
  66.     var tpl_datetime = '<div class="layui-form-item">\n' +
  67.         '        <label class="layui-form-label">'+input_title+'</label>\n' +
  68.         '        <div class="layui-input-inline">\n' +
  69.         '            <input name="'+input_name+'" type="datetime" value="'+ input_val +'"  class="layui-input" title="格式：2021-02-02 15:30:00" pattern="^[1-9]\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\\s+(20|21|22|23|[0-1]\\d):[0-5]\\d:[0-5]\\d$" cate="datetimes">\n' +
  70.         '        </div>\n' +tpl_del+
  71.         '    </div>';
  72.     switch (type) {
  73.         case "images":
  74.             data = tpl_img;
  75.             break;
  76.         case "files":
  77.             data = tpl_file;
  78.             break;
  79.         case "moneys":
  80.             data = tpl_numandmoney;
  81.             break;
  82.         case "numbers":
  83.             data = tpl_numandmoney;
  84.             break;
  85.         case "datetimes":
  86.             data = tpl_datetime;
  87.             break;
  88.         default:
  89.             data = tpl_text;
  90.             break;
  91.     }
  92.     return data;
  93. }

关于Layui自定义表单的实现一共三篇笔记，分别解决自定义Form表单的一些细节问题。到这里Form表单的自定义DIY功能就全部结束了。记录下笔记，下次就不再造重复的轮子。

至于后端只需要在数据库表上增加一个字段，类型设置为“text”来保存JSON数据即可。

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！