jquery easyui tree学习

最新推荐文章于 2024-10-29 19:22:13 发布
最新推荐文章于 2024-10-29 19:22:13 发布
阅读量192 收藏
点赞数
分类专栏： jQuery easyui tree 文章标签： jquery easyui tree ViewUI
jQuery 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
easyui
1 篇文章 0 订阅
订阅专栏
tree
1 篇文章 0 订阅
订阅专栏

 

 

/**约定的服务器返回的数据格式：{"description":"test","link":"link","nodeId":1,"nodeName":"节点0","parentNodeId":0}
 * nodeId:唯一标示节点  nodeId=1代表根节点，根节点的parentNodeId为0
 * parentNodeId：父节点nodeId
 */
var data = "[{\"description\":\"test\",\"link\":\"link\",\"nodeId\":1,\"nodeName\":\"节点0\",\"parentNodeId\":0},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":2,\"nodeName\":\"节点1\",\"parentNodeId\":1},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":3,\"nodeName\":\"节点2\",\"parentNodeId\":1},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":4,\"nodeName\":\"节点3\",\"parentNodeId\":2},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":5,\"nodeName\":\"节点4\",\"parentNodeId\":3},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":6,\"nodeName\":\"节点5\",\"parentNodeId\":3}]";

 

注意：

很多事件的回调方法都有一个node的参数，这个参数包含了下面的属性：

 

id,text,iconCls,checked,state,attributes,target

Events

Many events callback function can take the 'node' parameter, which contains following properties:

很多事件的回调方法都有一个node的参数，这个参数包含了下面的属性：

  • id: An identity value bind to the node.
  • text: Text to be showed.
  • iconCls: The css class to display icon.
  • checked: Whether the node is checked.
  • state: The node state, 'open' or 'closed'.
  • attributes: Custom attributes bind to the node.
  • target: Target DOM object.

 

 

处理服务器返回的数据：

/**约定的服务器返回的数据格式：{"description":"test","link":"link","nodeId":1,"nodeName":"节点0","parentNodeId":0}
 * nodeId:唯一标示节点  nodeId=1代表根节点，根节点的parentNodeId为0
 * parentNodeId：父节点nodeId
 */
//data为服务器返回的数据（json格式）
var data = "[{\"description\":\"test\",\"link\":\"link\",\"nodeId\":1,\"nodeName\":\"节点0\",\"parentNodeId\":0},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":2,\"nodeName\":\"节点1\",\"parentNodeId\":1},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":3,\"nodeName\":\"节点2\",\"parentNodeId\":1},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":4,\"nodeName\":\"节点3\",\"parentNodeId\":2},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":5,\"nodeName\":\"节点4\",\"parentNodeId\":3},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":6,\"nodeName\":\"节点5\",\"parentNodeId\":3}]";
var json = JSON.parse(data);//将字符串解析为json对象
var tree = {};//定义存放结果的tree对象
//将数据添加children属性，并依据nodeId存放到tree对象中
$.each(json,function(i,obj){
	this.children = [];//添加children属性
	tree[this.nodeId] = this;//nodeId为key，当前对象为value存放到tree对象中
});
$.each(json,function(i,obj){
	if(this.parentNodeId != 0){
		tree[this.parentNodeId].children.push(this); //除了根节点之外，其余节点都追加到父节点的chileren数组中
	}
});
var temp = [];
temp.push(tree[1]);//获取根节点，其余节点不需要
tree = temp;
/**
 * 将给定的节点及其子节点(children)转为easyui要求的结构
 * @param {Object} tree1
 * @return {TypeName} 
 */
function toTree(tree1){
	var arr = [];
	var length = tree1.length;
	if(length<=0){
		return arr;
	}
	var obj = null;
	for(var i=0;i<length;i++){
		obj = {};
		obj.id = tree1[i].nodeId;
		obj.text = tree1[i].nodeName;
		obj.attributes = {
			"description":tree1[i].description,
			"link":tree1[i].link,
			"nodeName":tree1[i].nodeName,
			"parentNodeId":tree1[i].parentNodeId
		};
		obj.children = toTree(tree1[i].children);//递归children节点
		arr.push(obj);
	}
	return arr;
}
tree = toTree(tree);
console.info(JSON.stringify(tree));//得到的就是最终的easyui要求的格式

 

经过上面的处理得到的json数据为：

