EasyUI之树形结构tree

最新推荐文章于 2024-06-21 23:54:00 发布
最新推荐文章于 2024-06-21 23:54:00 发布
阅读量1.6w 收藏 16
点赞数 2
分类专栏： __2.4 EasyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ya_1249463314/article/details/70305730
版权

1.样式


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

2.静态方式生成树

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tree</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<!-- 引入css文件 -->
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>

<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<ul id="tt" class="easyui-tree">   
	   <li>
	   		<span>第一章</span>
	   		<ul>
	   			<li>
	   				<span>第一节</span>
	   				<ul>
	   					<li>
		   					<span>第一条</span>
	   					</li>
	   					<li>
		   					<span>第二条</span>
	   					</li>
	   				</ul>
	   			</li>
	   			<li>
	   				<span>第二节</span>
	   			</li>
	   		</ul>
	   </li>
	   <li>
	   		<span>第二章</span>
	   </li>
	</ul>  
</body>
</html>
结果：


3.动态方式生成树

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tree02</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<!-- 引入css文件 -->
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>

<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>

</head>
<body>
	<ul id="treeId">   
	  
	</ul>  
</body>
<script type="text/javascript">
	$("#treeId").tree({
		url:'/easyUI/json/province.json'
		
	});
</script>
</html>
json文件： province.json 

[{    
    "id":1,    
    "text":"杭州", 
    "children":[
    	{    
	        "text":"下城区",    
	        "checked":true   
    	},
    	{    
	        "text":"西湖区",    
	        "state":"open",      
	        "children":[
	        	{    
		            "text":"超市",    
		            "checked":true   
	        	},
	        	{    
		            "id": 8,    
		            "text":"银行" 
        		}
        	]    
    	}
    ]      
},{
	"id": 2,   
    "text":"北京"    
}]
结果：


4.文档

属性

属性名属性值类型描述默认值
urlstring检索远程数据的URL地址。null
methodstring检索数据的HTTP方法。（POST / GET）post
animateboolean定义节点在展开或折叠的时候是否显示动画效果。false
checkboxboolean定义是否在每一个借点之前都显示复选框。false
cascadeCheckboolean定义是否层叠选中状态。true
onlyLeafCheckboolean定义是否只在末级节点之前显示复选框。false
linesboolean定义是否显示树控件上的虚线。false
dndboolean定义是否启用拖拽功能。false
dataarray节点数据加载。 
$('#tt').tree({
	data: [{
		text: 'Item1',
		state: 'closed',
		children: [{
			text: 'Item11'
		},{
			text: 'Item12'
		}]
	},{
		text: 'Item2'
	}]
});
null
formatterfunction(node)定义如何渲染节点的文本。

代码示例：

$('#tt').tree({
	formatter:function(node){
		return node.text;
	}
});
false
loaderfunction(param,success,error)定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数：
param：发送到远程服务器的参数对象。
success(data)：当检索数据成功的时候调用的回调函数。
error()：当检索数据失败的时候调用的回调函数。		json loader
loadFilterfunction(data,parent)返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数：
data：加载的原始数据。
parent: DOM对象，代表父节点。		 
 
事件

很多事件的回调函数都包含'node'参数，其具备如下属性：

  • id：绑定节点的标识值。
  • text：显示的节点文本。
  • iconCls：显示的节点图标CSS类ID。
  • checked：该节点是否被选中。
  • state：节点状态，'open' 或 'closed'。
  • attributes：绑定该节点的自定义属性。
  • target：目标DOM对象。

事件名事件参数描述
onClicknode

在用户点击一个节点的时候触发。

代码示例： 

