EasyUI——tabs控件(选项卡)

最新推荐文章于 2022-05-05 23:10:18 发布

原创最新推荐文章于 2022-05-05 23:10:18 发布 · 704 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #java

本文详细介绍了如何在Web应用中使用tabs控件（选项卡）进行页面管理和更新，包括index.jsp的更新、新增addBook.jsp和listBook1.jsp页面的实现，以及index.js和dao类的修改，确保了选项卡功能的正常运行，避免了重复打开页面和非页面节点打开的问题。

tabs控件（选项卡）

页面更新
js及dao类更新
- index.js
- dao
运行显示

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

页面更新

index.jsp更新

圈中部分为更新部分,及选项卡
在这里插入图片描述

新增页面

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='<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
					$('#tab').tabs('add',{
					    title:node.text,
					    content:content,
					    closable:true,
					    tools:[{
					        iconCls:'icon-mini-refresh',    
					        handler:function(){
					            alert('refresh');
					        }
					    }]
					});
	    		}
	    	}
	    }
	});
	
})