easyui-02（Tree前端工作）

小鱼u

于 2022-05-14 19:26:58 发布

阅读量101

点赞数

文章标签：前端 easyui javascript

本文链接：https://blog.csdn.net/weixin_66277116/article/details/124772624

版权

1.全局path定义

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

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

2.页面缓存

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

3.postman使用

接口测试工具；postman发送请求给服务器，然后从服务器接受响应，最后在postman中展示出来。

4.tree组件实现JSON数据绑定

标签实现——不推荐
JSON实现
   $('#tt').tree({
       url:'tree_data.json'
   });

案例：

1.通过标签创建选项卡

不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>

2. 通过Javascript创建选项卡

当该选项卡被选择时将会触发'onSelect'事件。

$('#tt').tabs({

border:false,

onSelect:function(title){

alert(title+' is selected');

}

});

获取选择的选项卡

var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab;

解决页面缓存问题

<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"%>
<!--  2.页面缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<!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>
<%@include file="static/common/easyui-link.jsp"%>
</head>
<body>
	<div data-options="fit:'true'" id="cc" 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: 200px;">
			<!-- 树形菜单 -->
			<ul id="trees">

			</ul>
			<script type="text/javascript">
    	$(function(){
    		$("#trees").tree({
    			url:xPath+"/static/data/tree_data1.json",
    			onClick:function(node){
    				
    				addTabs(node);
    			}
    		});
    		
    	})
    	function addTabs(node){
    		let flag=$("#tt").tabs('exists',node.text);
				if(node.children!=null){
					return;
				}
				
				if(flag){
					$("#tt").tabs('select',node.text);
					return;
				}
    		
    		$("#tt").tabs('add',{
				//设置选项卡标题
				title:node.text,
				//设置关闭按钮
				closable:true,
				//设置内容
				content:"<h1>零零零零</h1>"
			});
    	}
    </script>
		</div>
		<div data-options="region:'center',title:'内容区域'"
			style="padding: 5px; background: #eee;">
			<!-- 面板 -->

			<div id="jpa" class="easyui-panel" style="background: #fafafa; padding: 0px; margin: 0px"
				data-options="fit:'true',collapsible:true,minimizable:true,maximizable:true">
				<div data-options="fit:'true'" id="tt" class="easyui-tabs" style="width: 500px; height: 250px;">
					
					
				</div>
			</div>

		</div>
	</div>

</body>
</html>