Tree（树）

最新推荐文章于 2024-05-23 18:02:07 发布
最新推荐文章于 2024-05-23 18:02:07 发布
阅读量337 收藏
点赞数
分类专栏： easyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Mythology_px/article/details/83033955
版权

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

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>树控件使用ul元素定义</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
  
  <body>
  	<!-- 树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。 -->
	<ul id="tt" class="easyui-tree">   
	    <li>   
	        <span>人事管理</span>   
	        <ul>
	        	<li>考勤</li>
	        	<li>招聘</li>
	        </ul>
	    </li>
	    <li>   
	        <span>学生管理</span>   
	        <ul>
	        	<li>考勤</li>
	        	<li>档案管理</li>
	        	<li>日常管理</li>
	        </ul>
	    </li>   
	</ul>  
  </body>
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>树控件也可以定义在一个空ul元素中并使用Javascript加载数据</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
  	<script type="text/javascript">
  		/*
  			节点属性
  			id：节点ID，对加载远程数据很重要。
			text：显示节点文本。
			state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
			checked：表示该节点是否被选中。
			attributes: 被添加到节点的自定义属性。
			children: 一个节点数组声明了若干节点
  		*/
  		$(function(){
			$('#tt').tree({
				// 读取JSON   
			    url:'tree_data1.json'   
			});
  		});
  	</script>
  
  <body>
	<ul id="tt"></ul>  
  </body>
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  	<head>
	    <title>树控件从后台读取平滑json</title>
	    <!-- 引入easyUI:JQuery文件支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
	  	<!-- 引入easyUI -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
	  	<!-- 引入中文支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
	  	<!-- 引入easyUI主题css文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
	  	<!-- 引入easyUI 图标导航文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
	  	<!-- 引入平滑JSON的zhi'ch -->
	  	<script type="text/javascript" src="js/extEasyUI.js"></script>
	  	<script type="text/javascript">
	  		$(function(){
				$('#tt').tree({
					url:"getJSON",
					parentField:"pid", //需要导入插件
					textFiled:"text", //需要导入插件
					idFiled:"id", //需要导入插件
					checkbox:true,
			   		lines:true,
			   		// 为树绑定事件,回调函数都包含node参数,node参数有不同属性
			   		onClick: function(node){
								alert(node.text);  // 在用户点击的时候提示
							}
			   				
				});
	  		});
	  	</script>
	</head>

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

 

