名称

类型

说明

默认

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对象,显示父节点。

名称

参数

说明

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

当取消编辑操作。

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

代码示例:

// 找到一个节点,然后选择它 var node = $(‘#tt‘).tree(‘find‘, 12);  $(‘#tt‘).tree(‘select‘, node.target);

// 一些节点添加到选定的节点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‘  		}]  	}]  });

var node = $(‘#tt‘).tree(‘getSelected‘);  if (node){  	$(‘#tt‘).tree(‘insert‘, {  		before: node.target,  		data: {  			id: 21,  			text: ‘node text‘  		}  	});  }

// update the selected node text  var node = $(‘#tt‘).tree(‘getSelected‘);  if (node){  	$(‘#tt‘).tree(‘update‘, {  		target: node.target,  		text: ‘new text‘  	});  }