jquery easyui----tree

浏览数：47 / 时间：2015年06月09日

重写默认方法$.fn.tree.defaults.

这棵树显示分层数据在一个树结构在一个web页面。它提供了用户扩展、压缩、拖拽、编辑和异步加载的功能。

依赖

  • draggable

  • droppable

应用实例

树可以研究在< ul >元素。标记可以定义了叶和儿童。节点将<li>元素在ul列表。以下显示的元素,这将用来制作树节点的嵌套在ul元素。

<ul id="tt" class="<a title="EasyUI" href="http://wuzhuti.cn/tag/easyui">EasyUI</a>-tree">

<li>

<span>Folder</span>

<ul>

<li>

<span>Sub Folder 1</span>

<ul>

<li>

<span><a href="#">File 11</a></span>

</li>

<li>

<span>File 12</span>

</li>

<li>

<span>File 13</span>

</li>

</ul>

</li>

<li>

<span>File 2</span>

</li>

<li>

<span>File 3</span>

</li>

</ul>

</li>

<li>

<span>File21</span>

</li>

</ul>

树还可以被定义在一个空的< ul >元素和负载数据使用javascript。

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

$(‘#tt‘).tree({
url:‘tree_data.json‘
});

使用loadFilter处理json数据从ASP.NET的web服务。

$(‘#tt‘).tree({
url: ...,

loadFilter: function(data){
if (data.d){
return data.d;
} else {
return data;
}
}
});

树数据的格式

每个节点可以包含以下属性:

  • id: 节点id,它是重要的来加载远程数据

  • text: 节点文本来显示

  • state: 节点状态,“open”或“closed”,默认是“open”。当设置为“closed”,节点有子节点,并将负载从远程站点

  • checked: 显示选定的节点是否选中。

  • attributes: 自定义属性可以被添加到一个节点

  • children: 一个数组节点定义了一些子节点

一些例子:

[{
"id":1,

"text":"Folder1",

"iconCls":"icon-save",

"children":[{
"text":"File1",

"checked":true
},{
"text":"Books",

"state":"open",

"attributes":{
"url":"/demo/book/abc",

"price":100
},

"children":[{
"text":"PhotoShop",

"checked":true
},{
"id": 8,

"text":"Sub Bookds",

"state":"closed"
}]
}]
},{
"text":"Languages",

"state":"closed",

"children":[{
"text":"Java"

},{

"text":"C#"

}]
}]

 

树的异步

这棵树支持内置的异步加载模式,用户创建一个空的树,然后指定一个服务器端动态返回JSON数据用来填充树与异步和需求。这里是一个例子:

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

这棵树是装有URL”get_data.php’。子节点加载依赖父节点状态。当扩展一个封闭的节点,如果节点没有子节点加载,它将发送节点id的值作为http请求参数命名为“id”到服务器上面定义通过URL检索的子节点。

看着从服务器返回的数据:

[{
"id": 1,

"text": "Node 1",

"state": "closed",

"children": [{
"id": 11,

"text": "Node 11"
},{
"id": 12,

"text": "Node 12"
}]
},{
"id": 2,

"text": "Node 2",

"state": "closed"
}]

节点1和节点2是封闭的,当扩展节点1,将直接显示它的子节点。当扩展节点2,它将发送值(2)服务器获取子节点。这tutorialCreate异步Treeshows如何编写服务器代码返回树数据需求。

属性

名称

类型

说明

默认

url

string

一个URL检索远程数据。

null

method

string

http方法检索数据。

post

animate

boolean

定义是否显示动画效果当节点展开或折叠。

false

checkbox

boolean

定义是否显示复选框每个节点之前。

false

cascadeCheck

boolean

定义是否级联检查。

true

onlyLeafCheck

boolean

定义是否显示复选框只有在叶节点。

false

lines

boolean

定义是否显示树线。

false

dnd

boolean

定义是否启用拖拽。

false

data

array

节点数据加载。

$(‘#tt‘).tree({

         data: [{

                  text: ‘Item1‘,

                  state: ‘closed‘,

                  children: [{

                             text: ‘Item11‘

                  },{

                             text: ‘Item12‘

                  }]

         },{

                  text: ‘Item2‘

         }]

    });

null

loader

function(param,success,error)

定义了如何加载数据从远程服务器。可以放弃这次行动返回false。这个函数接受以下参数:
    param: 参数对象传递给远程服务器。
    success(data):这个回调函数会调用这些当检索数据成功。
    error(): 这个回调函数会调用这些当未能检索数据。

json loader

loadFilter

function(data,parent)

返回过滤数据显示。返回的数据是在标准的树格式。这个函数接受以下参数:
    data: 原始数据加载。
    parent: DOM对象,显示父节点。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

事件

许多事件回调函数可以把“节点”参数,其中包含以下属性:

  • id: 一个标识值绑定到该节点。

  • text: 文本显示。

  • iconCls: css类来显示图标。

  • checked: 检查是否该节点。

  • state: 节点状态,“open”或“closed”。

  • attributes: 自定义属性绑定到该节点。

  • target: 目标DOM对象。 

 

名称

参数

说明

onClick

node

当用户点击一个节点。代码示例:

$(‘#tt‘).tree({
       onClick: function(node){
              alert(node.text);  // alert node text property when clicked
       }
  });

onDblClick

node

当用户双击一个节点。

onBeforeLoad

node,   param

前一个请求加载数据,返回false取消这种加载作用。

onLoadSuccess

node,   data

当数据加载成功时触发。

onLoadError

arguments

当数据加载失败,参数的参数是一样的“错误”功能的JQuery ajax。

onBeforeExpand

node

节点扩展之前,返回false取消这个扩大行动。

onExpand

