关于layui 两层弹框 ,关闭一个后,刷新上一个弹框的某个下拉框问题

(我使用的layui版本为2.4.3)

最近因为项目需要,需要实现一层弹框(下面称之为A弹框)后,点击按钮跳出二层弹框(下面称中国之为B弹框),可以实现添加新的下拉框值,然后再关闭B弹框是,可以实现局部刷新A弹框中的部分块,使得刚添加的值显示,但是不能是整个页面刷新。

需求抛出来,接下来说说我自己的实现过程,以及走过的坑吧。
首先把弹框部分代码实现,如下:

 //监听提交
 layui.(['form','layer'],function(){
	 var form = layui.form;
	 var layer = layui.layer;
    form.on('submit(addSubmit)', function (data) {
        	//跳转页url
        	var url=$(this).attr("data-url");
        	//下拉框更新访问的url
        	var selectUrl = $(this).attr("select_url");
        	//需要更新的div id
           // var top_divid = $(this).attr("top_divid");
        	//下拉框块的lay-filter值
        	var select_div = $(this).attr("select_div");
        	//下拉框id
        	var select_id =  $(this).attr("select_id");
        	layer.open({
            	type: 2,
            	title: '详情',
            	shadeClose: false,
            	shade: [0.3, '#000'],
            	maxmin: true, //开启最大化最小化按钮
            	area: ['900px', '500px'],
            	content: url,
         	   end:function(){ 
            
            	}
        	})
    	});
    });
    (留意代码中的end 函数,后续所有内容实现都是写在这里)

所有的东西都是从无到有的,所以一开始我能想到的是也是刷新整个页面,这个很容易实现:
直接在end函数中添加:location.reload(); 这样就可以实现刷新整个页面。

然后发现刷新弹框整个页面,这样一点都不友好,例如在某些输入框已经填入了内容,可是在刷新整个弹框页面后就会把所用输入框,下拉框初始化。所以刷新整个页面很不友好,必须实现刷新某个下拉框或者某个块才行。接下来就是自己把自己坑的时候了。

有个局部刷新的概念以后,我首先想到的是一个div刷新,然后就开始找资料,找方法实现。
以下就是我的实现过程(纵然这个实现方法不是我最终的实现方案,可是也有学习借鉴的部分,仅供大家参考学习)
同样以下代码也是放在上述end函数里面(end函数有什么用,自己看layui文档了解,这里就不一一细说了),代码如下:

//刷新指定区域
  $("#"+top_divid).load(location.href +" #"+top_divid); //注意第二个#号前面必须要有一个空格,不然刷新会有重叠
  //重新加载下拉框(数据来源数据库)(该方法不是讲述重点,所以不写出来了)
  addOptions(selectUrl,select_id,select_div,form);

通过以上的方法,一开始还是内心欢喜的,毕竟觉得自己已经实现了自己想要实现的功能。可是一测试就脑瓜疼了。在进行打开B弹框然后再关闭B弹框后,A弹框页的对应下拉框莫名其妙就加载不出来,不过偶尔又可以加载出来。找了半天没有找到缘由是真的难受。后来发现,有可能是重载整个块带来的问题。毕竟下拉框是动态加载的。无奈之下,只能再去换其他方法。

研究了一下,然后就有一个新的思路,既然下拉框数据是加载而来的,那么是否可以将其对应的选项卡内容移除在重新加载。抱着试一试的心态,最后还真的成功了,一下就是我的实现代码:

				//根据id移除选项卡所有选项
                document.getElementById(select_id).options.length = 0;
                //添加第一个选项。
                $('#'+select_id).append("<option value=''>请选择</option>");
                //更新表单
                 form.render('select',select_div);
                addOptions(selectUrl,select_id,select_div,form);
                (添加的第一个选项可以卸载addOptions函数里面)

该方法是基于layui前端框架实现的,本人使用的是layui2.4.3版本。

至此,便完成了关闭B弹框页刷新A弹框页指定部分模块。

如有哪里不正确,望各位多多指教,当然有哪里不懂的也可以联系我。不过建议多看文档,很有用。

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页