1.10树（tree）
Fortuna_i的博客
02-14 813
1.10 树（tree） 1.10.1 决策树（Decision Tree） 首先，Mllib认为，决策树时随机森林（Random Forest）的一种特殊情况，也就是只有一棵树并且不采取特征抽样的随机森林。所以在训练决策树的时候，其实是训练随机森林，最后从随机森林中抽出一棵树。 决策树时一个数结构（可以是二叉树或非二叉树），由节点和有向边组成。决策树学习的本质是从训练数据集上归纳出一组分类...
树（Tree）
蜗牛先生的博客
07-12 1119
树（tree）是n(n>=0)个结点的有限集。n=0时称为空树。在任意一棵非空树中：（1）有且仅有一个特定的称为根（Root）的结点；（2）当 n>1 时，其与结点可分为m( m>0 )个互不相交的有限集，其中每个集合本身又是一棵树，并且称为根的子树（SubTree）。充分利用顺序存储和链式存储结构特点，完全可以实现对树的存储结构的表示。介绍三种不同的表示法：双亲表示法、孩子表示法、孩子兄弟表示法。
【笔记】树(Tree)
最新发布
weixin_73359101的博客
05-23 2020
树（Tree）是一种非线性的数据结构，它是n(n >= 0)个结点组成的一个具有层次关系的有限集。之所以把它叫做树是因为它看起来像一颗倒挂的树，也就是它的根是朝上，而叶子是朝上的。在n=0时称为空树。有且仅有一个特定的称为根(Root)的结点；当n>1时，其余结点可分为m(m > 0)个互不相交的有限集T1、T2、...... 、Tm，其中每一个集合本身又是一棵树，并且称为根的子树(SubTree)。注意：在树型结构中，子树之间不能有交集，否则就不能是树形结构。如果相交了，那就是图。
数据结构——树（Tree）
weixin_41318482的博客
04-07 685
一.树的定义及基本术语 1.树的定义： 树是n(n>=0)个节点的有限集： 有且仅有一个特定的称之为根的节点； 当n>1时，其余节点可分为m(m>0)个互不相交的有限集T1、T2、…、Tn，其中每一个集合本身又是一棵树，并且称为根的子树。 如图所示： 2.基本概念 节点的度：节点拥有的子树数； 叶子节点（终端节点）：度为0的节点； 分支节点：度不为0的节点； 树的度：树内...
js(JavaScript)数据结构之树（Tree）
星辰迷上大海的博客
01-14 3183
树（Tree）是一种常见的数据结构，由节点（Node）和边（Edge）组成。树的节点通过边连接，形成层次结构。树的一个节点可以有多个子节点，但只有一个父节点（除了根节点）。树的一个重要特点是没有环，即任意两个节点之间都有唯一的路径。
EasyUI Tree树组件无限循环的解决方法
08-29
"EasyUI Tree树组件无限循环的解决方法" EasyUI Tree树组件是一种常用的树形结构控件，用于展示层级结构的数据。但是在使用EasyUI Tree树组件时，可能会遇到无限循环的问题，即点击最后一个节点时，会重新加载动态...
iview实现select tree树形下拉框的示例代码
10-17
在前端开发中，IView UI 是一个流行的 Vue.js 组件库，它提供了许多美观且功能丰富的组件，如 Select Tree（树形下拉框），用于在下拉列表中展示层次结构的数据。Select Tree 结合了 Select 组件和 Tree 组件的功能...
layui-tree树形组件改写，可编辑、上移、下移、拖拽修改
04-13
将文件直接复制到layui/lay/modules目录下，会覆盖layui原有的tree.js，调用方法与layui树形组件的适应方式一致，新增的方法可在文件中查看
Vue拿到后端返回的List，渲染出element-tree树结构
01-08
这是我的做法，基本上是搬运官方的办法照葫芦画瓢，我也不知道有没有更好的方法能拿到 tree组件的实例 element-tree 增加节点的方法 如果在模板中定于了 的数据源如下： 那么在当前Vue组件实例中定义并初始化数据...
详解vue-element Tree树形控件填坑路
12-29
通过tree树形控件的default-checked-keys属性来设置默认选中的节点 html.vue 角色权限：> node-key=id check=handleNodeClick default-expanded-keys=[] ref=tree default-checked-keys=default_select ...
jstree json_data异步加载实例
05-17
struts2 jstree json_data实现异步加载 定位
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
11-22
本文支持两种方式的数据，一种为List集合，一种为json字符串。 先来介绍一下后台返回list集合（推荐使用此方法）： 控制器代码如下： public static List<TC> DInfo = new List<TC>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> public ActionResult May(string TypeCode,int parentId) { ViewBag.TypeCode = TypeCo
【数据结构与算法】树(Tree)【详解】
DreamSun的博客
03-25 8966
【知识框架】树是n（n>=0）个结点的有限集。当n = 0时，称为空树。有且仅有一个特定的称为根的结点。当n>1时，其余节点可分为m（m>0）个互不相交的有限集T1,T2,…,Tm，其中每个集合本身又是一棵树，并且称为根的子树。显然，树的定义是递归的，即在树的定义中又用到了自身，树是一种递归的数据结构。树的根结点没有前驱，除根结点外的所有结点有且只有一个前驱。树中所有结点可以有零个或多个后继。因此n个结点的树中有n-1条边。
树(Tree)简介
zxm317122667的专栏
04-18 763
计算机科学中，树(Tree)是将一组被称为结点(Node)的元素按照层次结构的方式组织而成。在这个层次结构最顶端的结点称为根, 与根直接相连的结点称为根的子结点。通常子节点本身也可以拥有...
tree的json的生成方法
TinyForest的博客
01-06 505
前段时间工作中需要使用树，这一点，在前台用ext很好实现，只是这个tree的store的这个json在后台拼写的时候有些费了我的脑筋，下面总结一下，我发现很好用的一个方法： （哦，亲们，这些代码里，数据是从不同数据源获得的，所以在代码里体现了切换数据源的代码，如果你不需要切换数据源，没有必要这个做哦，只需要看sql的组成和返回list就行了。） sql: [code="java"] ...
treegrid加载静态json文件数据失败
沧海一粟
07-15 314
$("#treeId").treegrid({ method: 'get',//加载静态资源必备,否则加载不了 url: "data/tree_data1.json", idField: "id", treeField:'title', width: '100%', height:'99%', cascadeCheck:true, ..
tree前端实现
qq_54936371的博客
09-11 1020
目录 一、tree控件的基本使用： 存在 缺陷： 优化：树控件也可以定义在一个空 元素中并使用Javascript加载数据。 原理： 二、tabs控件的基本使用 1.需求： 2.实现： 1.给菜单添加点击事件 2.调用tabs选项卡打开对应的页面 再次的优化： 总结： 一、tree控件的基本使用： 1.首先在Jquery-easyui-1.5.1中demo目录下找到tree文件找到基础basic代码 查看效果： 2. 查看原代码加入到layout...
easyui之Tree
A2895922320的博客
09-10 739
目标： 1.左边是树状图， 2.然后点击树状图中的内容会打开新的界面 3.不能打开重复的Tab 4.如果已经有打开的页面再点击打开跳转到那个已经打开的页面 5.Tab选项卡显示界面 目标实现 目标一：树状图 第一步：导入资源（tree_data1.json） 第二步：新建一个File 第三步：用js方法调用导入的tree_data1.json $(function(){ $('#tt').tree({ url:'tree_data1.js..
jsTree树形组件的丰富功能与应用
jsTree 是一个非常流行的 JavaScript 插件，它主要用于在网页上创建可交互的树形菜单和树形数据结构。这个插件是基于 jQuery 的，因此使用前需要确保页面已经加载了 jQuery 库。 描述中的“jsTree大集合”并没有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值