打开新tab与弹窗样式_tab已弹出框的形式-优快云博客

本文链接：https://blog.youkuaiyun.com/zxjdC/article/details/109382404

本文介绍了两种在查看数据详情时的页面显示方式：弹出窗口和新tab。`trackLog`函数根据所选数据打开跟踪日志详情，可以使用`openWindow`来创建弹出窗口，或者通过`openMenu`调用`MainTab.createTab`在新tab中展示内容。这两种方法分别提供了灵活的窗口管理和标签页切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

在查看列表中某条数据的详情时，要么打开一个新的tab，要么弹出新窗口显示详情，下文代码展示两种实现方式：
在这里插入图片描述

样式一：弹出窗口

在这里插入图片描述

function trackLog() {
    var row = $('#data_table').datagrid('getSelected');
    if (null != row) {
        var url = "${basePath}/trackLog/totrackLogTab?fileName=" + row.fileName + "&fileId=" + row.id;
        var winName = "跟踪日志详情";
        var width = $(window).width() * 0.9;
        var height = $(window).height() * 0.9;
        openWindow(winName, url, width, height, true);
    } else {
        Notify('请选择要操作的数据', 'top-right', '3000', 'danger', 'fa-bolt', true);
    }
}

/**
 *打开弹出窗口
 *title 窗口名称
 *url 窗口的链接
 *width 窗口宽度
 *height 窗口的高度
 *modal 模态类型 true 模态窗口 false 非模态窗口
 **/
function openWindow(title, url, width, height, modal) {
    var $win = $("#" + title);
    if ($win.length == 0) {

    } else {
        $win.remove();
    }
    var ifm_html = "<iframe id=\"ifm_" + title + "\" class=\"tab-iframe\" width=\"100%\" height=\"" + (height - 40) + "\" frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"auto\" allowtransparency=\"yes\"></iframe>";
    $("body").append("<div id=" + title + " class='easyui-window'>" + ifm_html + "</div>");
    $("#" + title).window({
        modal: modal,
        closed: true,
        maximizable: false,
        width: width,
        height: height,
        title: title,
        resizable: false,
        minimizable: false,
        collapsible: false,
        iconCls: 'fa fa-th-large padding-top-4',
        onClose: function () {
            $(this).window('destroy');
        }
    });

    $("#" + title).window("open");
    $("#ifm_" + title).attr("src", url);
}

样式二、

在这里插入图片描述

// 打开设置属性tab页
function trackLog() {
    var row = $('#data_table').datagrid('getSelected');
    if (null != row) {
        var url = "${basePath}/trackLog/totrackLogTab?fileName=" + row.fileName + "&fileId=" + row.id;
        openMenu(row.id + "type1", "跟踪日志详情", url);
    } else {
        Notify('请选择要操作的数据', 'top-right', '3000', 'danger', 'fa-bolt', true);
    }
}
/**
*打开菜单
*id 菜单标识
*label 菜单名称
*url 菜单URL
**/
function openMenu(id,label,url){
   MainTab.createTab(id,label,url);
   $(".sidebar-menu li").removeClass("active");
   if(id=='home'){
      $lis=$(".sidebar-menu").children();    
      for(var i=0;i<$lis.length-1;i++){
         var $li=$($lis[i]);
         if(!$li.hasClass("hidden")){
            $li.addClass("active");
            break;
         }
      }
   }else{
      $("#menu_"+id).addClass("active");
   }
}