需求
在查看列表中某条数据的详情时,要么打开一个新的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");
}
}