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-tree学习

    jQuery EasyUI Tree提供了多种扩展功能,如展开/折叠节点、异步加载数据、添加/删除节点等。例如,通过`expandNode`方法可以展开指定的节点: ```javascript $('#tree').tree('expandNode', {id: '1-1'}); // ...

    jquery easyui tree 树形列表节点异步加载

    在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的...

    jquery easyui datagrid demo

    这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档,帮助我们理解和应用 Datagrid。 首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它...

    解决EasyUI中Tree的CheckBox不能设置为禁用的问题

    //设置一个标志位,在整棵树加载完成后就将标志位设置为false,不允许勾选checkbox了,在加载数据完成之前是可以勾选的,用来在数据中设置勾选了哪些节点 //这样就可以实现读取url数据时是可以设置勾选了哪些节点,在...

    jQuery EasyUI 中文文档

    jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...

    JqueryEasyUI Tree 动态加载,稍作修改就可以用了

    4. 使用`tree`方法的`append`操作,将新获取的子节点数据添加到Tree中。 以上内容是关于jQuery EasyUI Tree动态加载的基本实现和注意事项。根据实际需求,你可能还需要处理异步加载过程中的错误、优化数据请求策略...

    jQuery EasyUI tree增加搜索功能的实现方法

    扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏。 /** * 1)扩展jquery easyui tree的节点检索方法。使用方法如下: * $("#treeId").tree("search", searchText); * ...

    jQuery EasyUI中文手册

    《jQuery EasyUI中文手册》是针对JavaScript库jQuery EasyUI的一款详尽指南,旨在帮助开发者更好地理解和运用这个强大的前端框架。jQuery EasyUI基于jQuery,提供了一系列轻量级、易用的UI组件,使得开发者能够快速...

    树节点绑定(EasyUI-Tree)内含数据库打开直接用

    - 数据绑定:将转换后的JSON数据通过JavaScript传递给前端,使用EasyUI的`$(treeSelector).tree('loadData', data)`方法将数据加载到Tree中。 3. ASP.NET框架: - ASP.NET是Microsoft开发的一种Web应用程序框架,...

    jquery easyui 帮助文档

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了丰富的组件和功能。这个“jQuery EasyUI 帮助文档”包含了全面的API参考和使用指南,对于开发者来说是极具价值的资源。 jQuery ...

    jQuery EasyUI 1.5API 中文版

    在使用 jQuery EasyUI 时,首先需要在页面中引入 jQuery 和 jQuery EasyUI 的 CSS 和 JS 文件。然后,可以通过添加特定的类名到 HTML 元素上来应用组件样式,或者通过 JavaScript 调用 API 来实现动态交互。 三、...

    jqueryEasyUI

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作,使得...

    Jquery-easyui-tree常见操作

    Jquery-easyui-tree常见操作,加载树,获取所有选中节点,展开和折叠所有节点,展开和展开指定的节点等操作

    jQuery EasyUI 1.4 离线简体中文API文档

    tree:添加“getRoot”方法 用于返回通过“nodeEl”参数指定的节点的顶部父节点元素 注意:官网的英文API中该函数的说明有误 其说明是none 无参数 实际这里是需要参数的 ; tree:添加“queryParams”属性; ...

    初试JqueryEasyUI(附Demo)

    在初试 Jquery EasyUI 的 Demo 中,你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码,可以运行...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    jQuery EasyUI的api

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了HTML用户界面的开发,提供了一系列易于使用的组件,如对话框、表格、...在实际开发中,不断查阅API文档和实践操作,将有助于加深对EasyUI的理解并提高开发效率。

    jQuery EasyUI中文参考手册.chm

    jQuery EasyUI中文参考手册.chm

    jQuery EasyUI 1.5.1 版 API 中文版

    2. **组件详解**:jQuery EasyUI 提供了许多组件,如 `datagrid`(数据网格)、`dialog`(对话框)、`menu`(菜单)、`tabs`(选项卡)、`tree`(树形结构)和`form`(表单)。每个组件都有详细的配置选项、方法和...

    jqueryeasyui_tree_comtree.docx

    在本文中,我们将深入探讨jQuery EasyUI中的ComTree组件,这是一个用于构建可交互树形结构的工具。ComTree是基于EasyUI的扩展,它为开发者提供了更丰富的功能和自定义选项,使其在Web应用程序中构建组织结构、菜单...

Global site tag (gtag.js) - Google Analytics