1.需求:使用layer在弹窗内完成新增,成功后提示并刷新页面(父页面,list页面)
2.实现
a* 页面效果图
b*页面代码
--构建from表单
<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" required value="" style="width: 240px" lay-verify="required" placeholder="请输入配置名称" autocomplete="off" class="layui-input"> </div> </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: 240px" lay-verify="required" placeholder="请输入配置类型" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label" style="width: 100px">配置值 </label> <div class="layui-input-block"> <input type="text" name="value" required style="width: 240px" lay-verify="required" placeholder="请输入配置值" autocomplete="off" class="layui-input"> <!-- <input type="hidden" name="id" style="width: 240px" autocomplete="off" class="layui-input"> --> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="save" >立即提交</button> <button type="reset" class="layui-btn layui-btn-primary" id="closeBtn" >重置</button> </div> </div> </form> </div>
c*js代码
-创建layer弹窗
function onAddBtn(){ //页面层-自定义 layer.open({ type: 1, title:"新建配置", closeBtn: false, shift: 2, area: ['400px', '300px'], shadeClose: true, // btn: ['新增', '取消'], // btnAlign: 'c', content: $("#add-main"), success: function(layero, index){}, yes:function(){ } }); }
-核心提交方法
<script type="text/javascript"> layui.use(['layer', 'form'], function () { var layer = layui.layer, $ = layui.jquery, form = layui.form; //表单验证 form.verify({ firstpwd: [/(.+){6,12}$/, '密码必须6到12位'], secondpwd: function(value) { if(value != $("#firstpwd").val()){ $("#secondpwd").val(""); return '确认密码与密码不一致'; } }, productCodes: function(value){ if(value == ''){ return "请选择系统分配"; } }, sysqx: function(value){ if(value == ''){ return "请选择权限"; } } }); //提交监听事件 form.on('submit(save)', function (data) { params = data.field; //alert(JSON.stringify(params)) submit($,params); return false; }) var obj = document.getElementById('closeBtn'); obj.addEventListener('click', function cancel(){ CloseWin(); }); }) //提交 function submit($,params){ $.post('${ctx}/golbal/add1', params, function (res) { if (res.status==1) { layer.msg(res.message,{icon:1},function(index){ CloseWin(); }) }else if(res.status==2){ layer.msg(res.message,{icon:0},function(){ parent.location.href='${ctx}/golbal/main'; CloseWin(); }) }else{ layer.msg(res.message,{icon:0},function(){ location.reload(); // 页面刷新 return false }) } }, 'json'); } debugger; //关闭页面 function CloseWin(){ parent.location.reload(); // 父页面刷新 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭 } </script>
d*后台代码
-
/** * 新增配置 * @return */ @RequestMapping("/add1") @ResponseBody public ResultEntity addItem(ZkGolbal golbal) { ResultEntity res = new ResultEntity(); try { golbal.setStatus("1"); res.setData(golbalService.addItem(golbal)); res.setSuccess("success"); res.setMessage("新增成功"); } catch (Exception e) { res.setMessage("操作失败"); e.printStackTrace(); } return res; }
总结
以上所述是小编给大家介绍的使用layer弹窗和layui表单做新增功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]