[{"id":1,"text":"节点0","attribute":{"description":"test","link":"link","nodeName":"节点0","parentNodeId":0},"children":[{"id":2,"text":"节点1","attribute":{"description":"test","link":"link","nodeName":"节点1","parentNodeId":1},"children":[{"id":4,"text":"节点3","attribute":{"description":"test","link":"link","nodeName":"节点3","parentNodeId":2},"children":[]}]},{"id":3,"text":"节点2","attribute":{"description":"test","link":"link","nodeName":"节点2","parentNodeId":1},"children":[{"id":5,"text":"节点4","attribute":{"description":"test","link":"link","nodeName":"节点4","parentNodeId":3},"children":[]},{"id":6,"text":"节点5","attribute":{"description":"test","link":"link","nodeName":"节点5","parentNodeId":3},"children":[]}]}]}]

 

 

 

然后在页面显示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="jquery_easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery_easyui/themes/icon.css">
	<script type="text/javascript" src="jquery_easyui/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jquery_easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#tt2').tree({
				data:data  //data就是上面的 json 数据
			});
		});
	/**  添加些额外的处理
		$(function(){
			$('#tt2').tree({
				data:tree,
				checkbox:false,
				onlyLeafCheck:false,
				dnd:false,
				onClick:function(node){//点击事件
					$("#tt2").tree("toggle",node.target);//当前被点击的节点自动关闭/展开
                                        console.info(node.attributes.link);//获取自定义的属性
				}
			});
		});
	*/
	</script>
  </head>
  
  <body>
    jquery easyui test demo: <br><br>
    <ul id="tt2"></ul>
  </body>
</html>

 就可以看到树状结构了。

 

 

 

参考资料：

 

easyui树形菜单中文参考

 

easyui官网

树形菜单

使用$.fn.tree.defaults重载默认值。

依赖关系
  • 一般拖动
  • 拖动至容器
使用方法

树形菜单可以用<ul>标签定义，它可以定义叶子节点和子节点，代码示例如下：

 
  1. <ul id="tt">  
  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>  

也可以用不带<li>的<ul>标签来定义：

 
  1. <ul id="tt"></ul>  
 
  1. $('#tt').tree({  
  2.     url:'tree_data.json'  
  3. });  
树形菜单的数据格式

每个节点都拥有以下属性：

  • id：节点id，对载入远程数据很重要。
  • text：显示在节点的文本。
  • state：节点状态，'open' or 'closed'，默认为'open'。当设置为'closed'时，拥有子节点的节点将会从远程站点载入它们。
  • checked：表明节点是否被选择。
  • attributes：可以为节点添加的自定义属性。
  • children：子节点，必须用数组定义。

示例代码：

 
  1. [{  
  2.     "id":1,  
  3.     "text":"Folder1",  
  4.     "iconCls":"icon-save",  
  5.     "children":[{  
  6.         "text":"File1",  
  7.         "checked":true  
  8.     },{  
  9.         "text":"Books",  
  10.         "state":"open",  
  11.         "attributes":{  
  12.             "url":"/demo/book/abc",  
  13.             "price":100  
  14.         },  
  15.         "children":[{  
  16.             "text":"PhotoShop",  
  17.             "checked":true  
  18.         },{  
  19.             "id": 8,  
  20.             "text":"Sub Bookds",  
  21.             "state":"closed"  
  22.         }]  
  23.     }]  
  24. },{  
  25.     "text":"Languages",  
  26.     "state":"closed",  
  27.     "children":[{  
  28.         "text":"Java"  
  29.     },{  
  30.         "text":"C#"  
  31.     }]  
  32. }]  
属性
名称类型描述默认值
url（超链接）string（字符串）用以载入远程数据的超链接地址。null
method（方法）string（字符串）获取数据的HTTP方法。post
animate（动画）boolean（布尔型）定义当节点打开或关闭时是否显示动画效果。false
checkbox（复选框）boolean（布尔型）定义是否在每个节点之前显示复选框。false
cascadeCheck（级联选择）boolean（布尔型）定义是否支持级联选择。true
onlyLeafCheck（只选叶子节点）boolean（布尔型）定义是否只在叶子节点之前显示复选框。false
dnd（拖放）boolean（布尔型）定义是否支持拖放。false
data（数据）array（数组）将被载入的节点数据。null
事件

