1.需求：使用层在弹窗内完成新增，成功后提示并刷新页面（父页面，列表页面)

2.实现

a*页面效果图

b*页面代码

-构建从表单

div id=' add-main ' style=' display : none；'form class=' layui-form ' id=' add-form ' action=' div class=' layui-form-item center ' label class=' layui-form-label ' style=' width : 100px '配置名称/label div class=' layui-input-block ' input type=' text ' name=' name '必需值=' style=' width : 240 px ' lay-verify='必需'占位符='请输入配置名称自动完成=' off ' class=' layui-input '/div/div class=' layui-form-item ' label class=' layui-form-label ' style=' width : 100px '配置类型/label div class=' layui-input-block ' input type=' text ' name=' type ' required style=' width : 240 px ' lay-verify=' required ' placeholder='请输入配置类型自动完成=' off ' class=' layui-input '/div/div class=' layui-form-item ' label class=' layui-form-label ' style=' width : 100px '配置值/label div class=' layui-input-block '输入类型='text '名称='value '必需样式='width: 240px' lay-verify='必需'占位符='请输入配置值自动完成='关闭'类='layui-input '！ -输入类型='隐藏'名称='id '样式='width: 240px '自动完成='关闭'类='layui-input' - /div /div类='layui-form-item' div类=' layui-输入块'按钮类=' layui-BTN ' lay-submit lay-filter=' save '立即提交/button button type=' reset ' class=' layui-BTN layui-BTN-primary ' id=' closeBtn '重置/button /div /div /form /divc*js代码

-创建层弹窗

函数onAddBtn(){ //页面层-自定义layer.open({ type: 1，title: '新建配置，closeBtn: false，shift: 2，area: ['400px '，' 300px']，shadeClose: true，//btn: ['新增', '取消]，//btnAlign: 'c '，content: $('#add-main ')，success:函数(layero，index){}，yes :函数(){ })；}-核心提交方法

脚本类型=' text/JavaScript ' layui。使用([' layer '，' form']，function(){ var layer=layui。layer，$=layui.jquery，form=layui.form//表单验证form.verify({ firstpwd: [/(.){6,12}$/, '密码必须6到12位]，secondpwd:函数（值){ if(值！=$('#firstpwd ').val()){ $(“# second pwd”).val(" ")；"返回"确认密码与密码不一致；} }，productCodes:函数（值){ if(值==''){ return '请选择系统分配；} }，sysqx:函数（值){ if(值==''){ return '请选择权限；} } });//提交监听事件form.on('submit(save)')，function(data){ params=data。字段；//alert(JSON)。stringify(params))submit($，params)；返回false})var obj=document。getelementbyid(' closeBtn ')；obj.addEventListener('click ')，函数cancel(){ CloseWin()；});})//提交函数提交($，参数){ $ .post('${ctx}/golbal/add1 '，params，function(RES){ if(RES . status==1){ layer。msg(RES . message，{icon:1}，函数(index){ CloseWin()；})} else if(RES . status==2){ layer。msg(RES . message，{icon:0}，function(){ parent。位置。href=' $ { CTX }/gol bal/main '；CloseWin()；}) }else{ layer.msg(res.message，{icon:0}，function(){ location。重载()；//页面刷新返回false }) }，' JSON ')；}调试器；//关闭页面函数CloseWin(){父级。位置。重载()；//父页面刷新var索引=父级。层。getframeindex(窗口。姓名)；//先得到当前内联框架层的索引parent.layer.close(索引);//再执行关闭} /scriptd*后台代码

-

/** * 新增配置* @ return */@请求映射('/add 1 ')@响应体公共结果实体addItem(ZkGolbal gol bl){ result entity RES=new result entity()；请尝试{高尔巴尔。SetStatus(' 1 ')；RES . setdata(golbalServiCe。additem(gol bal))；RES . set success(' success ')；res.setMessage('新增成功');} catch(异常e) { res.setMessage('操作失败');e . print stack trace()；}返回res}总结

以上所述是小编给大家介绍的使用层弹窗和获得表单做新增功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！