0 0

jquery easyui 中tree 怎么给tree的叶子节点添加单击事件?5

jquery easyui 中tree 怎么给tree的叶子节点添加单击事件?其中tree的内容是通过tree_data.json得到的,tree_data.json内容如下:
[{
"id":1,
"text":"Nodel1",
"iconCls":"icon-menh",
"children":[{
"id":"11",
"iconCls":"icon-ok",
"text":"Nodel11 },{
"id":"12",
"iconCls":"icon-ok",
"text":"Nodel12
}]
},{
"text":"Nodel2",
"iconCls":"icon-ok",
"state":"open",
"children":[{
"id":"21",
"iconCls":"icon-ok",
"text":"Nodel21 },{
"id":"22",
"iconCls":"icon-ok",
"text":"Nodel22 }]
}]
2012年6月14日 14:44

1个答案 按时间排序 按投票排序

0 0

$('#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
取消编辑节点.


2012年6月14日 16:31

相关推荐

    jquery-easyui

    EasyUI的Tree组件支持单击、双击事件,可以扩展节点、收缩节点,还能添加图标和自定义操作按钮,提供良好的用户体验。 “panel”组件则类似于一个容器,可以用来包装其他内容,比如文本、表格或表单。Panel具有标题...

    使用easyUI实现树菜单

    EasyUI是一个基于jQuery的轻量级前端开发框架,它提供了一系列组件,包括表格、对话框、菜单等,使得开发者能够快速构建用户界面。在这个场景中,我们将专注于`tree`插件,该插件用于创建交互式的树形结构,尤其适用...

    使用jquery实现树形菜单

    比如 easyui 中的 tree 需要单击分叉节点前的小三角,才能够展开或关闭节点。另外,它还必需要求浏览器在兼容模式下才能正常使用(这个项目中使用的 easyUI 是 1.2.2 版本,新版的 Tree 不存在该问题),很是不方便...

    EasyUI Tree树组件无限循环的解决方法

    在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环。如: tree.json [{ id:1, text:...

    EASYUI TREEGRID异步加载数据实现方法

    EASYUI TreeGrid是一款基于jQuery和EASYUI框架的数据展示组件,它结合了表格和树形结构的特点,常用于展示层次关系的数据。在EASYUI TreeGrid中,异步加载数据是一项重要的功能,允许用户在需要时动态获取数据,提高...

    第36章 Tree(树)组件[3]1

    在本章中,我们将深入探讨EasyUI中的Tree组件,这是一个常用的数据展示工具,适用于构建层级结构的数据模型。Tree组件依赖于Draggable和Droppable组件,提供了丰富的交互功能,如拖放操作,使得用户可以方便地对数据...

    案例8:Spring整合Spring MVC与Hibernate + EasyUI实现电子商城后台订单管理.docx

    - 为Tree控件添加onClick事件处理代码,实现单击“查询订单”、“创建订单”等节点时的功能。 #### 五、总结 本案例详细介绍了如何使用Spring框架整合Spring MVC与Hibernate技术,结合EasyUI前端库,实现一个完整...

Global site tag (gtag.js) - Google Analytics