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

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

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

波波
你想把广告放到这里吗?

发表评论

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