easyui(tree前端工作)

最新推荐文章于 2024-08-24 11:46:12 发布
最新推荐文章于 2024-08-24 11:46:12 发布
阅读量95 收藏
点赞数
分类专栏： JAVA 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68332494/article/details/124607825
版权

EasyUI 树形菜单 选项卡 AJAX 双击事件
关键词由CSDN通过智能技术生成

 案例的使用：

 案例的引入

公共页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入页面 包含 -->
<%@ include file="commom/head.jsp"  %>
<!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>
<script type="text/javascript">
   //页面载入函数
     $(function(){
    	 //加载数的数据 ajax
    	 $('#myTree').tree({    
    		    url:'data/tree_data1.json', //请求地址  servlet
    		animate:true,//节点显示动画效果
    		onDblClick: function(node){//节点=对象
    			//alert(node.text);  // 在用户双击的时候提示
    		//alert(node.iconCls);
    			//判断是否是子节点
    		//拿到的是所有的后代节点集合
    	 var nodes=$('#myTree').tree('getChildren',node.target);
    		//alert(nodes.length);
    			//判断选项卡是否存在
    		
    		if(nodes.length==0){//说明没有子节点
    			var f=$('#myTab').tabs('exists',node.text);
    			if(!f){//说明不存在
    				//就新增一个选项卡
    				$('#myTab').tabs('add',{   // iconCls:'icon-mini-refresh',  
        			    title:node.text,    //标题
        			    content:node.text,    //内容
        			    closable:true   //是否可用关闭
        			 // iconCls:node.iconCls//图标
        			});  
    			}
    			else{//说明存在就让其对应选中
    				$('#myTab').tabs('select',node.text);
    			}
    		}
    		

    		}

    	 });  
     })
   
</script>

</head>
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:85px;text-align:center;">
       <h1>书籍后台管理</h1>
    
    </div>   
    <div data-options="region:'south',split:true" style="height:68px;text-align:center;">
          <h4>&copy;沉山工作室版权所有,维权使用必究</h4>
    </div>   
    <div data-options="region:'west',title:'功能导航',split:true" style="width:150px;">
    
    <!-- 左侧tree控件 -->
       <ul id="myTree" class="easyui-tree"></ul>  

    
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#fff;">
      
      <!-- 中间的tabs控件 -->
       <div id="myTab" class="easyui-tabs" style="width:100%;height:100%;">   
    <div data-options=" iconCls:'icon-bullet-home'" title="首页" style="padding:10px;display:none;">   
      <img src="images/1.jpg" style="width:100%;height:100%;"/>
    </div>   
    </div>  
       
    </div>   
</body>  

</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入页面 包含 -->
<%@ include file="commom/head.jsp"  %>
<!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>
<script type="text/javascript">
   //页面载入函数
     $(function(){
    	 //加载数的数据 ajax
    	 $('#myTree').tree({    
    		    url:'data/tree_data1.json', //请求地址  servlet
    		animate:true,//节点显示动画效果
    		onDblClick: function(node){//节点=对象
    			//alert(node.text);  // 在用户双击的时候提示
    		//alert(node.iconCls);
    			//判断是否是子节点
    		//拿到的是所有的后代节点集合
    	 var nodes=$('#myTree').tree('getChildren',node.target);
    		//alert(nodes.length);
    			//判断选项卡是否存在
    		
    		if(nodes.length==0){//说明没有子节点
    			var f=$('#myTab').tabs('exists',node.text);
    			if(!f){//说明不存在
    				//就新增一个选项卡
    				$('#myTab').tabs('add',{   // iconCls:'icon-mini-refresh',  
        			    title:node.text,    //标题
        			    content:node.text,    //内容
        			    closable:true   //是否可用关闭
        			 // iconCls:node.iconCls//图标
        			});  
    			}
    			else{//说明存在就让其对应选中
    				$('#myTab').tabs('select',node.text);
    			}
    		}
    		

    		}

    	 });  
     })
   
</script>

</head>
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:85px;text-align:center;">
       <h1>书籍后台管理</h1>
    
    </div>   
    <div data-options="region:'south',split:true" style="height:68px;text-align:center;">
          <h4>&copy;沉山工作室版权所有,维权使用必究</h4>
    </div>   
    <div data-options="region:'west',title:'功能导航',split:true" style="width:150px;">
    
    <!-- 左侧tree控件 -->
       <ul id="myTree" class="easyui-tree"></ul>  

    
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#fff;">
      
      <!-- 中间的tabs控件 -->
       <div id="myTab" class="easyui-tabs" style="width:100%;height:100%;">   
    <div data-options=" iconCls:'icon-bullet-home'" title="首页" style="padding:10px;display:none;">   
      <img src="images/1.jpg" style="width:100%;height:100%;"/>
    </div>   
    </div>  
       
    </div>   
</body>  

</html>

主界面

