`
dreamoftch
  • 浏览: 496657 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery easyui tree学习

jqueryeasyuitree 
阅读更多

 

 

/**约定的服务器返回的数据格式：{"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对象。
名称参数描述
onClick node 当用户点击节点时触发，node参数包含如下属性：
id：节点id。
text：显示在节点上的文本。
checked：节点是否被选择。
attributes：节点的自定义属性。
target：被点击的目标DOM对象。
onDblClick node 当用户双击节点时触发。
onBeforeLoad node, param 在请求载入数据之前触发，返回false将取消载入。
onLoadSuccess node, data 当数据载入成功时触发。
onLoadError arguments 当数据载入失败时触发，arguments参数跟jQuery.ajax的'error'函数一样。
onBeforeExpand node 在节点打开之前触发，返回false将取消打开。
onExpand node 在节点被打开时触发。
onBeforeCollapse node 在节点被关闭之前触发，返回false将取消关闭。
onCollapse node 当节点被关闭时触发。
onCheck node, checked 当用户点击复选框时触发。
onBeforeSelect node 在节点被选择之前触发，返回false将取消选择。
onSelect node 当节点被选择时触发。
onContextMenu e, node 当节点被鼠标右键点击时触发。
onDrop target, source, point 当节点位置被（拖动）更换时触发。
target：DOM对象，需要被拖动动的目标节点。
source：原始节点。
point：指明拖动方式，可选值：'append'，'top'或者'bottom'。
onBeforeEdit node 在编辑节点之前触发。
onAfterEdit node 在编辑节点之后触发。
onCancelEdit node 当取消编辑时触发。

方法

名称参数描述
options none 返回树形菜单属性对象。
loadData data 载入树形菜单数据。
getNode target 获取特定的节点对象。
getData target 获取特定的节点数据，包括它的子节点。
reload target 重新载入树形菜单数据。
getRoot none 获取根节点，返回节点对象。
getRoots none 获取根节点，返回节点数组。
getParent target 获取父节点，target是一个节点DOM对象。
getChildren target 获取子节点，target参数是一个节点DOM对象。
getChecked none 获取所有被选择的节点。
getSelected none 获取被选择的节点并返回，如果没有节点被选择则返回null。
isLeaf target 判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。
find id 查找指定的节点并返回节点对象。
select target 选择一个节点，target参数是一个节点DOM对象。
check target 设置指定的节点为已选择状态。
uncheck target 设置指定的节点为未选择状态。<
collapse target 关闭节点，target参数是一个节点DOM对象。
expand target 打开节点，target参数是一个节点DOM对象。
collapseAll target 关闭所有的节点。
expandAll target 打开所有的节点。
expandTo target 打开从根节点到指定节点之间的所有节点。
append param 添加若干子节点到一个父节点，param参数有2个属性：
parent：DOM对象，将要被添加子节点的父节点，如果未指定，子节点将被添加至根节点。
data：数组，节点数据。
toggle target 打开或关闭节点的触发器，target参数是一个节点DOM对象。
insert param 在一个指定节点之前或之后插入节点，'param'参数包含如下属性：
before：DOM对象，在某个节点之前插入。
after: DOM对象，在某个节点之后插入。
data：对象，节点数据。
remove target 移除一个节点和它的子节点，target参数是一个节点DOM对象。
pop target 移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据。
update param 更新指定的节点，param参数有如下属性：
target(DOM对象，将被更新的目标节点)，id，text，iconCls，checked等。
enableDnd none 启用拖动特性。
disableDnd none 禁用拖动特性。
beginEdit nodeEl 开始编辑节点。
endEdit nodeEl 结束编辑节点。
cancelEdit nodeEl 取消编辑节点。

 

分享到：
| 设计模式学习网址
评论
1 楼 azhqiang 2014-09-27  
楼主，你知道怎么获取拖拽后的树形菜单节点数据？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery-easyui-tree学习

    《jQuery EasyUI Tree组件深度解析与实践应用》 在Web开发中，为了构建用户友好的交互界面，我们经常需要使用到各种UI库。jQuery EasyUI就是这样一个强大的前端框架，它基于jQuery，提供了丰富的组件，包括今天我们...

    JqueryEasyUI Tree 动态加载，稍作修改就可以用了

    Tree组件是jQuery EasyUI中的一个重要部分，用于展示层级结构的数据，如目录、组织结构等。本篇文章将深入探讨如何实现jQuery EasyUI Tree的动态加载，并根据提供的标题和描述，分享一些可能的实现方法。 动态加载...

    jQuery EasyUI tree增加搜索功能的实现方法

    扩展jQuery EasyUI tree搜索树节点的方法，使其支持节点名称的模糊匹配，将不匹配的节点隐藏。 /** * 1）扩展jquery easyui tree的节点检索方法。使用方法如下： * $("#treeId").tree("search", searchText); * ...

    easyui tree扁平化扩展，不用再为children嵌套结构烦恼

    EasyUI Tree插件是基于jQuery的一个轻量级插件，它提供了一种简单的方式创建树形控件。然而，在实际应用中，我们常常遇到数据结构的问题——即如何处理带有`children`属性的嵌套数据结构。这篇文章将详细介绍如何对...

    jquery easyui tree 树形列表节点异步加载

    在本文中，我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架，它提供了丰富的UI组件，包括我们这里关注的Tree组件。异步加载是提升用户体验的...

    jquery easyui 帮助文档

    jQuery EasyUI 的核心在于其组件系统，这些组件包括但不限于数据网格（datagrid）、下拉菜单（combobox）、对话框（dialog）、表单（form）、布局（layout）、菜单（menu）、面板（panel）、进度条（progressbar）、...

    初试JqueryEasyUI（附Demo）

    在初试 Jquery EasyUI 的 Demo 中，你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码，可以运行...

    jqueryEasyUI

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作，使得...

    jQuery EasyUI 1.5.1 版 API 中文版

    2. **组件详解**：jQuery EasyUI 提供了许多组件，如 `datagrid`（数据网格）、`dialog`（对话框）、`menu`（菜单）、`tabs`（选项卡）、`tree`（树形结构）和`form`（表单）。每个组件都有详细的配置选项、方法和...

    easyui tree使用方式

    EasyUI Tree 需要载入 jQuery EasyUI 的 JavaScript 文件和 CSS 样式文件。载入后的代码示例如下： ```html ${ctx}/scripts/easyui/plugins/jquery.easyui.min.js"&gt; ${ctx}/scripts/easyui/themes/default/tree....

    jQuery easyui 全套文件

    EasyUI 是基于 jQuery 的一组 UI 组件，它为开发者提供了诸如表格（datagrid）、下拉菜单（combobox）、树形控件（tree）、对话框（dialog）等常见的网页元素。这些组件不仅具有丰富的样式，还内置了大量的功能，如...

    jQueryEasyUI1.3.6版本

    1. **组件库**：jQuery EasyUI 提供了多种UI组件，如对话框（Dialog）、表单（Form）、表格（Grid）、树形视图（Tree）、下拉菜单（Menu）等。这些组件都有完整的API和丰富的样式，可以满足开发各种类型Web应用的...

    jQuery EasyUI 1.3.6 离线简体中文API文档

    最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉，由于很多人和我要chm格式的，所以本次API我提供了2种版本的API，一个还是以前的EXE格式，另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...

    JQuery Easyui Tree的oncheck事件实现代码

    在使用JQuery Easyui Tree组件时，我们常常需要监听用户对树形结构中节点的交互行为，例如当用户点击复选框时触发特定的操作。然而，Easyui Tree的API默认只提供了`onClick`事件，这对于处理复选框的选中状态并不...

    jQuery EasyUI 1.4.2 版 API 中文版.zip

    总之，jQuery EasyUI 1.4.2 版 API 中文版手册是学习和掌握这个框架的关键资源，对于任何需要构建高效、美观的 Web 应用程序的前端开发者来说，都是不可或缺的参考资料。通过深入学习和实践，开发者可以大大提高开发...

    jQuery EasyUI tree 使用拖拽时遇到的错误小结

    ### jQuery EasyUI tree 使用拖拽功能知识点 #### jQuery EasyUI介绍 jQuery EasyUI是一个基于jQuery的前端框架，它提供了一系列用户界面组件，例如对话框、表格、菜单、树形控件等，以帮助开发者更快地构建Web界面...

    JqueryEasyUI1.4参考手册

    **jQuery EasyUI 1.4 参考手册** jQuery EasyUI 是一个基于 jQuery 的轻量级框架，它提供了一系列的 UI 组件，...通过深入学习和掌握 `JqueryEasyUI1.4参考手册`，你可以轻松地构建出功能完善、界面友好的 Web 应用。

    jquery-easyui-1.7.0.zip官方文档

    《jQuery EasyUI 1.7.0：打造高效前端界面的利器》 jQuery EasyUI 是一个基于 jQuery 的轻量级框架，它为开发者提供了一系列组件，使得构建交互式、响应式的Web应用程序变得更加简单。在1.7.0版本中，这个强大的...

    jQueryEasyUI 1.1完整源代码

    **jQueryEasyUI 1.1 完整源代码详解** ...通过学习和使用jQueryEasyUI 1.1的完整源代码，开发者不仅可以快速构建功能丰富的Web应用，还能提升自己的前端开发技能，更好地理解和掌握JavaScript库的构建方式。

Magicbox
Global site tag (gtag.js) - Google Analytics