使用layer弹窗和layui表单实现新增功能


Posted in Javascript onAugust 09, 2018

1.需求:使用layer在弹窗内完成新增,成功后提示并刷新页面(父页面,list页面)

2.实现

  a* 页面效果图  

使用layer弹窗和layui表单实现新增功能

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表单做新增功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 #Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 #Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 #Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 #Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 #Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 #Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 #Javascript
You might like
用PHP实现多级树型菜单
2006/10/09 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
各种快递查询--Api接口
2016/04/26 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
Python3安装Pillow与PIL的方法
2019/04/03 Python
python实现简单五子棋游戏
2019/06/18 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python内置加密模块用法解析
2019/11/25 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
市场部专员岗位职责
2013/11/30 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
销售冠军获奖感言
2014/02/03 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
Java存储没有重复元素的数组
2022/04/29 Java/Android
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技