EasyUI——tabs控件(选项卡)

tabs控件(选项卡)

  • 页面更新
    • index.jsp更新
    • 新增页面
      • addBook.jsp(新增)
      • listBook1.jsp(未上架)
  • js及dao类更新
    • index.js
    • dao
  • 运行显示

以上篇博客为基础,增加选项卡部分注意细节

页面更新

index.jsp更新

圈中部分为更新部分,及选项卡
EasyUI——tabs控件(选项卡)_第1张图片

新增页面

addBook.jsp(新增)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增界面</title>
</head>
<body>
	新增界面
</body>
</html>

listBook1.jsp(未上架)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>未上架</title>
</head>
<body>
未上架
</body>
</html>

js及dao类更新

index.js

$(function(){
	var ctx=$("#ctx").val();
	$('#tt').tree({
	    url:ctx+'/permission.action?methodName=menuTree',
	    onClick: function(node){
//			alert(node.text);// 在用户点击的时候提示
//	    	debugger;
	    	//解决重复打开页面
	    	if($('#tab').tabs('exists',node.text)){
	    		$('#tab').tabs('select',node.text);
	    	}else{
	    		var src=node.attributes.self.url;
	    		//解决非页子节点打开页面的问题
	    		if(src){
	    			var content='';
					$('#tab').tabs('add',{
					    title:node.text,
					    content:content,
					    closable:true,
					    tools:[{
					        iconCls:'icon-mini-refresh',    
					        handler:function(){
					            alert('refresh');
					        }
					    }]
					});
	    		}
	    	}
	    }
	});
	
})

dao

红线是之前木有的,不加到集合开不了选项卡;
EasyUI——tabs控件(选项卡)_第2张图片

运行显示

没有重复打开选项卡,也没有打开父节点页面,注意看js代码;
EasyUI——tabs控件(选项卡)_第3张图片

你可能感兴趣的:(easyui,java)