EasyUI之tabs组件

前言

Tree组件实现树形菜单	https://blog.csdn.net/licmi/article/details/106897820.

上篇博客做的是一个树形菜单选项卡，今天来完善一下。
首先分析需求：浏览器请求index.jsp，看到首页一个选项卡，当点击某个树形菜单再新增tab页，以及右键关闭当前页或者关闭所有页

Tabs（选项卡）

我们来看EasyUI库里的方法有哪些

事件

tabs组件

效果图

我们也结果为导向来看，首先打开两个选项卡，当前选项卡界面是权限维护界面

点击角色维护树形菜单进入角色界面，并且不会新开窗口

移入选项卡右键点击关闭当前

呈现效果：

点击关闭所有呈现效果

点击关闭其他呈现效果

实现代码

在jsp代码中只用设置一个id加一个class="easyui-tabs"就行了
来看index代码

	<div id="book" class="easyui-tabs" style="width: 100%; height: 100%;">
		<span style="font-family:KaiTi_GB2312;font-size:18px;">  <!-- 这里是tabs页面的右键 -->
		  <div id="rcmenu" class="easyui-menu" style="">
		    <div id="closeall">关闭全部</div>
		    <div id="closeother">关闭其他</div>
		    <div id="closecur">关闭当前</div>
		  </div></span>
			<div title="首页" style="padding: 20px; display: none;">一般放数据指标或报表</div>
		</div>

这边就将问题列出来，就不一一举例了
问题：引入之后有个问题数据都是写死的，不灵活
解决方案：
使用jQuery，创建js设置’onClick’事件当该选项卡被选择时会触发
问题：当浏览器请求jsp的时候，会调用下列代码，重复的tab页反复打开
解决方案：如果存在就切换就切换到对应选项卡，如果不存在，那么重新打开一个，判断如果为false新开一个，为true跳到指定页

$(function(){
	var ctx =$("#ctx").val();
	$('#tt').tree({    
	    url:'menu.action?methodName=menuTree',
	    onClick: function(node){
			//alert(node.text);  // 在用户点击的时候提示
	    	
	    	//目前存在的问题，重复的tab页反复打开
	    	//针对于上面存在的问题进行分析：判断当前是否存在对应的title选项卡
	    	//如果存在就切换就切换到对应选项卡，如果不存在，那么重新打开一个
	    	//判断如果为false新开一个，为true跳到指定页
	    	//console.log($('#book').tabs('exists',node.text));
	    	if($('#book').tabs('exists',node.text)){//切换
	    		$('#book').tabs('select',node.text);
	    	}
	    	else{//新增
	    		
	    		//存在问题，非叶子节点按照开发角度来说是不能够打开页面的
	    		//分析，非叶子节点都没有跳转路径
	    		var src=node.attributes.self.menuUrl;
	    		if(src){
	    			var content =''
					$('#book').tabs('add',{    
					    title:node.text,    
					    content:content,    
					    closable:true,    
					    tools:[{    
					        iconCls:'icon-mini-refresh',    
					        handler:function(){    
					            alert('refresh');    
					        }    
					    }]    
					}); 
	    		}
	    		
	    	}
	    	
	    	
		}
	});
})

关闭选项卡

$(".easyui-tabs").bind('contextmenu',function(e){      
			 e.preventDefault();
		        $('#rcmenu').menu('show', {
		            left: e.pageX,
		            top: e.pageY
		        });
		    });
			
		    //关闭所有标签页
		    $("#closeall").bind("click",function(){
		        var tablist = $('#book').tabs('tabs');
		        for(var i=tablist.length-1;i>=1;i--){
		            $('#book').tabs('close',i);
		        }
		    });
		    //关闭其他页面（先关闭右侧，再关闭左侧）
		    $("#closeother").bind("click",function(){
		        var tablist = $('#book').tabs('tabs');
		        var tab = $('#book').tabs('getSelected');
		        var index = $('#book').tabs('getTabIndex',tab);
		        for(var i=tablist.length-1;i>index;i--){
		            $('#book').tabs('close',i);
		        }
		        var num = index-1;
		        if(num < 1){
					return;
			    }else{
			        for(var i=num;i>=1;i--){
			            $('#book').tabs('close',i);
			        }
			        $("#book").tabs("select", 1);
			    }
		    });
		   // 关闭当前标签页
			$("#closecur").bind("click",function(){
				var tab = $('#book').tabs('getSelected');
				var index = $('#book').tabs('getTabIndex',tab);
				$('#book').tabs('close',index);
			});

总结

今天就到这里了如果有什么不对的地方欢迎大家在评论区留言交流改进！！