多数事件回调函数都有'node'参数，该参数包含如下属性：

  • id：节点的唯一标识。
  • text：显示在节点上的文本。
  • checked：节点是否被选择。
  • attributes：节点的自定义属性。
  • target：目标DOM对象。
名称参数描述
onClicknode当用户点击节点时触发，node参数包含如下属性：
id：节点id。
text：显示在节点上的文本。
checked：节点是否被选择。
attributes：节点的自定义属性。
target：被点击的目标DOM对象。
onDblClicknode当用户双击节点时触发。
onBeforeLoadnode, param在请求载入数据之前触发，返回false将取消载入。
onLoadSuccessnode, data当数据载入成功时触发。
onLoadErrorarguments当数据载入失败时触发，arguments参数跟jQuery.ajax的'error'函数一样。
onBeforeExpandnode在节点打开之前触发，返回false将取消打开。
onExpandnode在节点被打开时触发。
onBeforeCollapsenode在节点被关闭之前触发，返回false将取消关闭。
onCollapsenode当节点被关闭时触发。
onChecknode, checked当用户点击复选框时触发。
onBeforeSelectnode在节点被选择之前触发，返回false将取消选择。
onSelectnode当节点被选择时触发。
onContextMenue, node当节点被鼠标右键点击时触发。
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对象。
getCheckednone获取所有被选择的节点。
getSelectednone获取被选择的节点并返回，如果没有节点被选择则返回null。
isLeaftarget判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。
findid查找指定的节点并返回节点对象。
selecttarget选择一个节点，target参数是一个节点DOM对象。
checktarget设置指定的节点为已选择状态。
unchecktarget设置指定的节点为未选择状态。<
collapsetarget关闭节点，target参数是一个节点DOM对象。
expandtarget打开节点，target参数是一个节点DOM对象。
collapseAlltarget关闭所有的节点。
expandAlltarget打开所有的节点。
expandTotarget打开从根节点到指定节点之间的所有节点。
appendparam添加若干子节点到一个父节点，param参数有2个属性：
parent：DOM对象，将要被添加子节点的父节点，如果未指定，子节点将被添加至根节点。
data：数组，节点数据。
toggletarget打开或关闭节点的触发器，target参数是一个节点DOM对象。
insertparam在一个指定节点之前或之后插入节点，'param'参数包含如下属性：
before：DOM对象，在某个节点之前插入。
after: DOM对象，在某个节点之后插入。
data：对象，节点数据。
removetarget移除一个节点和它的子节点，target参数是一个节点DOM对象。
poptarget移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据。
updateparam更新指定的节点，param参数有如下属性：
target(DOM对象，将被更新的目标节点)，id，text，iconCls，checked等。
enableDndnone启用拖动特性。
disableDndnone禁用拖动特性。
beginEditnodeEl开始编辑节点。
endEditnodeEl结束编辑节点。
cancelEditnodeEl取消编辑节点。

 

