easyui之tree、tabs前端实现

最新推荐文章于 2024-08-02 17:23:07 发布
最新推荐文章于 2024-08-02 17:23:07 发布
阅读量176 收藏
点赞数
分类专栏： easyui 文章标签： easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxy15974062965/article/details/120230768
版权

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

2、使用
方式一：
树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中.（①样式缺陷②不好做数据的渲染，树形结构的动态显示）

1. <ul id="tt" class="easyui-tree">  
2.   <li>  
3.     <span>Folder</span>  
4.     <ul>  
5.       <li>  
6.         <span>Sub Folder 1</span>  
7.         <ul>  
8.           <li>  
9.             <span><a href="#">File 11</a></span>  
10.           </li>  
11.           <li>  
12.             <span>File 12</span>  
13.           </li>  
14.           <li>  
15.             <span>File 13</span>  
16.           </li>  
17.         </ul>  
18.       </li>  
19.       <li>  
20.         <span>File 2</span>  
21.       </li>  
22.       <li>  
23.         <span>File 3</span>  
24.       </li>  
25.     </ul>  
26.   </li>  
27.   <li>  
28.     <span>File21</span>  
29.   </li>  
30. </ul>

 方式二：

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

导入tree_data1.json到WebContent目录下

界面： 

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

index.js:

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

效果图：

二、Tabs（选项卡）


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>

三、实例


1、需求

1、点击左侧显示右侧Tab

1.1、给菜单添加点击事件

1.2、调用tabs选项卡打开对应的界面

选项卡打开

选项卡对应界面显示

1.3、新建对应的打开界面

2、不能打开重复的 Tab

拿到目前所有打开的TABS选项卡，与将要打开的选项卡做对比（exists）

存在 true:不打开

存在 false:打开

3、对于已经存在的Tab选项，被点击时应该默认被选中\

4、点击菜单，能够访问对应的界面，而非文字内容

 2、代码展示

index.jsp界面（展示界面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>书籍后管主界面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/black/easyui.css"">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>  
</head>
 
<body 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:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>    -->
    <div data-options="region:'west',title:'菜单管理',split:true" style="width:200px;">
   
   <ui id="stuMenu"></ui>
   
    </div>  
     
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;">
    <div id="stuTabs" class="easyui-tabs" style="width:100%;height:100%;">   
    
</div>  
    </div>   
</body> 
</html>

index.js界面（给index.jsp添加事件）

$(function(){
	/**
	 * $.ajax无刷新     $.hello
	 * $.exrtends("hello",function(){
	 * alert("hello");
	 * })
	 * $.hello();
	 * 1、tree方法时通过$.extends()拓展出来的
	 * 2、tree方法做的事情
	 * $('#tt').append(" <li>   
     *  <span>File21</span>   
     * </li>")
     *    .append(" <li>   
     *  <span>File21</span>   
     * </li>")
     * 
     * 需求：
     * 1、点击左侧显示右侧Tab
     *   1.1、给菜单添加点击事件
     *   1.2、调用tabs选项卡打开对应的界面
     *       选项卡打开
     *       选项卡对应界面显示
     *   1.3、新建对应的打开界面
     * 2、不能打开重复的 Tab 
     *   拿到目前所有打开的TABS选项卡，与将要打开的选项卡做对比（exists）
     *   存在 true:不打开
     *    存在 false:打开
     * 3、对于已经存在的Tab选项，被点击时应该默认被选中
     * 4、点击菜单，能够访问对应的界面，而非文字内容
     *    
	 */
	$('#stuMenu').tree({    
	    url:'tree_data1.json',
	    onClick:function(node){
//	    	alert(node.text);//在用户电机的时候提示
//	    	判断当前将要打开的选项卡是否存在
	    	var exists=$('#stuTabs').tabs('exists',node.text);
//	    	alert(node.attributes.url);
	    	if(exists){
//	    		对于已经存在的Tab选项，被点击时应该默认被选中
	    		$('#stuTabs').tabs('select',node.text);	
	    	}else{
//	    		jframe   打开存在的Tab
	    		$('#stuTabs').tabs('add',{    
	    			title:node.text,    
	    			content:'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>',    
	    			closable:true,    
	    			tools:[{    
	    				iconCls:'icon-mini-refresh',    
	    				handler:function(){    
	    					alert('refresh');    
	    				}    
	    			}]    
	    		});  
	    	}
	    }
	    
	});  
 
})

2、树的数据格式   （tree_data1.json）

每个节点可以包括下列属性：

①id：节点的 id，它对于加载远程数据很重要。

②text：要显示的节点文本。

③state：节点状态，'open' 或 'closed'，默认是 'open'。当设置为 'closed' 时，该节点有子节点，并且将从远程站点加载它们。

④checked：指示节点是否被选中。

⑤attributes：给一个节点添加的自定义属性。

⑥children：定义了一些子节点的节点数组。

 [{
 "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",
   "attributes":{
    "url":"demo1.jsp",
    "p2":"Custom Attribute2"
   }
  },{
   "id":122,
   "text":"Java",
   "attributes":{
    "url":"demo2.jsp",
    "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"
 }]
}]

 项目结构：

 3、展示效果