node

当节点展开时触发事件。

onBeforeCollapse

node

在节点收缩,返回false取消这个收缩行为。

onCollapse

node

当节点收缩时触发事件。

onBeforeCheck

node,   checked

在用户单击复选框,返回false取消此检查行动。这个事件可以从版本1.3.1。

onCheck

node,   checked

当用户单击复选框。

onBeforeSelect

node

在节点被选中时,返回false取消这个选择行动。

onSelect

node

当节点被选中。

onContextMenu

e,   node

当节点是正确的点击。代码示例:

// right click node and then display the context menu  
$(‘#tt‘).tree({
       onContextMenu: function(e, node){
              e.preventDefault();                // select the node
              $(‘#tt‘).tree(‘select‘, node.target);               // display context menu
              $(‘#mm‘).menu(‘show‘, {
                     left: e.pageX,
                     top: e.pageY
              });
       }
  });
 
    
// the context menu is defined as below:  
<div id="mm" class="easyui-menu">        
    <div onclick="append()" data-options="iconCls:‘icon-add‘">Append</div>
       <div onclick="remove()" data-options="iconCls:‘icon-remove‘">Remove</div>
</div>

onBeforeDrag

node

当一个节点的拖动开始,返回false取消拖动。这个事件可以从版本1.3.2。

onStartDrag

node

当开始拖动一个节点。这个事件可以从版本1.3.2。

onStopDrag

node

停止拖拽一个节点之后。这个事件可以从版本1.3.2。

onDragEnter

target,   source

当一个节点被拖进某个目标节点,可以下降到。返回错误的拒绝掉。
  target: 目标节点元素被删除。
  source: 被拖动的源节点。
  这个事件可以从版本1.3.2。

onDragOver

target,   source

当一个节点是拖了一些目标节点,可以删除,返回错误的拒绝掉。
  target: 目标节点元素被删除。
  source: 被拖动的源节点。
  这个事件可以从版本1.3.2。

onDragLeave

target,   source

当一个节点是拖着离开一些目标节点,可以下降到。
  target: 目标节点元素被删除。
  source: 被拖动的源节点。
  这个事件可以从版本1.3.2。

onDrop

target,   source, point

Fires   当一个节点被删除。
  target: DOM对象,节点目标的下降。
  source: 源节点。
  point: 表明放操作,可能的值是: ‘append‘,‘top‘ or ‘bottom‘.

onBeforeEdit

node

在编辑节点之前。

onAfterEdit

node

在编辑节点之后。

onCancelEdit

node

当取消编辑操作。

方法

 

参数说明
options none 返回选项树。
loadData data 加载树的数据。
getNode target 获取指定节点对象。
getData target 获取指定节点数据,包括它的子节点。
reload target 重新加载树的数据。
getRoot none 得到根节点,返回节点对象
getRoots none 得到根节点,返回节点数组。
getParent target 得到父节点,该节点的目标参数表明DOM对象。
getChildren target 让子节点、目标参数显示节点的DOM对象。
getChecked state 得到节点的检查。状态提供的值是: ‘checked‘,‘unchecked‘,‘indeterminate‘. 如果一个国家没有指定,返回“‘checked‘节点。代码示例:

 

var nodes = $(‘#tt‘).tree(‘getChecked‘);	// get checked nodes  
var nodes = $(‘#tt‘).tree(‘getChecked‘, ‘unchecked‘);	// get unchecked nodes  
var nodes = $(‘#tt‘).tree(‘getChecked‘, ‘indeterminate‘);	// get indeterminate nodes
getSelected none 得到选中的节点,并返回它,如果没有节点选择返回null。
isLeaf target 确定指定的节点是叶,目标参数显示节点的DOM对象。
find id 找到指定的节点,并返回该节点对象。

 

代码示例:

// 找到一个节点,然后选择它 
var node = $(‘#tt‘).tree(‘find‘, 12);  
$(‘#tt‘).tree(‘select‘, node.target);
select target 选择一个节点,该节点的目标参数表明DOM对象。
check target 设置指定的节点被选中。
uncheck target 设置指定的节点不被选中。
collapse target 收缩的一个节点,该节点的目标参数表明DOM对象。
expand target 展开一个节点,该节点的目标参数表明DOM对象。当节点被关闭,没有子节点,节点id值(称为“id”参数)将被发送到服务器的请求的子节点数据。
collapseAll target 所有节点收缩。
expandAll target 打开所有的节点。
expandTo target 展开从根到指定的节点。
append param 附加一些子节点一个父节点。param参数有两个属性: 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‘
  		}]
  	}]
  });
toggle target 切换展开/折叠状态的节点、目标参数显示节点的DOM对象。
insert param 插入一个节点到指定节点之前或之后。“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‘
  		}
  	});
  }
remove target 删除一个节点和它的孩子节点、目标参数显示节点的DOM对象。
pop target 取出一个节点和它的孩子节点,该方法是一样的,但返回删除的节点删除数据。
update param 更新指定的节点。“param“的参数有以下属性: target(DOM object, the node to be updated),id,text,iconCls,checked,etc.代码示例:

 

// update the selected node text  
var node = $(‘#tt‘).tree(‘getSelected‘);
  if (node){
  	$(‘#tt‘).tree(‘update‘, {
  		target: node.target,
  		text: ‘new text‘
  	});
  }
enableDnd none 支持拖放功能。
disableDnd none 禁用拖放功能。
beginEdit target 开始编辑一个节点。
endEdit target 编辑节点结束。
cancelEdit target 取消编辑节点。



郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： des class style 代码 使用 log java http 数据 des class style 代码 使用 log java http 数据

相关文章

随机文章

您可能还喜欢

您可能还喜欢