java之easyUI前台工作

最新推荐文章于 2023-11-21 13:22:01 发布

卡特琳同志

最新推荐文章于 2023-11-21 13:22:01 发布

阅读量170

点赞数

分类专栏： easyUI 文章标签： easyui java javascript

本文链接：https://blog.csdn.net/m0_62528678/article/details/124593393

版权

easyUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、 tree控件的使用

二、 tabs控件的使用

三、 easyui图标的使用

源码展示：index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 引入公共页面 -->
<%@ include file="common/head.jsp"%>
<!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>Insert title here</title>

<script type="text/javascript">
	$(function() {
		$('#mytree').tree({
			url : con + '/data/tree_data1.json',//请求地址
			animate : true,//折叠或者展开的时候是否展示动画效果
			onDblClick : function(node) {
				//alert(node.text + "" + node.id); // 在用户双击点击的时候提示
				
				//拿到对应的后代节点的集合
				var cs = $('#mytree').tree('getChildren',node.target);
				if(cs.length==0){//没有后代节点
				//判断是否存在
				var f = $('#myTab').tabs('exists',node.text);
					
				if(!f){//不存在
						$('#myTab').tabs('add', {
							title :node.text,//标题
							content : node.text,//内容
							closable : true,//是否可关闭
							iconCls:'icon-ok'
						});
					}
				else{
					$('#myTab').tabs('select',node.text);
				}
				
				}

			}

		});
	})
</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',split:true"
		style="height: 80px; text-align: center">
		<h1>书籍管理后台</h1>
	</div>
	<div data-options="region:'south',split:true"
		style="height: 100px; text-align: center">
		<b>&copy;玉渊工作室,未经允许不可随意使用</b>
	</div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 200px;">
		<!--左侧tree控件  -->
		<ul id="mytree" class="easyui-tree">

		</ul>

	</div>
	<div data-options="region:'center'"
		style="padding: 5px; background: #eee;">
		<!-- 中间的tab键 -->
		<div id="myTab" class="easyui-tabs" style="width: 100%; height: 100%;">
			<div data-options="iconCls:'icon-mini-refresh'" title="首页" style="padding: 20px; display: none;">
				<img src="img/3.jpg" width="100%" heigh="100px">
			</div>
		</div>

	</div>
</body>
</html>

head.java(公共的库)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path=request.getContextPath();
	//System.out.print(path);//	/easyui01
	request.setAttribute("con", path);
%>
<script type="text/javascript">
	var con='${con}';
</script>
<!-- 引入easy的css -->
<link type="text/css" href="${con }/js/jquery-easyui-1.5.5.2/themes/default/easyui.css" rel="stylesheet" />
<!-- 引入easyui的图标库 -->
<link type="text/css" href="${con }/js/jquery-easyui-1.5.5.2/themes/icon.css" rel="stylesheet" />
<!-- 引入jQuery类库 -->
<script type="text/javascript" src="${con }/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!-- 引入easyui类库 -->
<script type="text/javascript" src="${con }/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!-- 引入easyui的语言包  支持中文 -->
<script type="text/javascript" src="${con }/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<!-- 页面缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

tree_data1.json

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

卡特琳同志

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java之easyUI前台工作

一、 tree控件的使用二、 tabs控件的使用三、 easyui图标的使用源码展示：index.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="common/head.jsp"%><!DOCTYPE html PUBLIC "-//W3C//DT
复制链接

扫一扫