jquery easy ui Tree详解

最新推荐文章于 2023-04-23 13:42:54 发布
最新推荐文章于 2023-04-23 13:42:54 发布
阅读量7.7k 收藏
点赞数
分类专栏： 前端编程 文章标签： jquery ui

转载自  ：http://blog.csdn.net/hzw2312/article/details/38919877

目录(?)[+]

这个ui用的一切都是json数据。树也是如此！

后台需要返回与格式匹配的json数据才能正确加载树。

页面定义一个ui：

[html] view plaincopyprint?
  1. <ul id="messageInfoAddTree" class="easyui-tree" checkbox="true" data-options="lines:true" style="height:94%"></ul>  
JS访问后台：
[javascript] view plaincopyprint?
  1. //人员树  
  2.     $('#messageInfoAddTree').tree({      
  3.         url: "controller/crmMessageInfo/selectEditTree.json?rid=-1",  
  4.         loadFilter: function(data){     
  5.             return data;        
  6.         }       
  7.     });   
后台实体Bean中需要的属性：

[java]  view plain copy print ?
  1. public class EmployeeTree {  
  2.     private Integer id;  //人员编号  
  3.     private String text; //人员名称  
  4.     private Boolean checked = false; //是否选中  
  5.     private List<EmployeeTree> children; //子节点  
  6. }  
按照此种格式填充数据就能得到下面的结果：

获取已勾选的节点数据：

[javascript]  view plain copy print ?
  1. var nodes = $('#messageInfoAddTree').tree('getChecked');  

还有一个功能，就是让tree的所有节点都勾选上或者取消勾选，在api中找了一下有一个方法：

checktarget选中指定节点。
那我们只能是选中根节点后，实现全选。

getRootnone获取根节点，返回节点对象。
全选：

[javascript]  view plain copy print ?
  1. var root = $('#messageInfoAddTree').tree('getRoot');  
  2. $("#messageInfoAddTree").tree('check',root.target);  
取消选择：

[javascript]  view plain copy print ?
  1. var root = $('#messageInfoAddTree').tree('getRoot');  
  2. $("#messageInfoAddTree").tree('uncheck',root.target);  


Jquery easyui tree Api：

Tree（树）

使用$.fn.tree.defaults重写默认值对象。

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

 
依赖关系
使用案例

树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。

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

树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

  1. <ul id="tt"></ul>  

  1. $('#tt').tree({   
  2.     url:'tree_data.json'  
  3. });  

使用loadFilter函数处理来自Web Services的JSON数据。

  1. $('#tt').tree({   
  2.     url: ...,   
  3.     loadFilter: function(data){   
  4.         if (data.d){   
  5.             return data.d;   
  6.         } else {   
  7.             return data;   
  8.         }   
  9.     }   
  10. });  


 
树控件数据格式化

每个节点都具备以下属性：

  • id：节点ID，对加载远程数据很重要。
  • text：显示节点文本。
  • state：节点状态，'open' 或 '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. }]  


 
异步树控件

树控件内建异步加载模式的支持，用户先创建一个空的树，然后指定一个服务器端，执行检索后动态返回JSON数据来填充树并完成异步请求。例子如下：

  1. <ul class="easyui-tree" data-options="url:'get_data.php'"></ul>  

树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为'id'，通过URL发送到服务器上面检索子节点。

下面是从服务器端返回的数据。

  1. [{   
  2.     "id": 1,   
  3.     "text": "Node 1",   
  4.     "state": "closed",   
  5.     "children": [{   
  6.         "id": 11,   
  7.         "text": "Node 11"  
  8.     },{   
  9.         "id": 12,   
  10.         "text": "Node 12"  
  11.     }]   
  12. },{   
  13.     "id": 2,   
  14.     "text": "Node 2",   
  15.     "state": "closed"  
  16. }]  

节点1和节点2是封闭的，当展开节点1的时候将直接显示它的子节点。当展开节点2的时候它将发送值(2)到服务器获取子节点。

 
属性

属性名属性值类型描述默认值
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取消编辑一个节点。