$('#tt').tree({
	onClick: function(node){
		alert(node.text);  // 在用户点击的时候提示
	}
});
onDblClicknode在用户双击一个节点的时候触发。
onBeforeLoadnode, param在请求加载远程数据之前触发，返回false可以取消加载操作。
onLoadSuccessnode, data在数据加载成功以后触发。
onLoadErrorarguments在数据加载失败的时候触发，arguments参数和jQuery的$.ajax()函数里面的'error'回调函数的参数相同。
onBeforeExpandnode在节点展开之前触发，返回false可以取消展开操作。
onExpandnode在节点展开的时候触发。
onBeforeCollapsenode在节点折叠之前触发，返回false可以取消折叠操作。
onCollapsenode在节点折叠的时候触发。
onBeforeChecknode, checked在用户点击勾选复选框之前触发，返回false可以取消选择动作。（该事件自1.3.1版开始可用）
onChecknode, checked在用户点击勾选复选框的时候触发。
onBeforeSelectnode在用户选择一个节点之前触发，返回false可以取消选择动作。
onSelectnode在用户选择节点的时候触发。
onContextMenue, node

在右键点击节点的时候触发。

代码示例： 

// 右键点击节点并显示快捷菜单
$('#tt').tree({
	onContextMenu: function(e, node){
		e.preventDefault();
		// 查找节点
		$('#tt').tree('select', node.target);
		// 显示快捷菜单
		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	}
});

// 右键菜单定义如下：
<div id="mm" class="easyui-menu" style="width:120px;">
	<div οnclick="append()" data-options="iconCls:'icon-add'">追加</div>
	<div οnclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>
onBeforeDragnode在开始拖动节点之前触发，返回false可以拒绝拖动。（该事件自1.3.2版开始可用）
onStartDragnode在开始拖动节点的时候触发。（该事件自1.3.2版开始可用）
onStopDragnode在停止拖动节点的时候触发。（该事件自1.3.2版开始可用）
onDragEntertarget, source在拖动一个节点进入到某个目标节点并释放的时候触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onDragOvertarget, source在拖动一个节点经过某个目标节点并释放的时候触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onDragLeavetarget, source在拖动一个节点离开某个目标节点并释放的时候触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onBeforeDroptarget, source, point在拖动一个节点之前触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。
（该事件自1.3.3版开始可用）		 
onDroptarget, source, point当节点位置被拖动时触发。
target：DOM对象，需要被拖动动的目标节点。
source：源节点。
point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。
onBeforeEditnode在编辑节点之前触发。
onAfterEditnode在编辑节点之后触发。
onCancelEditnode在取消编辑操作的时候触发。
 
方法

方法名方法参数描述
optionsnone返回树控件属性。
loadDatadata读取树控件数据。
getNodetarget获取指定节点对象。
getDatatarget获取指定节点数据，包含它的子节点。
reloadtarget重新载入树控件数据。
getRootnone获取根节点，返回节点对象。
getRootsnone获取所有根节点，返回节点数组。
getParenttarget获取父节点，'target'参数代表节点的DOM对象。
getChildrentarget获取所有子节点，'target'参数代表节点的DOM对象。
getCheckedstate获取所有选中的节点。'state'可用值有：'checked','unchecked','indeterminate'。如果'state'未指定，将返回'checked'节点。

代码示例：

var nodes = $('#tt').tree('getChecked');	// get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');	// 获取未选择节点
var nodes = $('#tt').tree('getChecked', 'indeterminate');	// 获取不确定的节点
译者注：（1.3.4新增获取方式）

var nodes = $('#tt').tree('getChecked', ['unchecked','indeterminate']);
getSelectednone获取选择节点并返回它，如果未选择则返回null。
isLeaftarget判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。
findid

查找指定节点并返回节点对象。

代码示例： 

// 查找一个节点并选择它
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);
selecttarget选择一个节点，'target'参数表示节点的DOM对象。
checktarget选中指定节点。
unchecktarget取消选中指定节点。
collapsetarget折叠一个节点，'target'参数表示节点的DOM对象。
expandtarget展开一个节点，'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候，节点ID的值(名为'id'的参数)将会发送给服务器
请求子节点的数据。
collapseAlltarget折叠所有节点。
expandAlltarget展开所有节点。
expandTotarget打开从根节点到指定节点之间的所有节点。
scrollTotarget滚动到指定节点。（该方法自1.3.4版开始可用）
appendparam

