easyui-02（Tree前端工作）

最新推荐文章于 2024-11-04 22:26:34 发布

huangᴸ

最新推荐文章于 2024-11-04 22:26:34 发布

阅读量721

点赞数

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

本文链接：https://blog.csdn.net/m0_63579794/article/details/124593905

版权

java 同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

easyui

6 篇文章 0 订阅

订阅专栏

本文介绍了前端开发中全局路径配置、页面缓存设置以及资源的引入。通过`<base>`标签确保静态资源路径正确，使用HTTP头禁用缓存，以保证页面实时更新。同时展示了HTML结构，包括EasyUI布局、菜单树和选项卡的实现，通过JavaScript动态加载数据并创建选项卡。此案例详细解释了前端如何管理和组织页面内容。

摘要由CSDN通过智能技术生成

一.全局path定义

base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面
<base href = "${pageContext.request.servletContext.contextPath}/static/">

var globalPath = "${pageContext.request.servletContext.contextPath}";

二.页面缓存

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

三.案例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <!-- 通过include指令引入公共资源 -->
    <%@ include file="/static/common/easyui-link.jsp" %>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
   console.log(xPath);
</script>
</head>
<body>

<div id="cc" data-options="fit:true" class="easyui-layout" ">   
    <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:180px;">
      <ul id="menuTree">
      
      </ul>
    </div>   
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;">
    <div data-options="fit:true" id="myTabs" class="easyui-tabs" style="width:500px;height:250px;">   
        
        
    </div>  
    </div>   
</div>  

   <script type="text/javascript">
     //加载函数
     $(function () {
		//实现对属性菜单进行数据绑定
		$("#menuTree").tree({
			url:xPath+'/static/data/tree_data.json',
			//设置点击事件,当点击菜单选项时,右侧会根据需求弹出指定的选项卡以及内容
			onDblClick:function(node){//node指的是节点对象
				/* console.log(node.text) */
				 addMyTabs(node);
			} 
		});
		
	});
     
     //封装一个新增选项卡的方法
     function addMyTabs(node){
    	 //当点击一级菜单是 无选项卡出现
    	 if(node.id === "-1"){
    		 return;
    	 }
    	 //解决重复选项卡
    	 //通过exists判断选项卡是否存在
    	 let flag=$('#myTabs').tabs('exists',node.text);
    	 if(flag === true){
    		 $('#myTabs').tabs('select',node.text);
    		 return;
    	 }
    	 $('#myTabs').tabs('add',{
    		//选项卡的标题
    		title:node.text,
    		//选项卡的内容
    		content:node.text,
    		//选项卡的关闭按钮
    		closable:true
    	 });
     };
     
   </script>


</body>
</html>