TCH987551623
关注
专栏目录
jquery-easyui-tree学习
10-09
jquery-easyui-tree学习 详情请看：http://blog.csdn.net/wild46cat/article/details/52763256
jQuery EasyUI tree增加搜索功能的实现方法
12-13
扩展jQuery EasyUI tree搜索树节点的方法，使其支持节点名称的模糊匹配，将不匹配的节点隐藏。 /** * 1）扩展jquery easyui tree的节点检索方法。使用方法如下： * $("#treeId").tree("search", searchText); * ...
easyui 学习（2） --tree
fengcai0123的专栏
07-06 406
就可以看到效果了
EasyUI –tree、combotree学习总结
weixin_34162695的博客
08-26 252
2019独角兽企业重金招聘Python工程师标准>>> ...
$.tree 的简单使用
03-03 9292
var url = 'mkController.do?getYsszmkTree&ysid=${ysid}&type=${type}'; var treeData; $.ajax({ async : false, cache : false, type: 'POST', url:url, success:function(data){ treeData
easyui中tree的使用
sjhnanwang的专栏
07-22 9165
//放假人员树设置'./main/pages/tree_data.json',  function loadCompany(){    $b('holiday_v').value='';    $b('holiday_t').value='';    $b('showId').innerHTML='';    $('#tt2').tree({     checkbox: true,
jQuery Easyui Tree组件
qq_45384482的博客
06-23 669
文章目录前言动态树思路和流程代码实现案例实现效果 前言 Tree组件的话来做权限方面的很好，基于树组件的话分为两种，静态树和动态树，静态树的话代码比较冗余死板，动态树配合ajax+json实现从数据库调用显示方便灵活。 动态树 使用树控件先定义一个空ul元素中并使用Javascript加载数据。 <ul id="tt"></ul> 创建js文件进行json数据加载 $('#tt').tree({ url:'tree_data.json' });
JQuery EasyUI Tree
qq_42386143的博客
06-21 581
Tree Tree的定义 树（tree）定义在 ul 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 li 元素。 <ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub...
jquery EasyUi tree实现右键菜单
weixin_46388225的博客
09-05 606
Jquery EasyUi tree实现右键菜单
0、JQuery Easyui Tree 插件树菜单搜索
yandype的博客
12-24 1087
一、实现方案 根据搜索的关键字，配对所有的节点。符合条件就显示否则隐藏。如果，该节点符合搜索配对条件，该节点的父节点要显示。 二、实现代码 2.1、页面结构 <div class="bor bg-white mt5"> <div class="title2"> <i class="fa fa-image"></i>&nbsp;<strong>售卖产品图片</strong> <span class="se
JQuery Easyui Tree的oncheck事件实现代码
10-29
在使用JQuery Easyui Tree组件时，我们常常需要监听用户对树形结构中节点的交互行为，例如当用户点击复选框时触发特定的操作。然而，Easyui Tree的API默认只提供了`onClick`事件，这对于处理复选框的选中状态并不...
jQuery EasyUI tree 使用拖拽时遇到的错误小结
10-21
### jQuery EasyUI tree 使用拖拽功能知识点 #### jQuery EasyUI介绍 jQuery EasyUI是一个基于jQuery的前端框架，它提供了一系列用户界面组件，例如对话框、表格、菜单、树形控件等，以帮助开发者更快地构建Web界面...
自然语言处理与文本分析及挖掘：原理、算法及应用场景介绍
rubyw的博客
10-29 1166
句子语义则需要分析句子结构，例如通过语义角色标注，在句子“小明给小红一本书”中，“小明”是施事者，“小红”是受事者，“一本书”是客体，“给”是动作，这有助于理解句子的核心语义。在英语中，句子通常有明确的语法结构，如主谓宾结构。以句子“I love you”为例，“I”是主语，“love”是谓语动词，“you”是宾语。：英文单词间通常有空格分隔，但也有特殊情况，如缩写（“I’m”需分为“I”和“'m”）和连字符连接的单词（“e - mail”作为一个词），可以用简单规则或正则表达式处理。
VB程序实例-运用Mschat图表显示数据(方法二).zip
11-03
VB程序实例-运用Mschat图表显示数据(方法二).zip
VB程序实例-改变Windows图标大小.zip
11-03
VB程序实例，可供参考学习使用，希望对你有所帮助
技术资料分享ZigBee协议栈的研究与实现非常好的技术资料.zip
11-03
技术资料分享ZigBee协议栈的研究与实现非常好的技术资料.zip
pytz-2016.10-py3.1.egg
最新发布
11-03
pytz库的主要功能 时区转换：pytz库允许用户将时间从一个时区转换到另一个时区，这对于处理跨国业务或需要处理多地时间的数据分析尤为重要。 历史时区数据支持：pytz库不仅提供了当前的时区数据，还包含了历史上不同时期的时区信息，这使得它在处理历史数据时具有无与伦比的优势。 夏令时处理：pytz库能够自动处理夏令时的变化，当获取某个时区的时间时，它会自动考虑是否处于夏令时期间。 与datetime模块集成：pytz库可以与Python标准库中的datetime模块一起使用，以确保在涉及不同时区的场景中时间的准确性。
技术资料分享ADV7123非常好的技术资料.zip
11-03
技术资料分享ADV7123非常好的技术资料.zip
技术资料分享MP1541非常好的技术资料.zip
11-03
技术资料分享MP1541非常好的技术资料.zip
详解JqueryEasyUI Tree的使用与功能示例
在易用UI（JQuery EasyUI）框架中，树状菜单（tree）是一种常见的交互式组件，它允许用户以层次结构的形式组织和展示数据。easyui tree提供了丰富的功能，包括节点的勾选与多选、节点的添加、删除和拖拽移动，以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值