easyUI的tab选项卡以及右击菜单

前言

之前的博客讲过了MySQL+mvc实现动态的tree组件，这次，我们来讲讲点击tree的叶子节点后出现的选项卡效果如何实现。

（用之前讲述tree的话来说，叶子节点就是辈分最小的一个）

实现

首先看看实现效果：

首先，我们思考，我们一般进入类似的界面，都是有一个默认打开的首页界面，所以我们需要在jsp界面写一个easyUI中的选项卡组件：

  <div id="tabs" class="easyui-tabs" style="width:100%;height:100%;">   
	 <div   title="首页" style="padding:20px;display:none;">   
		首页一般在后台管理，放各种数据指标（各个模块的使用情况、数据量、报表）   
		
		//这个菜单是用来做右击菜单的
		<div id="rcmenu" class="easyui-menu" style="">
		<div data-options="iconCls:'icon-cancel'" id="closecur">
			关闭
		</div>
		
		<div id="closeall">
			关闭全部
		</div>
		
		<div id="closeother">
			关闭其他
		</div>
		
		<div class="menu-sep"></div>
			<div id="closeright">
				关闭右侧标签页
			</div>
			
			<div id="closeleft">
				关闭左侧标签页
			</div>
		</div>
		
	 </div>  
</div>  

然后我们的需求是：点击左侧tree的叶子节点时，需要新增一个选项卡那么在js代码中我们需要为tree增加点击事件

而在新增选项卡的时候，我们需要考虑会遇到的问题：

关于该节点对应的选项卡已打开？

那么我们点击该节点时是不需要新增选项卡的，而是切换选项卡至节点对应的选项卡。

关于非叶子节点不需要打开新的选项卡的问题

由于我做的tree中的数据来自于数据库，在设计数据库的时候，叶子节点是有路径的，即点击时打开的面板对应的页面的路径，所以，在数据库中非叶子节点是不存在路径的，我们可以直接用路径判断，如果是空的就不需要新增选项卡。

$(function(){
	$('#tt').tree({
			url:$('#ctx').val()+ '/menu.action?methodName=menuTree',
				onClick: function(node){
				//判断节点对应的选项卡是否存在
					if($('#tabs').tabs('exists',node.text)){//返回的是boolean类型的值
						//切换选项卡
						$('#tabs').tabs('select',node.text);
					} else{
						//新增选项卡
						var  src=node.attributes.self.menuURL;
						if(src){
							var content='<iframe scrolling="no" frameborder="0" src="'+src+'" width="99%" height="99%"></iframe>';
							$('#tabs').tabs('add',{    
							    title:node.text,    
							    content:content,    
							    closable:true,    
							    tools:[{    
							        iconCls:'icon-mini-refresh',    
							        handler:function(){    
							            alert('refresh');    
							        }    
							    }]    
							});  
						}
					}
				}
	});

	
	//展示右击菜单
	$('.tabs-header').bind('contextmenu',function(e){
		e.preventDefault();
		$('#rcmenu').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	});
	//关闭当前标签页
	$('#closecur').bind("click",function(){
		var tab = $('#tabs').tabs('getSelected');//获取选择的选项卡
		var index = $('#tabs').tabs('getTabIndex',tab);//获取该选项卡的索引
		$('#tabs').tabs('close',index);//将它关闭
	});
	//关闭所有标签页
	$('#closeall').bind("click",function(){
		var tablist = $('#tabs').tabs('tabs');//获取所有选项卡的面板
		for(var i=tablist.length-1;i>=0;i--){
			$('#tabs').tabs('close',i);//循环将它们都关了
		}
	});
	//关闭非当前标签页（先关闭右侧，再关闭左侧）//
	$("#closeother").bind("click",function(){
		var tablist = $('#tabs').tabs('tabs');
		var tab = $('#tabs').tabs('getSelected');
		var index = $('#tabs').tabs('getTabIndex',tab);
		for(var i=tablist.length-1;i>index;i--){
			$('#tabs').tabs('close',i);
		}
		var num = index-1;
		for(var i=num;i>=0;i--){
			$('#tabs').tabs('close',0);
		}
	});
	//关闭当前标签页右侧标签页
	$("#closeright").bind("click",function(){
		var tablist = $('#tabs').tabs('tabs');
		var tab = $('#tabs').tabs('getSelected');
		var index = $('#tabs').tabs('getTabIndex',tab);
		for(var i=tablist.length-1;i>index;i--){//循环从后面开始关闭，根据条件到自己的时候结束
			$('#tabs').tabs('close',i);
		}
	});
	//关闭当前标签页左侧标签页
	$("#closeleft").bind("click",function(){
		var tab = $('#tabs').tabs('getSelected');
		var index = $('#tabs').tabs('getTabIndex',tab);
		var num = index-1;
		for(var i=0;i<=num;i++){
			$('#tabs').tabs('close',0);//一直删除第一个到自己结束
		}
	});

	
})

选项卡的右击菜单需要的js代码就是上面这部分。

这是效果：

总结

冲鸭冲鸭，有问题欢迎留言，看到都会回哦！