[{
	"id":1,
	"text":"My Documents",
	"iconCls":"icon-heart",
	"children":[{
		"id":11,
		"text":"Photos",
		"children":[{
			"id":111,
			"iconCls":"icon-cart",
			"text":"Friend"
		},{
			"id":112,
			"iconCls":"icon-heart",
			"text":"Wife"
		},{
			"id":113,
			"iconCls":"icon-heart",
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"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"
	}]
}]

tree的代码使用

运行的界面展示

 

习惯过了头121
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI【Tree前端工作】
m0_64522859的博客
05-07 575
1.全局path定义 base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面 <base href = "${pageContext.request.servletContext.contextPath}/static/"> var globalPath = "${pageContext.request.servletContext.contextPath}"; 2.页面缓存 <meta htt...
easyui.Tree前端工作
weixin_63944861的博客
04-07 204
目录一、树控件的使用 借助文档，建立界面 二、动态tab 双击获取界面 easyui.Tree前后端工作 一、项目搭建 二、树形表结构 三、创建模型 四、dao方法实现 五、service层开发 六、前端页面 easyui.Tree前端工作一、树控件的使用 代码如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE..
easyui ：tree前端工作
emmhao的博客
04-07 393
easyui 素材： jQuery EasyUI 1.5API 中文版 如题今天会用到的是：树形结构的 我们只需要找到自己需要的然后放到代码处即可 这个是动态效果要用到的 再写树控件之前先把这两个放进项目中，没有他们那么就运行不了哦 然后就是将代码放入浏览器打开就会使这个效果，当然上面的那个代码会比较繁琐，树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。 <ulid="tt"></ul> $('#tt').tree({...
easyui（Tree前端工作）
jh9758的博客
05-05 94
一、全局path定义 base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面 <%@ 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/...
easyui tree前端编写
weixin_45576466的博客
06-24 177
tree前端编写一、web层代码编写二、页面tree组件展示1、dao层代码编写2、mvc.xml 配置3、index.js 修改三 、结果图四、总结 接上篇博客：easyui tree后端编写 一、web层代码编写 package com.chendongyang.web; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpSer
easyui_02(tree前端工作)
qq_65716482的博客
05-06 579
一、思维导图： 二、tree控件的使用： 1、树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据 2、每个节点都具备以下属性： id：节点ID，对加载远程数据很重要。 text：显示节点文本。 state：节点状态，'open'或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。 checked：表示该节点是否被选中。 attributes: 被添加到节点的自定义属性。 .
Easyui（Tree前端工作）
Bugxiu_fu的博客
05-15 278
树型菜单与添加选项卡功能
easyui(Tree前端工作）
weixin_64549900的博客
05-14 167
实现树形菜单 <body class="easyui-layout" data-options="fit:true" > <div data-options="fit:true" id="cc" class="easyui-layout"> <div data-options="region:'north',title:'后台管理系统',split:true" style="height: 100px;"></div> <div ..
easyui之tree前端实现
xyy_0517的博客
09-13 250
一，tree 树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能 2、树的数据格式 [{ "id":1, "text":"My Documents", "children":[{ "id":11, "text":"Photos", "state":"closed", "children":[{ "id":111, "text":"Friend" },{ "id":112, "text":...
jQuery EasyUI tree 使用拖拽时遇到的错误小结
10-21
jQuery EasyUI是一个基于jQuery的前端框架，它提供了一系列用户界面组件，例如对话框、表格、菜单、树形控件等，以帮助开发者更快地构建Web界面。其中tree组件用于展示层级化的数据，常用于显示组织结构、文件夹目录...
EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例
10-26
该实现方式利用了前端框架EasyUI提供的Tree控件和***的后台处理能力。 知识点一：EasyUI Tree控件 EasyUI是一个基于jQuery的前端UI库，它提供了一套轻量级的UI组件，包括Tree控件。Tree控件可以用来显示树状结构的...
Easyui Tree获取当前选择节点的所有顶级父节点
08-31
Easyui Tree是一款基于jQuery的前端组件，用于创建交互式的树形结构。在开发过程中，有时我们需要获取用户当前选择的节点，并且需要得到这个节点的所有顶级父节点，以便于进行数据处理或者展示路径。本文将详细讲解...
EasyUI Tree Combotree 模糊搜索
06-01
EasyUI Tree Combotree 的模糊所搜
easyui tree
06-26
EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，帮助开发者快速构建用户界面。在 EasyUI 中，"Tree" 是一个重要的组件，常用于展示层级结构的数据，如组织架构、文件目录等。本例子是关于如何...
【js】各类前端输入校验方法
galaxyJING的博客
08-21 353
【代码】【js】各类前端输入校验方法。
浅谈JavaScript 框架在现代 Web 开发中的作用
08-21 520
随着近年来 Web 开发的快速发展，JavaScript 框架已成为用于构建任何应用程序的强大、灵活和可扩展元素的重要实用程序。一些框架，如Angular、React、Vue.JS等，有助于以系统的方式处理固有的网站开发复杂性，以提高效率。它们提供已经为基本编程功能和常规任务编写的 JavaScript 代码，从而缩短了必要的原始编码时间。此外，它们还增加了 Web 应用程序的功能和交互性，从...
【IC前端虚拟项目】用例的完善与补充
moon9999的博客
08-20 95
当然只不过是参考，个人不建议在寄存器测试这个环节投入太多的经历，也没有必要非在环境中讲寄存器模型以seq方式呈现，只要用起来方便就是最合适的。如果之后在实际的项目中寄存器模型时通过seq的方式集成到环境中的（比如我现在负责的项目，验证环境就是如此），那么转换过来也是没有什么难度的，这点大可放心。此外，在组织更多随机用例的过程中可以练习多种不同约束的transaction以不同的比例关系通过同一个seq/sqr uvm_do的操作。好了，具体的用例大家可以参考我的代码，尽量以自己的思路来进行扩充。
前端宝典十六：深入浅出8大设计模式
最新发布
franktaoge的博客
08-24 662
本文主要探讨前端开发中的各种设计模式，主要分类有： - 单例模式 - 建造者模式 - 代理模式 - 装饰器模式 - 适配器模式 - 策略模式 - 观察者模式 - 发布订阅模式 通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：
easyui tree java
08-15
而tree是easyui中的一个树状组件，用于展示层级关系的数据。 在使用easyui tree进行java开发时，我们首先需要引入easyui的相关依赖包，并在页面中引入相应的脚本和样式文件。然后，我们可以通过在页面中定义一个div...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值