追加若干子节点到一个父节点，param参数有2个属性：
parent：DOM对象，将要被追加子节点的父节点，如果未指定，子节点将被追加至根节点。
data：数组，节点数据。

代码示例：

// 追加若干个节点并选中他们
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
	parent: selected.target,
	data: [{
		id: 23,
		text: 'node23'
	},{
		text: 'node24',
		state: 'closed',
		children: [{
			text: 'node241'
		},{
			text: 'node242'
		}]
	}]
});
toggletarget打开或关闭节点的触发器，target参数是一个节点DOM对象。
insertparam在一个指定节点之前或之后插入节点，'param'参数包含如下属性：
before：DOM对象，在某个节点之前插入。
after：DOM对象，在某个节点之后插入。
data：对象，节点数据。

下面的代码展示了如何将一个新节点插入到选择的节点之前：

var node = $('#tt').tree('getSelected');
if (node){
	$('#tt').tree('insert', {
		before: node.target,
		data: {
			id: 21,
			text: 'node text'
		}
	});
}
译者注：（1.3.4新增获取方式）
var node = $('#tt').tree('getSelected');
if (node){
	$('#tt').tree('insert', {
		before: node.target,
		data: [{
		    id: 23,
		    text: 'node23'
	                },{
	    	    text: 'node24',
	                    state: 'closed',
		    children: [{
			text: 'node241'
		    },{
			text: 'node242'
		    }]
	                }]
	});
}
removetarget移除一个节点和它的子节点，'target'参数是该节点的DOM对象。
poptarget移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据。
updateparam更新指定节点。'param'参数包含以下属性：
target(DOM对象，将被更新的目标节点)，id，text，iconCls，checked等。

代码示例：

// 更新选择的节点文本
var node = $('#tt').tree('getSelected');
if (node){
	$('#tt').tree('update', {
		target: node.target,
		text: 'new text'
	});
}
enableDndnone启用拖拽功能。
disableDndnone禁用拖拽功能。
beginEdittarget开始编辑一个节点。
endEdittarget结束编辑一个节点。
cancelEdittarget取消编辑一个节点。