小滦不秃头‍♂️
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI之tree与tabs的前端实现
m0_58525944的博客
09-10 279
目标：利用tree与tabs来实现前端 一，制作树形菜单（打开api文件，找到树形控件，写入我们的项目中） 放入菜单区域面板 导入json格式文件 tree_data1.json [{ "id":1, "text":"My Documents", "children":[{ "id":11, "text":"Photos", "state":"closed", "children":[{ "id":111, "text":"Friend" ...
easyui之tree前端实现
xyy_0517的博客
09-13 241
一，tree 树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能 2、树的数据格式 [{ "id":1, "text":"My Documents", "children":[{ "id":11, "text":"Photos", "state":"closed", "children":[{ "id":111, "text":"Friend" },{ "id":112, "text":...
easyUI之tree前端实现
qiqiyuer的博客
04-19 581
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题转存中…(img-i15YtQdE-1713481704767)]
easyUI之tree前端实现(1)
java_dazhuzhu的博客
04-28 739
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】基础知识+项目经验+表达技巧+运气。
Easyui tree tabs前端
weixin_63667859的博客
05-06 137
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。 每个节点都具备以下属性： id：节点ID，对加载远程数据很重要。 text：显示节点文本。 state：节点状态，'open'或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。 checked：表示该节点是否被选中。 attributes: 被添加到节点的自定义属性。 children: 一个节点数..
EasyUi的tree（树）前端实现
weixin_56069070的博客
09-10 333
前言：给大家讲解tree前端实现 码字不易，点个关注 转载请说明！ 开发工具:eclipse 接着我上篇博客讲： 复制粘贴easyui的demo中tree的tree_data1.json到WebContent文件夹下 [{ "id":1, "text":"My Documents", "children":[{ "id":11, "text":"Photos", "state":"closed", "children":[{ "id":111, "text":
easyUI之tree前端实现，网站前端开发
2401_84093860的博客
04-03 978
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。不完的，最重要的是活着、不秃。
EasyUI【Tree前端工作】
m0_64522859的博客
05-07 567
1.全局path定义 base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面 <base href = "${pageContext.request.servletContext.contextPath}/static/"> var globalPath = "${pageContext.request.servletContext.contextPath}"; 2.页面缓存 <meta htt...
easyui中的tree&tabs&图标
weixin_63719049的博客
05-05 430
easyui中的tree&tabs&图标
EasyUI.pdf_前端学习资料
09-01
EasyUI 支持 HTML5，允许对 HTML 标签进行增强，并提供丰富的组件库，如 Layout、Window、Tabs、Dialog、Messager、DataGrid、Tree、Form、Validate、Button等，极大地简化了网页开发的过程。 使用 EasyUI 的步骤...
【ASP.NET编程知识】EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例.docx
05-20
首先，EasyUI是一个基于jQuery的UI库，提供了丰富的前端组件，包括Tree组件，它允许开发者创建具有层级结构的展示，非常适合用于权限管理或者目录结构的展示。在HTML部分，可以看到引入了EasyUI的相关CSS和...
jquery-easyui 前端开发框架
06-26
`jQuery EasyUI` 是一个基于 jQuery 的前端开发框架，它为开发者提供了丰富的组件和便捷的API，使得构建交互式Web应用变得更加简单。这个框架主要针对界面设计和用户体验优化，简化了HTML、CSS和JavaScript的复杂性...
jQuery Easyui实现左右布局
10-22
jQuery EasyUI 是一个轻量级且功能丰富的前端框架，它基于 jQuery 库，提供了一系列的用户界面组件，如对话框、表单、菜单、布局等，帮助开发者快速构建交互式的 Web 应用程序。EasyUI 的核心优势在于其简化了 HTML ...
EasyUI V1.10.15 源码未压缩混肴
02-21
EasyUI 是一个基于 jQuery 的前端框架，主要用于简化网页界面开发，提供了一系列的 UI 组件，如表格、下拉框、对话框、按钮等。V1.10.15 是 EasyUI 的一个版本号，表明这是一个经过多次迭代优化后的稳定版本。"源码...
将后台传来的数据，转成easyui-tree所需格式
peppa_pig的博客
08-02 157
EasyUI Tree组件需要一个包含特定属性（如。而后台返回的数据，它可能不是我们直接能拿来用的。等）的JSON对象数组来初始化。
鹈鹕算法POA-Kmean-Transformer-LSTM组合状态识别分类【含Matlab源码 6749期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-lstm分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-lstm分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-lstm分类 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-lstm分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-lstm分类 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-lstm分类 4.4.6 其他优化算法优化Kmeans-Transformer-Lstm分类
三角测量拓扑聚合器TTAO-Kmean-Transformer-BiLSTM负荷预测【含Matlab源码 6686期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-Bilstm预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-Bilstm预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-Bilstm预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-Bilstm预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-Bilstm预测 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-Bilstm预测 4.4.6 其他优化算法优化Kmeans-Transformer-Bilstm预测
S9300X-V200R021C00SPC100-MPUE主控版本
最新发布
08-02
S9300X-V200R021C00SPC100-MPUE主控版本，支持S9300X-4/8/12
EasyUI前端开发实战指南
"这篇文档是关于EasyUI前端开发的教程，涵盖了EasyUI中的多个组件，如Accordion、DateBox、ComboBox、Dialog、Messager、NumberBox、ValidateBox、Pagination、Window、Panel、Tabs、Tree、Layout和Datagrid。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值