点击选项卡刷新面板或者刷新操作树

最新推荐文章于 2021-12-07 11:32:06 发布

jeo_chow

最新推荐文章于 2021-12-07 11:32:06 发布

阅读量2.6k

点赞数

分类专栏：项目（ssh）--OA办公系统文章标签： javascript easyui 插件

本文链接：https://blog.csdn.net/jeo_chow/article/details/52331361

版权

项目（ssh）--OA办公系统专栏收录该内容

9 篇文章 0 订阅

订阅专栏

弹出选项卡要引入easyui插件（百度即可）。

第一步：把jqeasyui文件夹引入到Web-Root下的自定义的js文件夹中

第二步：在jsp页面配置easyui的路径还有jquery的路径

第三步：写代码

<%@ 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>
  	<title>办公管理系统</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
	<meta name="Keywords" content="keyword1,keyword2,keyword3"/>
	<meta name="Description" content="网页信息的描述" />
	<meta name="Author" content="gdcct.gov.cn" />
	<meta name="Copyright" content="All Rights Reserved." />
	<link href="${path}/logo.ico" rel="shortcut icon" type="image/x-icon" />
	<link rel="stylesheet" type="text/css" href="${path}/js/jqeasyui/themes/default/easyui.css"/>
	<script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript" src="${path}/js/jqeasyui/jquery.easyui.min.js"></script>
	
  	<style type="text/css">
		html, body {
		width : 100%;
		height : 100%;
		padding : 0;
		margin : 0;
		overflow : hidden;
	</style>
	
	<script type="text/javascript">
		$(function(){
			/** 在div上面附加选项卡 */
			$("#tab").tabs({//如果fit下面还有属性的话，逗号一定不能少，切记！
				fit : true<span style="color:#330033;background-color: rgb(51, 51, 255);">,</span> // 填充父容器
				//tabWidth : 80, // 宽度
				//tabHeight: 30 // 高度
				<span style="background-color: rgb(255, 0, 0);">onSelect : function(title, index){ // 当选项卡选中时
					/** 让当前选项卡中的面板刷新 */
					var tab = $("#tab").tabs("getSelected");
					tab.panel("refresh");</span>
					
				}
			});
			/** 添加面板 */
			$("#tab").tabs("add", {
				title : "用户信息", // 标题
				content : "信息", // 内容
				closable : false // 是否可以关闭
			});
		});
		
		/** 添加面板的函数 */
		var addTab = function(title, url){
			/** 判断面板是否存在 */
			var isExists = $("#tab").tabs("exists", title);
			/** isExists是true就代表已经存在，那就选中 */
			if (isExists){
				// select
				$("#tab").tabs("select", title);
			}else{
				$("#tab").tabs("add", {
					title : title, // 标题
					content : "<iframe width='100%' height='100%' src='${path}/"+ url +"' frameborder='0'></iframe>", // 内容
					closable : true // 是否可以关闭
				});
			}
		};
	</script>
</head>
<body>
	<div id="tab">
	</div>
</body>
</html>

操作树要引入dtree插件（百度即可）

第一步：把dtree文件夹引入到Web-Root下的自定义的js文件夹中

第二步：在jsp页面配置dtree的路径还有jquery的路径，注意，这里没有演示操作树的代码实现，只演示点击按钮刷新左侧栏操作树的功能。

第三步：写代码实现功能

/** 为添加操作按钮绑定点击事件 */
			$("#addModule").click(function(){
				/** 显示添加操作的对话窗口 */
				$("#divDialog").dialog({
					title : "添加操作", // 标题
					width : 385,  // 宽度
					height : 235, // 高度
					collapsible : true, // 可伸缩
					minimizable : true, // 最小化
					maximizable : true,  // 最大化
					modal : true, // 模态窗口
					<span style="background-color: rgb(255, 0, 0);">onClose : function(){ // 监听是否关闭当前窗口
						/** 刷新左边的操作树 */
						parent.moduleLeftFrame.location.reload();
						window.location.href = "${path}/admin/identity/selectModule.jspx?pageModel.pageIndex=${pageModel.pageIndex}&parentCode=${parentCode}";
					}</span>
				});
				$("#iframe").prop("src", "${path}/admin/identity/showAddModule.jspx?parentCode=${parentCode}").show();
			});

<!-- 把div作为弹出窗口 -->
	<div id="divDialog" style="overflow: hidden;">
		<iframe width="100%" height="100%" style="display:none;" frameborder="0" id="iframe"></iframe>
	</div>

jeo_chow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击选项卡刷新面板或者刷新操作树

弹出选项卡要引入easyui插件（百度即可）。第一步：把jqeasyui文件夹引入到Web-Root下的自定义的js文件夹中第二步：在jsp页面配置easyui的路径还有jquery的路径第三步：写代码办公管理系统 html, body { width
复制链接

扫一扫

专栏目录