jQuery EasyUI快速入门02

最新推荐文章于 2022-12-28 15:58:51 发布

ning_ning_03

最新推荐文章于 2022-12-28 15:58:51 发布

阅读量526

点赞数 2

文章标签： jquery easyui 前端

本文链接：https://blog.csdn.net/m0_67768699/article/details/124586414

版权

一、全局path定义

base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面

同时在全局变量类中利用script标签定义绝对路径

    <base href = "${pageContext.request.servletContext.contextPath}/static/">    

   <script>
    var xPath = "${pageContext.request.servletContext.contextPath}";
   </script>

完整的全局变量定义

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<base href="${pageContext.request.servletContext.contextPath}/static/">
<!-- 引入EasyUI的css依赖 -->
<link rel="stylesheet"
	href="js/jquery-easyui-1.8.6/themes/black/easyui.css">
<!-- 引入EasyUI的图标依赖 -->
<link rel="stylesheet" href="js/jquery-easyui-1.8.6/themes/icon.css">
<!-- 引入EasyUI的相关JS依赖 -->
<script type="text/javascript"
	src="js/jquery-easyui-1.8.6/jquery.min.js"></script>
<script type="text/javascript"
	src="js/jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="js/jquery-easyui-1.8.6/locale/easyui-lang-zh_CN.js"></script>
<!-- 定义常量 -->
<script>
    var xPath = "${pageContext.request.servletContext.contextPath}";
</script>

二、页面缓存

① 首先打开Eclipse

② 点击菜单栏中的Window

③ 再点击Preferences

④ 搜素jsp 点击Templates

⑤ 找到New JSP File(html)

⑥ 双击然后添加下列代码

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">

三、tree组件实现JSON数据绑定

① 在Eclipse中下载json

② 建立json文件

③ 编写json代码：

[{
   "id":"-1",
   "text":"首页管理"
},{
   "id":"-1",
   "text":"用户管理"
},{
   "id":"-1",
   "text":"书籍管理",
   "children":[{
    "id":"11",
   "text":"查询书籍"
   },{
    "id":"22",
   "text":"修改书籍"
   },{
    "id":"33",
   "text":"增加书籍"
   }, {
    "id":"44",
   "text":"删除书籍"
   }]
},{
   "id":"-1",
   "text":"订单管理"
}]

④ 利用js的方式实现json的数据绑定

     $(function() {
		$('#mytree').tree({    
		    url:xPath+'/static/json/list.json', 
		}); 
	});

四、动态添加选项卡

（1）主界面的分类不需要出现新的选项卡

（2）同一个分类点击多次只能出现一次

（3）点击分类时选项卡的标题显示为分类标题

	<script type="text/javascript">
			$(function() {
				$('#mytree').tree({    
				    url:xPath+'/static/json/list.json',
				    onClick:function(node){
				    	addMyTabs(node);
				    }
				}); 
			});
			function addMyTabs(node) {
				if(node.id === '-1'){
					return;
				}
             //判断选项卡是否存在选中
				var flag = $("#maintabs").tabs('exists',node.text);
				if(flag){
					$("#maintabs").tabs('select',node.text);
					return;
				}
            // 添加一个未选中状态的选项卡面板
				$("#maintabs").tabs('add',{
					title: node.text,
		    		content:node.text,
		    		closable:true,  
				})
			}	
			</script>

五、完整的菜单栏和选项卡页面显示

（1）引入全局变量类

（2）增加布局

（3）完成菜单栏

（4）动态添加选项卡

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="static/common/easyuibase.jsp"%>
</head>
<body>
	<div id="cc" class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north',title:'首页头部',split:true"
			style="height: 100px;"></div>
		<div data-options="region:'south',title:'版权信息',split:true"
			style="height: 100px;"></div>
		<div data-options="region:'west',title:'菜单栏',split:true"
			style="width: 170px;">
			<div id="mytree" class="easyui-accordion"
				style="width: 300px; height: 200px;"></div>
			<script type="text/javascript">
			$(function() {
				$('#mytree').tree({    
				    url:xPath+'/static/json/list.json',
				    onClick:function(node){
				    	addMyTabs(node);
				    }
				    
				}); 
			});			
			function addMyTabs(node) {
				if(node.id === '-1'){
					return;
				}
				var flag = $("#maintabs").tabs('exists',node.text);
				if(flag){
					$("#maintabs").tabs('select',node.text);
					return;
				}
				$("#maintabs").tabs('add',{
					title: node.text,
		    		content:node.text,
		    		closable:true,  
				})
			}			
			</script>
		</div>
		<div data-options="region:'center',title:'内容'"
			style="padding: 5px; background: #eee;">
			<div id="maintabs" class="easyui-tabs" data-options="fit:true">
			</div>
		</div>
	</div>
</body>
</html>