关于Easy的Tree结构下tab页面的切换

Main页面

<body class="mainiframe">
    <div class="side" id="frmTitle" name="fmTitle" >
        <iframe src="doc!tree.action?organizeId=${param.organizeId }" name="right" id="leftMain"
            frameborder="no" scrolling="auto" width="100%" height="auto"
            allowtransparency="true">
        </iframe>
    </div>
    <div class="main_ri" id="frmr" name="fmr">
        <iframe src="doc!tabs.action" name="mainright" id="rightMain"
            frameborder="no" scrolling="no" width="100%" height="auto"
            allowtransparency="true">
        </iframe>
    </div>

</body>

Tree页面

$(function(){
        $(".easyui-tree").tree({
            animate:true,
            onClick:function(node){
                $(".easyui-tree").tree("toggle",node.target);
                if(node.attributes && node.attributes.url){
                    //获取父页面的document对象
                    var $right = $("#rightMain",parent.window.document);
                    $right[0].contentWindow.addTab(node.text,node.attributes.url+"?organizeId=${param.organizeId}");
                }
            },
            onContextMenu:function(e){
                e.preventDefault();
            }
        });
        
    });


2：
$(function(){
        $("#tree").tree({
            lines:true,
            url:"${ctx}/menu/menuEasyUI.action",
            onLoadSuccess:function(){
                $("#tree").tree('collapseAll');
            },
            onClick:function(node){
                if(node.state=='closed'&&(!$("#tree").tree('isLeaf',node.target))){  //状态为关闭而且非叶子节点
                    $(this).tree('expand',node.target);//点击文字展开菜单  
                    if (node.attributes && node.attributes.url) {  
                        openTab(node);
                    }  
                }else{  
                    if($("#tree").tree('isLeaf',node.target)){  //状态为打开而且为叶子节点
                        if (node.attributes && node.attributes.url) {  
                            openTab(node);                     
                        }                 
                    }else{  
                        $(this).tree('collapse',node.target);//点击文字关闭菜单  
                    }  

                }     
            }
        });
 function openTab(node){
            if($("#tt").tabs("exists",node.text)){
                $("#tt").tabs("select",node.text);
            }else{
                var content="<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' 
                              src='${pageContext.request.contextPath}"+node.attributes.url+"'></iframe>"
                $("#tt").tabs("add",{
                    title:node.text,
                    iconCls:node.iconCls,
                    closable:true,
                    content:content
                });
            }
        }
    });
 <!-- 主显示区域选项卡界面 title="主显示区域"-->
        <div region="center">
            <div class="easyui-tabs" fit="true" id="tt"> 
                <div title="首页">
                    <iframe width='100%' height='100%'  id='iframe' frameborder='0' scrolling='auto'  
                                   src='<%=request.getContextPath()%>/admin/welcomeInfo.jsp'></iframe>
                </div>
            </div>
        </div>

 

 

 
<ul class="easyui-tree">
     <li data-options="state:'closed'">
         <span>基础信息</span>
         <ul>
             <li data-options="attributes:{url:'base!forBaseSave.action'}">煤矿基本信息</li>
             <li data-options="attributes:{url:'base!forZcmcSave.action'}">主采煤层信息</li>
             <li data-options="attributes:{url:'base!forJtInfoSave.action'}">井筒信息</li>
             <li data-options="attributes:{url:'base!forCmgzmJdInfoPage.action'}">矿井采煤信息</li>
             <li data-options="attributes:{url:'base!forCmgzmJbInfoPage.action'}">采煤工作面基本信息</li>
             <li data-options="attributes:{url:'base!forZzInfoPage.action'}">证照信息</li>
             <li data-options="attributes:{url:'base!forKzkhInfoPage.action'}">矿长考核信息</li>
             <li data-options="attributes:{url:'base!forKjzpPage.action'}">矿井照片信息</li>
             <li data-options="attributes:{url:'base!forJcddSave.action'}">井上下作业地点及车间硐室信息</li>
             <li data-options="attributes:{url:'base!forXtsmSave.action'}">煤矿概况</li>
         </ul>
     </li>
</ul

Tabs页面

<!doctype html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/resources/pages/system/inc-easyui.jsp"%>

<html>
<head>
<base href="<%=basePath%>"/>
<meta charset="UTF-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="styles/css/blue.css">
<link rel="stylesheet" type="text/css" href="styles/css/easyui.css">
   
   <script type="text/javascript">
       
       $(function(){
                   
       })
       //根据tree下的iframe下的js获取的addTab数据完成Tab页面数据加载，切换tab页面操作
       function addTab(title,url){
           var $tabs = $(".easyui-tabs")
           title = $.trim(title);
        if ( $tabs.tabs('exists', title)){
            $tabs .tabs('select', title);//选中并刷新
            var tab = $tabs .tabs('getSelected');
            var src = $(tab.panel('options').content).attr('src');
            tab.panel("body").find("iframe").attr("src",url);
        } else {
            var content = createFrame(url);
            $tabs .tabs('add',{
                title:title,
                content:content,
                closable: false
            });
        }
    }
    
    function createFrame(url) {
        var s = '<iframe scrolling="auto" frameborder="0"   src="'+url+'" style="width:100%;height:100%;"></iframe>';
        return s;
    }
    
    function closeCurrentTab(){
        var $tabs = $(".easyui-tabs");
        var tab =  $tabs.tabs('getSelected');
        var index =  $tabs.tabs('getTabIndex',tab);
        $tabs.tabs("close",index);
    }

   </script>
    
<body>
<div class="easyui-tabs"  fit="true"  border="false" data-options="closable:false" ></div>
</body>
</html>
posted @ 2017-09-20 15:32  夜西门吹雪孤城花满楼  阅读(309)  评论(0)  编辑  收藏  举报