layui的iframe弹出层的表单数据回显

最新推荐文章于 2022-05-31 18:29:26 发布

Android_la

最新推荐文章于 2022-05-31 18:29:26 发布

阅读量3.1k

点赞数 11

分类专栏： Layui 文章标签： jquery

本文链接：https://blog.csdn.net/qq_40634846/article/details/104720361

版权

Layui 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一. 问题背景

父页面：list.jsp
子页面：userEdit.jsp
点击‘编辑’，将数据回显到表单，如下：

在这里插入图片描述

二. 解决方案

关键代码如下：

 layer.open({
                 type: 2,
                 title: '编辑信息',
                 area: ['750px', '755px'],
	             offset: 'r',
	             content: 'pages/user/userEdit.jsp',
	             success: function(layero, index){
	            	//找到它的子窗口的body
	                 var body = layer.getChildFrame('body', index); //巧妙的地方在这里哦
	                 //为子窗口元素赋值
	                 body.find("input[name=username]").val(data.username);
	                 body.find("input[name=password]").val(data.password);
	                 body.find("input[name=mail]").val(data.mail);
	                 body.find('input[name=manager][value = ' + data.manager + ']').attr("checked",
	                 "checked");
	                 form.render("radio");
	             }
			   });

很多人遇到radio单选按钮不显示效果出来，需要在子页面定义var form = layui.form，子页面代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用户编辑</title>
  <base href="${pageContext.request.scheme }://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
  <link rel="stylesheet" href="resources/layui/css/layui.css" media="all">
  <script src="resources/layui/layui.js"></script>
</head>
<body>
<br>
<br>
<br>
<br>
<form class="layui-form" action="" id="edit_form" lay-filter="editForm">
  <input type="hidden" name="user_id" />
  <div class="layui-form-item" >
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" id="rew" required  lay-verify="required" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="text" name="password"  required lay-verify="required" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux"></div>
  </div>
  <div class="layui-form-item" >
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="text" name="mail"  required  lay-verify="required"  autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">是否管理员</label>
    <div class="layui-input-block">
      <input type="radio" name="manager" value="yes" title="是" id="yes">
      <input type="radio" name="manager" value="no" title="否" id="no" >
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

       
        //监听提交
		  form.on('submit(formDemo1)', function(arg){
		       console.info(arg.field);
		       $.ajax({
			        url: 'updateUser',
			        data: {"user_id":arg.field.user_id, 
			               "username":arg.field.username, 
			               "password":arg.field.password,
			               "mail":arg.field.mail,
			               "manager":arg.field.manager},
			        dataType: 'json',
			        type: 'POST',
			       success:function(result){
		             if(result == null){
		                   layer.msg("更新失败！");
		             }else{
						     //当你在iframe页面关闭自身时
			 	             var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
			                 //layer信息提示
			                 layer.msg('更新成功');
			                 parent.location.reload(); //刷新父页面 
			 	             setTimeout(function () { parent.layer.close(index) }, 330);//延迟
		             }
		          }
			     }); 
			        return false;//组织表单默认提交并跳转
		  });

        
    }); 

</script>
</body>
</html>

Android_la

关注

11
点赞
踩
24

收藏

觉得还不错? 一键收藏
26
评论
layui的iframe弹出层的表单数据回显

一. 问题背景父页面：list.jsp子页面：userEdit.jsp点击‘编辑’，将数据回显到表单，如下：二. 解决方案关键代码如下： layer.open({ type: 2, title: '编辑信息', area: ['750px', '755px'], ...
复制链接

扫一扫

专栏目录