知乎关注八戒来了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
推荐8款jQuery轻量级树形Tree插件
12-12
由于其拥有庞大，实用的插件库，使得jQuery变得越来越流行。今天将介绍一些最好的jQuery树形视图插件，具有扩展和可折叠的树视图。这些都是轻量级的，灵活的jQuery插件，它将一个无序列表转换为可展开和折叠的树。 　　Treeview – Expandable and Collapsible Tree jQuery Plugin 　　jQuery Treeview是一个轻巧和灵活的jQuery插件。它将一个无序列表转换成一个可扩展和可折叠的树，非常适合导航增强。 　　示例 　　jsTree – jQuery Tree Plugin 　　jsTree 是一个基于Javascript，支持
JQuery之jsTree树形插件
最新发布
qq_54015925的博客
12-28 1982
jstree相关属性
Jquery easyui tree的使用
热门推荐
胡汉三
08-29 11万+
这个ui用的一切都是json数据。树也是如此！ h
28款jQuery Tree 树形结构插件（转自：http://www.andelse.com/jquery-tree-plugins.html）
guoyiqi
02-08 1000
（1）jQuery File Tree （2）jQuery plugin: Treeview(演示地址) 这个插件能够把无序列表转换成可展开与收缩的Tree。 （3）jstree jstree是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖"放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在...
jq 实现tree
sodakii的博客
04-23 533
createTree（）递归创建子元素创建。主要函数createTree（）
jquery easy ui模板
03-30
**jQuery Easy UI 模板详解** jQuery Easy UI 是一个基于 jQuery 的前端开发框架，它提供了一系列的组件和样式，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个压缩包包含的 "jQuery Easy UI 学习...
jquery easy UI demo
07-10
这个“jquery easy UI demo”示例项目，旨在帮助开发者快速上手并理解如何使用 EasyUI。 **1. jQuery EasyUI 基本概念** - **jQuery**: jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理...
jquery easy ui 中文帮助
11-08
1. **组件（Widgets）**: EasyUI 包含多种组件，如 Dialog（对话框）、Grid（数据网格）、Form（表单）、Menu（菜单）、Tree（树形结构）等，这些组件都是基于 HTML 元素和 jQuery 插件构建的。 2. **主题（Themes...
jquery easy ui 框架
04-09
《jQuery Easy UI 框架详解与应用实例》 jQuery Easy UI 是一款基于 jQuery 的前端开发框架，它为开发者提供了一系列轻量级、易于使用的组件，帮助快速构建出美观且功能丰富的Web应用程序。这个框架的核心理念是...
JQuery Easy UI学习交流文档
08-04
**jQuery Easy UI学习交流文档** jQuery Easy UI 是一个基于 jQuery 的前端框架，它提供了一系列的组件，用于快速构建用户界面。这个文档集主要是为了帮助开发者更深入地理解和使用这一强大的工具，通过它，你可以...
jQuery EasyUI_02 快速入门 tree树形菜单&选项卡
m0_60786924的博客
05-06 1611
一、全局path定义 形式：<base href=""> base:引入路径 作用：标准化路径格式为全路径 base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面 <base href = "${pageContext.request.servletContext.contextPath}/static/"> var globalPath = "......
jquery.jstree 增加节点的双击事件
weixin_34072637的博客
07-26 306
jstree 本文基于  jsTree 1.0-rc1 版本增加节点的双击事件。 jsTree 是基于jquery的树插件，支持拖放、复制、删除、快捷键、多选、自定义节点图标、自定义右键菜单、跨页面保存状态等等，总之我想到的它基本上都有了，而且最值得表扬的是它让人感觉一点都不慢哦。 jsTree有节点选择事件，即.bind("select_node.jstree", function(e, dat...
12、jquery的tree组件
u012416045的博客
10-13 670
1、 jQuery 的主样式文件... --> $(function(){ $("#easyUITree").tree({
jQuery中Tree常见的坑
风火一回，一生不毁
07-21 2308
1.两次请求加载 当在前台jsp页面中填写了url地址，在对应的js中又设置了url属性，那么就会出现tree被刷新两次。 解决方案：只保留一个url即可。 2.当tree节点展开时，默认用tree的url?id=节点id，发送请求到后台加载tree的子节点。 需要注意的是当节点展开的时候是根据节点的id去查询子节点数据的，发送的请求参数id，可能不能被你获取，故而需要在获取请求前
28款jQuery Tree 树形结构插件
凯凯的专栏
03-29 669
28款jQuery Tree 树形结构插件点击打开链接
EasyUI Tree 树
Charge8的博客
10-07 6723
  一、EasyUI Tree 树：http://www.jeasyui.net/plugins/185.html 树（tree）在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。 用法 树（tree）定义在 &lt;ul&gt; 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 &lt;li&gt; 元素。 属性 每个节点可以包括下列属性：...
easyui的tree（静态树/动态树）
qq_45547474的博客
06-21 3297
easyui的tree一、tree简介二、tree组件工具类的实现思路三、tree组件工具类的使用四、总结二级目录三级目录 一、tree简介 二、tree组件工具类的实现思路 三、tree组件工具类的使用 四、总结 二级目录 三级目录 ...
jquery tree的使用
weixin_30563917的博客
05-27 230
项目中经常会遇到树形数据的展现，包括导航，选择等功能，所以树控件在大多项目中都是必须的。那一个实用的树应该具备什么功能呢？ 根据我的项目实践情况，主要是几个关键点： 1：支持静态的树，即一次性将全部数据加载到客户端。 2：异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。 3：Checkbox树（可能是静态树也可能是异步树），用于选择（如选择组织机构，选择数据字典项）等，最好是...
jquery实现tree 三级菜单选择器
xiaohuli_hyr的博客
04-01 1777
jquery实现tree树三级菜单选择器
js笔记总结,精品。。。。
04-29
"这篇js笔记总结涵盖了jQuery库的使用、前端UI框架的介绍以及jQuery相关的DOM操作和动画效果。" 本文主要讨论JavaScript的jQuery库及其在前端开发中的应用。jQuery是一个广泛使用的JavaScript库，它为开发者提供了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值