欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ajax请求成功后打开新的tab

程序员文章站 2024-01-24 09:47:46
...

需求

ajax 项服务端发起请求,比如“导出sql查询结果”,成功响应后,打开新tab到【查询结果下载列表页】。

实现

1. 前端

function exportQueryRes(source) {
	bootbox.confirm("你确定要导出数据么?", function (result) {
		if (result) {
		   $.ajax({
				url: '${basePath}/dm/query/executeSql',
				type: 'post',
				data: {
				   。。。
				},
				dataType: 'json',
				success: function (response) {                                   
					var url = "${basePath}/dm/exportFileLog/listPage";
					MainTab.createTab("exportFileLog_listPage","下载页", url);
				},
				error: function (response) {
					disLoad();
					bootbox.alert("请求异常!");
				}
			});
		}
	});
 }

主要代码

var url = "${basePath}/dm/exportFileLog/listPage";
MainTab.createTab("exportFileLog_listPage","下载页", url);

/**
 * 主框架TAB操作类
 *
 **/
var MainTab = {
	/**
     *创建TAB
     *id:TAB的标识
     *label:TAB显示名称
     *url:TAB触发的URL
     **/
    createTab: function (id, label, url) {
        if ($("#framework_body").length <= 0) {
            window.parent.MainTab.createTab(id, label, url);
        } else {
            var $el_lis = $("#main-tabs ul li");
            var TABNUM = 10;
            if ($el_lis.length < TABNUM) {
                var li_id = "li_" + id;
                var ifm_id = "ifm_" + id;

                if ($("#" + li_id).length <= 0) {
                    var tabTemplate = "<li id=\"" + li_id + "\"><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close float-left'></span></li>";
                    var li = $(tabTemplate.replace(/#\{href\}/g, "#" + ifm_id).replace(/#\{label\}/g, label));
                    $('#main-tabs').find(".ui-tabs-nav").append(li);

                    var ifm_html = "<div class=\"tab-iframe-div\" id=\"" + ifm_id + "\"  >" +
                        "<iframe name=\"" + ifm_id + "\" class=\"tab-iframe\" src=\"" + url + "\" width=\"100%\"  frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"yes\" allowtransparency=\"yes\" ></iframe>" +
                        "</div>";

                    //"<div id='"+id+"'><p>"+tabContentHtml+"</p></div>";
                    $('#main-tabs').append(ifm_html);
                    $('#main-tabs').tabs("refresh");
                    refreshMainIframe();
                }
                var $lis = $("#main-tabs ul li");
                var index = 0;
                for (var i = 0; i < $lis.length; i++) {
                    var $li = $($lis[i]);
                    if ($li.attr("id") == li_id) {
                        index = i;
                        break;
                    }
                }
                if (id == 'home') {
                    $("#" + li_id).find(".ui-tabs-anchor").text(label);
                    $("#" + ifm_id).attr("scr", url);
                }
                $('#main-tabs').tabs("option", "active", index);

            } else {
                Notify('最多打开' + TABNUM + '个标签页!', 'top-right', '5000', 'warning', 'fa-warning', true);
            }
        }
        bindTabContextmenu();
    },
    /**
     *刷新指定的tab
     *label 将要跳转并刷新的TAB
     **/
    RefreshTabBy: function (id, label, url) {
        window.parent.MainTab.createTab(id, label, url);
        //重新选中
        var $iframe = window.parent.MainTab.MainIframe(id);
        var src = $iframe.attr("src");
        $iframe.prop("src", url);
        $iframe.reload();
    }
    ,
    /**
     *获取父类的Iframe
     **/
    MainIframe: function (id) {
        var ifm_id = "ifm_" + id;
        var $iframe = $("#" + ifm_id).find("iframe");
        return $iframe;
    }
    ,
    /**
     *关闭当前的TAB
     **/
    closeTab: function () {
        if ($("#framework_body").length <= 0) {
            window.parent.MainTab.closeTab();
        } else {
            var $lis = $("#main-tabs li");
            var $thisli;
            var index = 0;
            var length = $lis.length;
            for (var i = 0; i < $lis.length; i++) {
                var $li = $($lis[i]);
                if ($li.attr("aria-selected") == "true") {
                    $thisli = $li;
                    index = i;
                    break;
                }
            }
            var panelId = $thisli.remove().attr("aria-controls");
            $("#" + panelId).remove();
            $('#main-tabs').tabs("refresh");

        }
    }
    ,
    /**
     *关闭当前TAB,并跳转到另一个TAB
     *gotoLabel 将要跳转的TAB名称
     **/
    closeTabAndGoto: function (gotoLabel) {

        if ($("#framework_body").length <= 0) {
            window.parent.MainTab.closeTabAndGoto(gotoLabel);
        } else {
            var $lis = $("#main-tabs li");
            var $thisli;
            var index = 0;
            var length = $lis.length;
            for (var i = 0; i < $lis.length; i++) {
                var $li = $($lis[i]);
                if ($li.attr("aria-selected") == "true") {
                    $thisli = $li;
                    index = i;
                    break;
                }
            }
            var panelId = $thisli.remove().attr("aria-controls");
            $("#" + panelId).remove();
            $('#main-tabs').tabs("refresh");


            //重新选中
            var $lis = $("#main-tabs li");
            var $thisli;
            var index = 0;
            var length = $lis.length;
            for (var i = 0; i < $lis.length; i++) {
                var $li = $($lis[i]);
                if ($li.find("a").text() == gotoLabel) {
                    $thisli = $li;
                    index = i;
                    break;
                }
            }
            $('#main-tabs').tabs("option", "active", index);
        }
    }

    ,
    /**
     *关闭当前TAB,并跳转到新TAB进行刷新
     *refreshLabel 将要跳转并刷新的TAB
     **/
    closeTabAndRefresh: function (refreshLabel) {
        if ($("#framework_body").length <= 0) {
            window.parent.MainTab.closeTabAndRefresh(refreshLabel);
        } else {
            var $lis = $("#main-tabs li");
            var $thisli;
            var index = 0;
            var length = $lis.length;
            for (var i = 0; i < $lis.length; i++) {
                var $li = $($lis[i]);
                if ($li.attr("aria-selected") == "true") {
                    $thisli = $li;
                    index = i;
                    break;
                }
            }
            var panelId = $thisli.remove().attr("aria-controls");
            $("#" + panelId).remove();
            $('#main-tabs').tabs("refresh");


            //重新选中
            var $lis = $("#main-tabs li");
            var $thisli;
            var index = 0;
            var length = $lis.length;
            for (var i = 0; i < $lis.length; i++) {
                var $li = $($lis[i]);
                if ($li.find("a").text() == refreshLabel) {
                    $thisli = $li;
                    index = i;
                    break;
                }
            }
            $('#main-tabs').tabs("option", "active", index);

            var id = $thisli.attr("id").split("_")[1];
            var ifm_id = "ifm_" + id;
            var $iframe = $("#" + ifm_id).find("iframe");
            var src = $iframe.attr("src");
            $iframe.prop("src", src);
            $iframe.reload();

        }
    }

    ,
    /**
     *只刷指定的TAB
     *refreshLabel 将要刷新的TAB
     **/
    refreshTab: function (refreshLabel) {
        if ($("#framework_body").length <= 0) {
            window.parent.MainTab.refreshTab(refreshLabel);
        } else {
            var $lis = $("#main-tabs li");
            var $thisli;
            var index = 0;
            var length = $lis.length;
            for (var i = 0; i < $lis.length; i++) {
                var $li = $($lis[i]);
                if ($li.find("a").text() == refreshLabel) {
                    $thisli = $li;
                    index = i;
                    break;
                }
            }
            var id = $thisli.attr("id").split("_")[1];
            var ifm_id = "ifm_" + id;
            var $iframe = $("#" + ifm_id).find("iframe");
            try {
                eval($iframe.attr("name") + '.dataGridRefresh()');
            } catch (e) {
                var src = $iframe.attr("src");
                $iframe.attr("src", "");
                $iframe.attr("src", src);
            }

        }
    }


}

2. 后端

  @RequestMapping("executeSql")
    @ResponseBody
    public Object executeSql(String sql, HttpServletRequest request, HttpServletResponse httpServletResponse) throws Exception{

		 // 执行下载
		 MyThread thread = new MyThread(exportFileLogPo);
		 thread.start();
        
        return success("下载计划已提交,等待执行");
    }

相关标签: 前端

上一篇: 单例模式的一点小疑问

下一篇: