easyui 快速入门之第二章 Tree前端工作

渊婉

于 2022-05-05 17:14:30 发布

阅读量219

点赞数 1

文章标签： eclipse java tomcat html

本文链接：https://blog.csdn.net/qq_61313896/article/details/124593152

版权

本文介绍了Web前端的一些关键技术点，包括全局路径设置、页面缓存控制、接口测试工具Postman的使用。接着详细讲解了tree组件的实现方式和数据格式，展示了如何创建和操作选项卡。同时，给出了一个综合案例，展示了如何在实际项目中结合这些技术构建一个具有导航树和选项卡的页面布局。

摘要由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">

③：postman使用

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

二：tree组件

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

使用案例：

<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>

树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

<ul id="tt"></ul>

$('#tt').tree({    
    url:'tree_data.json'   
});

树控件数据格式化：JSON

每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。

[{    
    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]

三：选项卡

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

使用案例

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创建选项卡

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

$('#tt').tabs({    
    border:false,    
    onSelect:function(title){    
        alert(title+' is selected');    
    }    
});

添加新的选项卡面板

添加一个新的包含小工具菜单的选项卡面板，小工具菜单图标(8x8)被放置在关闭按钮之前。

// add a new tab panel    
$('#tt').tabs('add',{    
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{    
        iconCls:'icon-mini-refresh',    
        handler:function(){    
            alert('refresh');    
        }    
    }]    
});

获取选择的选项卡

// get the selected tab panel and its tab object    
var pp = $('#tt').tabs('getSelected');    
var tab = pp.panel('options').tab;    // the corresponding tab object

案例：综合使用

<%@ 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: 100px;">
			<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>