html页面中
//加载树
$("#demo").jstree({
"json_data" : {
"ajax" : {
"url" : "aa.action",
"dataType":"json",
"data" : function (n) {
return {
"operation" : "get_children",
"id" : n.attr ? n.attr("id").replace("node_","") : 0
};
}
}
},
"search" : {
"ajax" : {
"url" : "aa.json"
}
},
"themes" : {
"theme" : "default",
"dots" : false,
"icons" : false
},
"plugins" : [ "themes", "json_data","search" ,"checkbox","ui"]
})
//单击事件
.bind('click.jstree', function(event) {
var eventNodeName = event.target.nodeName;
if (eventNodeName == 'INS') {
return;
} else if (eventNodeName == 'A') {
var $subject = $(event.target).parent();
if ($subject.find('ul').length > 0) {
} else {
//选择的id值
alert($(event.target).parents('li').attr('id'));
}
}
})
//双击 确定jstree.js中已经添加双击事件
.bind('dblclick.jstree',function(event){
});
});
http://blog.sina.com.cn/s/blog_4ca246370100ur6z.html
分享到:
相关推荐
除了事件,还可以直接调用jsTree的方法,如打开、关闭节点,获取选中节点等: ```javascript // 打开节点 $('#jstree_demo_div').jstree('open_node', '#node_id'); // 关闭节点 $('#jstree_demo_div').jstree('...
3. **初始化JSTree**:选择一个DOM元素作为树的容器,并调用`jstree()`函数进行初始化,传入配置对象以设置各种选项和插件。 4. **监听事件**:利用JSTree的事件系统,可以在节点操作时执行相应逻辑。 5. **操作...
- **事件绑定**:根据需求,可以使用 `.on()` 方法绑定 jstree 触发的事件,如节点点击、展开等,执行相应的回调函数。 - **API 操作**:jstree 提供了一系列 API 方法,如 `refresh` 更新数据,`select_node` ...
JStree支持多种事件监听,如节点展开、点击、删除等。可以通过`.on()`方法绑定事件处理器: ```javascript $('#jstree_demo_div').on('select_node.jstree', function (e, data) { console.log('Selected node:'...
然后通过JavaScript引入jsTree库,并调用初始化函数,将这个列表转换为树形菜单。例如: ```html <ul id="jstree_demo_div"> 节点1 子节点1.1 子节点1.2 节点2 $(function () { $("#jstree_demo_div...
- **初始化**: 初始化 JStree 需要在 HTML 元素上应用 `jstree` 类,并在 JavaScript 中调用初始化方法。 ```html <div id="jstree"> $(function () { $('#jstree').jstree({ 'core': { 'data': [{...}] // ...
接着,选择一个元素作为树的容器,并调用`jstree`方法配置插件。例如: ```html <link rel="stylesheet" href="css/jstree.css"> <script src="js/jstree.min.js"> <div id="tree"> $(function () { $('#tree')...
3. **初始化JsTree**:使用JavaScript或者jQuery调用JsTree的初始化方法,配置所需的插件、设置和数据源。 4. **监听事件**:根据需求绑定JsTree的事件,如`select_node`、`create_node`等,以便在用户操作时响应。 ...
3. **初始化jsTree**:使用JavaScript代码调用`$('#jstree').jstree()`进行初始化,可以传递配置对象以定制功能。 4. **加载数据**:可以使用JSON数据直接初始化树,或者在加载时指定数据源URL。 5. **交互操作**:...
在HTML中,可以使用`<ul>`和`<li>`元素定义树的结构,然后通过JavaScript调用jsTree方法进行初始化。例如: ```html <div id="tree"> $('#tree').jstree({ 'core': { 'data': [ { "text": "节点1", ...
4. **初始化jstree**:调用`.jstree()`方法在选定的容器上初始化jstree。 5. **处理事件**:注册监听事件,如节点点击、展开等,以响应用户交互。 **标签解析:** 1. **源码**:可能是指提供示例代码或者涉及到对...
jstree作为一个JavaScript库,可以通过引入其提供的JS和CSS文件到HTML页面中,然后通过调用其API来实现各种操作。 **核心特性**: 1. **数据绑定**:jstree可以接受JSON、HTML、数组等多种格式的数据,轻松将服务器...
5. **上下文菜单**:JSTree 可以添加上下文菜单,即右键点击节点时出现的操作选项,这为用户提供了一种直观的交互方式。 6. **AJAX 支持**:通过 AJAX 功能,JSTree 能够动态加载树的数据,减轻服务器负担并提升...
使用这个压缩包,开发者可以将 vakata-jstree-651d32c 版本集成到自己的项目中,通过配置和调用API来实现所需的功能。由于它基于jQuery,所以需要确保项目中已经引入了jQuery库。同时,需要注意的是,不同版本的js...
3. **初始化树**:在页面中选择一个元素作为树的容器,通过jQuery选择器找到该元素并调用`jstree()`方法,传入配置对象以设定初始参数。 4. **加载数据**:可以使用`settings.core.data`属性或者`$.jstree.reference...
**jstree** 是一款流行的JavaScript库,专用于在网页中创建交互式的树形结构。它提供了丰富的功能,包括但不限于节点的展开与折叠、多选、拖放操作、上下文菜单以及自定义图标等。这款库非常适合用于构建目录结构、...
一旦配置完成,调用 `jstree()` 函数初始化该元素,即可呈现树形视图。 总的来说,JsTree 是一个强大的前端工具,提供了丰富的功能和定制选项,使得在 Web 应用中创建和管理树形结构变得简单易行。通过研究提供的...
1. **创建节点**:jsTree允许动态创建新的树节点,用户可以通过点击按钮或执行API调用来实现。 2. **重命名节点**:节点的名称可以随时更改,提供用户友好的交互体验。 3. **移动和删除节点**:用户可以拖动节点改变...
3. **JavaScript初始化**:加载`Tree.js`库,然后调用初始化方法,传入数据源和配置项。 4. **事件绑定**:注册事件监听器,处理用户与树的交互。 通过分析`example.html`,我们可以更好地理解`Tree.js`的工作原理...