layerui的刷新操作的解决

8.7

这主要是来总结一下前面是怎么解决这些问题的。

红框的是自己需要做的东西，然后①太弱智不论

②：问题描述 ： 是因为页面上有添加功能，在之前进行添加的操作之后数据库里面有了增加，但是因为没有写刷新，所以在实际点击了关闭之后即使进行了相应的添加保存操作之后页面也不会进行对应的刷新。

​ 解决的思路 ：本来想的是找一个页面强制刷新的方法，然后添加到关闭按钮的js里面，让点击关闭时能够调用对应的js方法，再去进行刷新页面。但是对应了实际的页面上“添加”页面的写法，具体的js等。首先明确一点就是弹窗是使用layerui

<a class="btn btn-success" onclick="$.operate.addnobutton(null, MODEL_SIZE.SMALL)">
<i class="fa fa-plus"></i> 添加
</a>

​ 这个是主页面上的添加功能的操作的html

operate :{
        // 添加信息,无确定按钮
      addNoButton: function(id) 
      $.modal.openNoButton("添加" + $.table._option.modalName, $.operate.addUrl(id));
         },
     }

​ 这个是对应的响应页面上的js

   openNoButton: function (title, url, width, height, callback) {
            	//如果是移动端，就使用自适应大小弹窗
            	if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
            	    width = 'auto';
            	    height = 'auto';
            	}
            	if ($.common.isEmpty(title)) {
                    title = false;
                };
                if ($.common.isEmpty(url)) {
                    url = "/404.html";
                };
                if ($.common.isEmpty(width)) {
                	width = 800;
                };
                if ($.common.isEmpty(height)) {
                	height = ($(window).height() - 50);
                };
                if ($.common.isEmpty(callback)) {
                    callback = function(index, layero) {
                        var iframeWin = layero.find('iframe')[0];
                        iframeWin.contentWindow.submitHandler();
                    }
                }
                layer.open({
                    type: 2,
                    area: [width + 'px', height + 'px'],
                    fix: false,
                    //不固定
                    maxmin: true,
                    shade: 0.3,
                    title: title,
                    content: url,
                    btn: ['关闭'],
                    // 弹层外区域关闭
                    shadeClose: true,
                    end: function () {
                        location.reload();
                    },
                    cancel: function(){
                        return true;
                    }
                });
            },

这个里面起生效作用的是end：function这个函数，意思就是在这个弹出层点击关闭之后刷新父窗口。

⑤ 问题描述 ： 这个是因为layerui的左侧有对应的菜单栏，点击一个相应的菜单会跳出对应的tab页面(相应tab界面没有关闭)，但是已经因为有内容是进行对应操作记录，会生成相应的日志。进行了很多次操作，但是对应的日志页面不会进行显示这些操作的记录，想通过重新点击菜单栏进行对应tab的刷新

解决的方法 ：这个类似于上面的那个刷新，也是想给对应的操作按钮进行js的添加

<li>
<a class="menuItem" href="XXXX对应的路径" data-index="11">XX日志</a>			
</li>

​ 这个是菜单栏的对应html

//jquery 来给对应的html里面的进行操作
$('.menuItem').on('click', menuItem);

//对应的具体函数
 function menuItem() {
        // 获取标识数据
        var dataUrl = $(this).attr('href'),
        dataIndex = $(this).data('index'),
        menuName = $.trim($(this).text()),
        flag = true;
        if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
        // 选项卡菜单已存在
        $('.menuTab').each(function() {
            if ($(this).data('id') == dataUrl) {
                if (!$(this).hasClass('active') || dataUrl.indexOf("log")!=-1 || dataUrl.indexOf("Log")!= -1 ) {
                    refreshTab();
                    $(this).addClass('active').siblings('.menuTab').removeClass('active');
                    scrollToTab(this);
                    // 显示tab对应的内容区
                    $('.mainContent .RuoYi_iframe').each(function() {
                        if ($(this).data('id') == dataUrl) {
                            $(this).show().siblings('.RuoYi_iframe').hide();
                            return false;
                        }
                    });
                }
                flag = false;
                return false;
            }
        });
        // 选项卡菜单不存在
        if (flag) {
            var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
            $('.menuTab').removeClass('active');

            // 添加选项卡对应的iframe
            var str1 = '<iframe class="RuoYi_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
            $('.mainContent').find('iframe.RuoYi_iframe').hide().parents('.mainContent').append(str1);
            
            $.modal.loading("数据加载中，请稍后...");
            
            $('.mainContent iframe:visible').load(function () {
            	$.modal.closeLoading();
            });
            
            // 添加选项卡
            $('.menuTabs .page-tabs-content').append(str);
            scrollToTab($('.menuTab.active'));
            Window.href = dataUrl;
        }
        return false;
    }

   //刷新iframe
    function refreshTab() {
    	var currentId = $('.page-tabs-content').find('.active').attr('data-id');
    	var target = $('.RuoYi_iframe[data-id="' + currentId + '"]');
        var url = target.attr('src');
        target.attr('src', url).ready();
    }

​ 对应的js

在js里面添加了这一句来实现结解决问题的功能，意思就是当激活，或者对应的具体的url里面包括log /Log的时候进行刷新

​ if (!$(this).hasClass(‘active’) || dataUrl.indexOf(“log”)!=-1 || dataUrl.indexOf(“Log”)!= -1 ) {
​ refreshTab();

​ }