layui弹窗新增或编辑一行数据数据回显提交成功后表格数据刷新

在父页面进行新增修改

//新增按钮
var active = {
      add: function(){
          layer.open({
              type: 2
              ,title: '添加用户'
              ,content: '/userform'  //接口
              ,maxmin: true
              ,area: ['500px', '450px']
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){//确定btn回调
                  var res  = layero.find('iframe')[0].contentWindow.callbackdata(); //弹窗新增页面userform中定义callbackdata()获取新增页面数据
                  //打印返回的值,看是否有我们想返回的值。
                  console.log(res);
                  $.ajax({
                      type: 'POST',
                      url: "/sysuser/addUser", // 新增接口
                      // dataType: 'json', // 服务器返回数据类型
                      contentType: "application/json",
                      data: JSON.stringify(res), //将res转成json
                      success: function (data) {
                          if (data === "true") {
                              layer.msg("添加成功", {icon: 6});
                              layer.close(index);
                              //修改成功后刷新父界面
                              table.reload('tableId') //tableId要和table.render渲染时的id一致
                              return false;//false:阻止表单跳转  true:表单跳转
                          } else {
                              layer.msg("添加失败");
                          }

                      }
                  });

              }
          });
      }
  };
 
//编辑事件
        table.on('tool(tableId)', function(obj){
            var data = obj.data;
            console.log(data)
           if(obj.event === 'edit'){            
	            layer.open({
	                type: 2
	                ,title: '编辑'
	                ,content: '/userform'//和新增共用一个页面
	                ,maxmin: true
	                ,area: ['500px', '450px']
	                ,btn: ['确定', '取消']
	                ,success:function (layero, index) {
	                    var body = layer.getChildFrame('body', index); // body.html() body里面的内容
	                    layui.form.render();
	                    var iframe = layero.find('iframe')[0].contentWindow;//获取弹出窗口
	                    //将待编辑数据回显到页面中
	                    body.find("#username").val(data.userName); // 方式一
	                    body.find("input[name='passWord']").val(data.passWord);
	                    body.find("input[name='realName']").val(data.realName);
	                    body.find("select[name='status']").val(data.status); //给下拉框赋
	                    iframe.layui.form.render('select');//在弹窗中渲染下拉框
	                }
	                ,yes: function(index, layero){//确定btn回调
	                	//在弹出的编辑页面中设定callbackdata()函数获取页面值
	                    var res  = layero.find('iframe')[0].contentWindow.callbackdata();
	                   
	                    $.ajax({
	                        type: 'POST',
	                        url: "/sysuser/modifyUser", // 编辑接口
	                        // dataType: 'json', // 服务器返回数据类型
	                        contentType: "application/json",
	                        data: JSON.stringify(res), //获取提交的表单字段
	                        success: function (data) {
	                            if (data == "true") {
	                                layer.msg("修改成功", {icon: 6});
	                                layer.close(index);//关闭弹窗
	                                //修改成功后刷新父界面
	                                table.reload('tableId')
	                                return false;//false:阻止表单跳转  true:表单跳转
	                            } else {
	                                layer.msg("修改失败:"+data);
	                                layer.close(index);
	                            }
	                        }
	                    });
	                }
	               
            	});
 			}
        });

子页面中的callbackdata()函数

<script>
    var callbackdata = function () {
        var data = {
            userName: $("#username").val(),
            passWord: $("input[name='passWord']").val(),
            realName: $("input[name='realName']").val(),
            status: $("select[name='status']").val()
        };
        return data;
    }
</script>

在弹窗子页面中进行新增修改。。。待续

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值