sunpy 孙培煜
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
easyui中树状图
suchenbin的博客
08-21 586
easyui中写一个下面的树状图 页面： <div id="test" class="easyui-window" data-options="title:'测试',iconCls:'icon-edit',modal:true,collapsible:false,minimizable:false,closed:true" style="width: 700px; ...
easyUI之tree
Cat_Jay_Fish的博客
09-10 309
课程目标 需求点： 1.点击左侧侧显示右侧Tab 1.1给菜单添加点击事件 1.2调用tabs选项卡，打开对应的页面 选项卡打开 选项卡对应的页面展示 2.不能打开重复的Tab 拿到目前打开的tabs选项卡，与将要打开的选项卡做对比（exists） 存在true:不打开 不存在false:d打开 ...
easyui源码翻译1.32--Tree（树）
weixin_30800807的博客
01-01 329
前言 使用$.fn.tree.defaults重写默认值对象。下载该插件翻译源码 树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。 源码 /** * jQuery EasyUI 1.3.2 * *翻译：qq 1364386878 */ (function ($) { //渲染样式 ...
PE工具 -- EasyU(优启通) v3.7.2024.0515 VIP版
最新发布
dntkorg的博客
06-21 2814
此外，优启通还整合了各种装机必备工具，并结合IT天空的自研软件，有效提高系统安装效率。在PE子目录中，用户会找到更多类型的PE，可以根据需要选择，如果不需要某一种PE，可以直接删除，主程序会自动识别。此外，DLC子目录中还包含了如网络组件、附加工具包等，添加这些组件后，可以在PE的开始菜单中的扩展管理器中启用它们。DLC（扩展包）：VIP版本与普通版最大的不同在于提供了DLC（扩展包）。优启通原包更新：VIP版本的优启通原包在部分内容上与非VIP版本略有区别，包括一些新版程序或内容的更新。
easyUI的tree
weixin_34077371的博客
09-02 74
前端使用easyUI，放了一个tree，搞死了。 easyUI的tree，后端传过来的数据，是json格式；然后easyUI向后端提交、请求时，会自动将节点的id附在url后面。 主要有两个注意的地方： 1、json中的key及value，不能使用单引号，只能使用双引号； 2、json数据要以数组的形式传送，就是说，最外层要有”[]” 以 ASP.NET MVC页...
EasyUI 树形
嗯很喜欢你
10-21 424
1.树形tree的使用 用后台来体现父子节点的关系     然后天用map集合来体现 那么我们先建立一个实体类来体现它们的父子关系把 package com.damei.entity; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; /** ...
easyui 树结构
qq_36636312的博客
04-20 277
我想做一个类似tree这种结构的数据展示，如图所示 1，后台传过来的数据结构 index=0，1是子节点数据 index=2，3是父节点数据 注意：父节点数据中的ID要与子节点数据中的_parentId对应，而且_parentId是指定字段名称，不可自定义 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200420105734485.p...
EasyUI Tree树组件无限循环的解决方法
08-29
EasyUI Tree树组件是一种常用的树形结构控件，用于展示层级结构的数据。但是在使用EasyUI Tree树组件时，可能会遇到无限循环的问题，即点击最后一个节点时，会重新加载动态URL，导致无限循环的情况。这是因为EasyUI ...
jQuery EasyUI结合zTree树形结构制作web页面
12-11
《jQuery EasyUI与zTree结合构建Web页面中的树形结构》 在Web开发中，创建交互式的用户界面是一项重要的任务。jQuery EasyUI和zTree这两个JavaScript库为开发者提供了强大的工具，使得这一过程变得更为简便。本文将...
数据库树形结构，EasyUI Tree 树
Camel
01-26 745
通过 $.fn.tree.defaults 重写默认的 defaults。 树（tree）在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。 树的数据格式（Tree Data Format） 每个节点可以包括下列属性： id：节点的 id，它对于加载远程数据很重要。 --对应id text：要显示的节点文本。----对应name state：节点状态，‘open’...
easyui 树形结构样例
09-09
easyui 树形结构样例，下拉框里面是easyui树，循环展示
easyUI-树形表格(TreeGrid)实现无限层级菜单
06-01
NULL 博文链接：https://x125858805.iteye.com/blog/2229104
EasyUI之树形菜单
张翠山的博客
05-08 6114
EasyUI是用ul和li标签来完成树形结构的组合的，一个ul可视为父节点，li作为树形结构的子节点，而li标签里面嵌套的ul标签又可以作为父节点，不断的重复从而达到完成复杂树形结构的功能。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!-- 必须引用的css文件 --&gt...
EasyUi树结构
大表哥
05-12 506
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;tree.html&lt;/title&gt; &lt;meta http-equiv="keywords" content="ke
easyui树结构
Monstar_hu的博客
08-16 371
&lt;%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt
easyui的tree（静态树/动态树）
qq_45547474的博客
06-21 3446
easyui的tree一、tree简介二、tree组件工具类的实现思路三、tree组件工具类的使用四、总结二级目录三级目录 一、tree简介 二、tree组件工具类的实现思路 三、tree组件工具类的使用 四、总结 二级目录 三级目录 ...
easyui树形结构easyui-tree
桀骜浮沉的博客
03-27 493
easyui树形结构easyui-tree 页面效果 该页面主要是根据人员列表的树形结构在选择人员名称时在物资类别权限区域展示所选人员的授权状况 后台代码 //查询人员采购类别权限 @RequestMapping("findBasicDataPurchasCategoryAuthorityByUser") public @ResponseBody Object findBasicD...
【EasyUI篇】树组件——Tree
ouYang的博客
08-28 789
微信公众号：程序yuan 关注可了解更多的教程。问题或建议，请公众号留言; 查看--&gt; 全套EasyUI示例目录 Tree树组件 Tree 树，在Easyui也是一个非常常见的组件，在组件一个管理系统的时候，少不了使用树来做导航菜单，那么，现在让我们一起来学习一下吧。。。   数据库设计： JSP文件 &lt;%--   Created by In...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值