网络编程

使用layer弹窗和layui表单实现新增功能
网络编程 2025/1/12 佚名
3 2

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">配置值&emsp;</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表单做新增功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

标签：
layer弹窗,layui表单
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“使用layer弹窗和layui表单实现新增功能”

暂无“使用layer弹窗和layui表单实现新增功能”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com