jquery树形 点击标题展开关闭

<ul class="easyui-tree"

data-options="animate:true, onClick: function(node){

$(this).tree('toggle', node.target);}"

>

Java代码



$('#tt2').tree({

checkbox: false,

dnd:true,

url: webContext+"/menu/getTemplateMenuItemChild.do?id=0",

onClick:function(node){//单击事件

$(this).tree('toggle', node.target);

}

}

$('#tt').tree(options);

树的数据格式

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

id: 节点ID，这是很重要的加载远程数据

text: 文字显示节点

state: 节点的状态，“开放”或“关闭”，默认为“打开”。 当设置为“关闭”，该节点有子节点，并将它们远程加载

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#"

}]

}]

Dependencies

draggable

droppable

属性

Override defaults with $.fn.tree.defaults.

Tree Node is a javascript object which contains following properties:

id: An identity value bind to the node.

text: Text to be showed.

checked: Whether the node is checked.

attributes: Custom attributes bind to the node.

target: Target DOM object.

Properties

名称

类型

描述

默认值

url

string

a一个URL来检索远程数据.

null

method

string

HTTP方法来检索数据.

post

animate

boolean

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

false

checkbox

boolean

确定是否显示每个节点前的复选框.

false

cascadeCheck

boolean

确定是否级联复选框.

true

onlyLeafCheck

boolean

确定是否显示子节点前的复选框.

false

dnd

boolean

确定是否启用拖放.

false

data

array

节点的数据加载.

null

事件

名称

参数

描述

onClick

node

用户单击一个节点时被激活，节点参数包含下列内容：

ID：节点ID

text：文本节点

checked：是否被选中的节点

attributes：节点自定义属性

target：目标点击DOM对象

onDblClick

node

用户双击一个节点时被激活.

onBeforeLoad

node, param

加载数据前被触发，返回false取消此行为.

onLoadSuccess

node, data

数据加载成功时被触发.

onLoadError

arguments

数据加载失败时触发，参数为“error”的jQuery.ajax方法相同.

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：指示拖放操作，posible值是：“追加”，“顶”或“底部”.

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

none

获取所有复选框选中的节点.

getSelected

none

获取所选节点，并返回它，如果没有节点选择返回null.

isLeaf

target

确定指定的节点是子节点，参数是该节点的DOM对象.

find

id

查找指定节点并返回节点对象.

select

target

选择一个节点，参数是该节点的DOM对象.

check

target

设置指定的节点复选框为选中.

uncheck

target

设置指定的节点复选框为未选中.

collapse

target

关闭一个节点，参数是该节点的DOM对象.

expand

target

展开一个节点，参数是该节点的DOM对象.

collapseAll

target

关闭所有节点.

expandAll

target

展开所有节点.

expandTo

target

展开从根到指定的节点.

append

param

添加一些子节点到父节点. 参数有两个属性：

parent：DOM对象，追加到父节点，如果没有指定，追加到根节点.

data：array，节点数据.

toggle

target

切换展开/折叠节点的状态，参数是该节点的DOM对象.

insert

param

在指定的节点之前或之后插入一个节点. 在“param”参数包含下列内容：

before：DOM对象，节点前插入.

after：DOM对象，节点后插入.

data：对象，节点的数据.

remove

target

删除一个节点和它的子节点，参数是该节点的DOM对象.

pop

target

删除一个节点和它的子节点，该方法是remove一样的，但删除的节点返回节点数据.

update

param

更新指定的节点。 参数具有以下属性：

target（DOM对象，要更新的节点），id,text,iconCls,checked,等.

enableDnd

none

启用拖放功能.

disableDnd

none

禁用拖放功能.

beginEdit

nodeEl

开始编辑一个节点.

endEdit

nodeEl

编辑完一个节点.

cancelEdit

nodeEl

取消编辑节点.