jquery easyui tree学习

最新推荐文章于 2024-09-07 22:51:07 发布
最新推荐文章于 2024-09-07 22:51:07 发布
阅读量181 收藏
点赞数
分类专栏： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery-EasyUI学习（十六）Tree（树）
quge_name_harder的博客
11-27 375
一、Tree（树） 树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。 二、例子 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Tree（树）&lt;/t...
【Jquery easyui 】Jquery easyui tree的使用
happydecai的博客
05-31 1123
这个ui用的一切都是json数据。树也是如此！后台需要返回与格式匹配的json数据才能正确加载树。页面定义一个ui：[html] view plain copy&lt;ul id="messageInfoAddTree" class="easyui-tree" checkbox="true" data-options="lines:true" style="height:94%"&gt;&am
jquery-easyui-tree学习
10-09
jquery-easyui-tree学习 详情请看：http://blog.csdn.net/wild46cat/article/details/52763256
easyui 学习（2） --tree
fengcai0123的专栏
07-06 394
就可以看到效果了
EasyUI –tree、combotree学习总结
weixin_34162695的博客
08-26 243
2019独角兽企业重金招聘Python工程师标准>>> ...
$.tree 的简单使用
03-03 9281
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 9149
//放假人员树设置'./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增加搜索功能的实现方法
12-13
扩展jQuery EasyUI tree搜索树节点的方法，使其支持节点名称的模糊匹配，将不匹配的节点隐藏。 /** * 1）扩展jquery easyui tree的节点检索方法。使用方法如下： * $("#treeId").tree("search", searchText); * ...
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界面...
基于大数据的科研热点分析与挖掘系统
最新发布
Python极客之家
09-07 699
科研活动的快速发展产生了大量的学术文献，如何从这些文献中提炼出有价值的科研热点和趋势成为了一个重要的问题。本项目旨在开发一个基于大数据的科研热点分析可视化系统，采集人工智能领域 ACL、CL、EMNLP 近几年顶级会议论文，利用自然语言处理技术和机器学习算法，对科研文献进行分析，并通过可视化的方式展示科研热点和发展趋势，帮助科研工作者更好地把握研究方向。
河北金融学院在广东2021-2024各专业最低录取分数及位次表.pdf
09-07
全国各大学在广东2021-2024各专业最低录取分数及位次表
非常好的通俗易懂的开关电源原理与维修6.zip
09-07
非常好的通俗易懂的开关电源原理与维修6.zip
2米输送线_机械3D图Solidworks设计图.zip
09-07
2米输送线_机械3D图Solidworks设计图.zip
分布式电源优化配置与选址定容MATLAB程序基于遗传算法 （1）该程序为基于遗传算法的分布式电源优化配置与选址定容程序，硕士学位
09-07
分布式电源优化配置与选址定容MATLAB程序基于遗传算法 （1）该程序为基于遗传算法的分布式电源优化配置与选址定容程序，硕士学位lunwen源程序，配有该lunwen。 （2）本程序可有效配置分布式电源容量与安装位置。程序与lunwen包含的内容有选用投资运行成本、网损费用、发电费用为目标函数建立分布式电源的规划模型改进的自适应遗传算法、IEEE-33节点的算例求解。 （3）赠送若干极为相似的参考lunwen，均为本人研究该课题期间认为非常系统、全面、易懂、基础的文章。
基于ssm图书馆借阅管理系统设计与实现.docx
09-07
基于ssm图书馆借阅管理系统设计与实现.docx
WordPress优化插件，WPOPT v2.1.0
09-07
WPOPT插件，是一款WordPress优化插件，能对WordPress底层功能进行优化，支持功能开关，系统加速等功能。 2.0版本全新发布，采用vite打包，界面采用Vue3+element-plus制作。无论是外观，还是框架功能，都是空前的强大。 功能更多，更强，是所有WordPress网站都值得安装的一款优化插件。 插件为每一个功能添加了详细的注释，方便根据需要开关。 本插件的功能，和其他优化插件不冲突，可以共存。
输送粉末涂层炉_机械3D图Solidworks设计图.zip
09-07
输送粉末涂层炉_机械3D图Solidworks设计图.zip
jQuery EasyUI Tree 使用指南：异步加载与数据重复问题解析
"这篇文档是关于使用jQuery EasyUI库中tree组件的实践心得，作者在开发过程中遇到异步加载树节点的问题，通过两种方法解决了数据重复显示的问题。" 在jQuery EasyUI框架中，tree组件是一个非常实用的工具，用于创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值