easyUI之tree

课程目标

 

需求点：
      1.点击左侧侧显示右侧Tab
         1.1给菜单添加点击事件
       1.2调用tabs选项卡，打开对应的页面
          选项卡打开
           选项卡对应的页面展示
             
     2.不能打开重复的Tab
             拿到目前打开的tabs选项卡，与将要打开的选项卡做对比（exists）
            存在true:不打开
           不存在false:d打开
      3.对于已经存在的tab选项卡，被点击的时候，应该默认被选中
      
      4.点击菜单，能够访问对应的页面，而非文字内容

一，导入资源
1.tree_data1.json文件，放入webcontent目录下

 2.新建一个index.js文件，放在js目录下

3.用js方法调用导入的tree_data1.json 

$(function(){
	  $('#tt').tree({    
		    url:'tree_data1.json'   
		});
  })

4.在index主界面要调用js

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>

点击左侧侧显示右侧Tab

$('#stuMenu').tree({    
	    url:'tree_data1.json',
	    onClick:function(node){
	    	//alert(node.text);//在用户点击的时候提示
}

之后去tree_data1.json中修改内容

 

 <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
        <div id="stuTabs" class="easyui-tabs" style="width:100%;height:100%;">    
    </div>   
</div>

注意，div里的id要与js文件中的id所对应

这是easyUI中的增加的一个方法，下面是源码
 
// add a new tab panel    
$('#tt').tabs('add',{    
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{    
        iconCls:'icon-mini-refresh',    
        handler:function(){    
            alert('refresh');    
        }    
    }]    
});  

导入展示

 

不能打开重复的Tab

var一个exists,用于判断页面是否存有打开的页面

如果存有，不打开页面

如果没有，打开将要打开的页面

1.  

   //判断当前要打开的选项卡是否存在
   	    	var exists=$('#stuTabs').tabs('exists',node.text);
   	    	
   	    	if(exists){
   	    		$('#stuTabs').tabs('select',node.text);
   	    	}else{
   	    		//iframe
   	    	$('#stuTabs').tabs('add',{    
   	    	    title:node.text,    
   	    	    content:'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>', 
   	    	    closable:true,    
   	    	    tools:[{    
   	    	        iconCls:'icon-mini-refresh',    
   	    	        handler:function(){    
   	    	            alert('refresh');    
   	    	        }    
   	    	    }]    
   	    	});  
   	    	}

   

    对于已经存在的tab选项卡，被点击的时候，应该默认被选中

   $('#stuMenu').tree({    
   	    url:'tree_data1.json',
   	    onClick:function(node){
   	    	//alert(node.text);//在用户点击的时候提示
   	    	// add a new tab panel    
   	    	//判断当前要打开的选项卡是否存在
   	    	var exists=$('#stuTabs').tabs('exists',node.text);
   	    	
   	    	if(exists){
   	    		$('#stuTabs').tabs('select',node.text);
   	    	}else{
   	    		//iframe
   	    	$('#stuTabs').tabs('add',{    
   	    	    title:node.text,    
   	    	    content:node.text+'Tab Body'', 
   	    	    closable:true,    
   	    	    tools:[{    
   	    	        iconCls:'icon-mini-refresh',    
   	    	        handler:function(){    
   	    	            alert('refresh');    
   	    	        }    
   	    	    }]    
   	    	});  
   	    	}

   点击菜单，能够访问对应的页面，而非文字内容

   利用<iframe>标签进行操作

   将上段代码中的content改为

   '<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>'
   最后展示的界面，将文本内容改成了界面展示