layui 模态窗父子组件值传递

laoli815

已于 2022-02-26 19:11:37 修改

阅读量373

点赞数

分类专栏： layui弹出层值传递文章标签： python layui ajax django

于 2021-03-08 09:27:35 首次发布

本文链接：https://blog.csdn.net/laoli815/article/details/114520264

版权

layui弹出层值传递专栏收录该内容

1 篇文章 0 订阅

订阅专栏

					layui 模态窗父子组件值获取与传递

直接上图实现我们的最终效果
在这里插入图片描述
图-1

图-2
弹出层，我们采用的iframe

    //监听行工具事件
  table.on('tool(ins_info)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('真的删除此行记录么？', function(index){
        console.log(obj.data.id);
         $.ajax({
				   type: "POST",
				   url: "/sql/mysql_instance_del",
                   dataType: "json",
                   data:{id:obj.data.id},
				   success: function(response){
					   console.log(response.code);
				    	if(response.code=='200'){
				    		  layer.alert("MySQL实例删除成功", {icon: 6}
				              );
				    		     obj.del();
				    	}else{
				    		layer.msg("MySQL实例删除失败",{icon: 5});
				    	}
				   }
				   });


        layer.close(index);
      });
    } else if(obj.event === 'edit'){
//      layer.prompt({
//        formType: 2
//        ,value: obj.data.instance_name
//      }, function(value, index){
//        obj.update({
//          instance_name: value
//        });
//        layer.close(index);
//      });
        layer.open({
  id: 'LAY_layuipro',
  type: 2,
  content: "/sql/single_mysql_detail",
  area: ['1000px', '600px'],
  maxmin: true,
  shadeClose: true,
  shade:0.4,
  btn: ['保存','关闭'],
  btnAlign: 'c',
  title:'单实例详情',
  success: function(layero, index){
       window.formData = null;
      window.formData = obj.data;
    var body = layer.getChildFrame('body', index);
    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
//    console.log(iframeWin); //得到iframe页的body内容
      body.find('#ipaddress').val(window.formData.ip);
      body.find('#port').val(window.formData.port);
      body.find('#instance_name').val(window.formData.instance_name);
      body.find('#memo').val(window.formData.memo);
      console.log(window.formData)
  },
  btn1:function(index, layero){
         var body = layer.getChildFrame('body', index);
         var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
         var memo=iframeWin.document.getElementById("memo").value;
              $.ajax({
				   type: "POST",
				   url: "/sql/mysql_detail_update",
                   dataType: "json",
                   data:{id:obj.data.id,memo:memo},
				   success: function(response){
					   console.log(response.code);
				    	if(response.code=='200'){
				    		  layer.alert("MySQL实例更新成功", {icon: 6}
				              );
                        obj.update({memo:memo});
				    	}else{
				    		layer.msg("MySQL实例更新失败",{icon: 5});
				    	}
				   }
				   });


         layer.close(index);
         // 执行某些操作49     }
}
});
    }
  });

上面的success为渲染加载成功之后的结果，可以直接从父组件传递到子组件，为子组件赋值，下面的btn1为保存按钮，里面调用了ajax，但是无法进行里面值得校验，需要自己写校验规则才行，如果采用lay-submit就可以采用校验规则(这点是layui的好处），注意上面的采用了layer.close(index)第一个按钮如果不用这个不会自动关闭的，后面的按钮都会自动关闭的（这点是区别）
后端采用的django框架，为了让iframe能够流畅运行，我们需要在settings.py文件中添加
X_FRAME_OPTIONS = ‘ALLOWALL’

XS_SHARING_ALLOWED_METHODS = [‘POST’,‘GET’,‘OPTIONS’, ‘PUT’, ‘DELETE’]

下面再赋上我们的弹出层的html文件，文件名为Single_MySQL_Detail.html，
url映射：
path(r’single_mysql_detail’,TemplateView.as_view(template_name=‘Single_MySQL_Detail.html’)),

{%load static %}
<html>
<head>
<script src="{% static 'jquery.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
</head>
<body>
<form style="padding: 10px;" class="layui-form" action="" lay-filter="example">
  <div class="layui-form-item">
    <label class="layui-form-label">IP地址:</label>
    <div class="layui-input-block">
      <input type="text" id="ipaddress" lay-verify="ipaddr" readonly class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">端口号:</label>
    <div class="layui-input-block">
      <input type="number" id="port" lay-verify="dbport" readonly class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">实例名称:</label>
    <div class="layui-input-block">
      <input type="text" id="instance_name" lay-verify="ins_name" readonly class="layui-input">
    </div>
  </div>




  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">数据库备注</label>
    <div class="layui-input-block">
      <textarea id="memo" placeholder="请输入对此数据库备注" class="layui-textarea" name="desc"></textarea>
    </div>
  </div>

</form>
</body>
</html>

附上django更新api后端脚本

@csrf_exempt
def mysql_detail_update(request):
    if request.method=='POST':
        try:
            id=request.POST.get('id')
            memo=request.POST.get('memo')
            InstanceInfo.objects.filter(pk=id).update(memo=memo)
            context={'code':'200'}
            return  HttpResponse(json.dumps(context))
        except Exception as e:
            context = {'code': 'update falied'}
            return HttpResponse(json.dumps(context))

删除按钮后端脚本

@csrf_exempt
def mysql_instance_del(request):
    if request.method=='POST':
        try:
            id=request.POST.get('id')
            groupid=InstanceInfo.objects.filter(pk=id).values_list('cluster')[0][0]
            cnt=InstanceInfo.objects.filter(cluster=groupid).count()
            InstanceGroup.objects.filter(pk=groupid).delete() if cnt==1 else None
            InstanceInfo.objects.filter(id=id).delete()
            context={'code':'200'}
            return  HttpResponse(json.dumps(context))
        except Exception as e:
            context = {'code':'del falied'}
            return HttpResponse(json.dumps(context))