使用jsTree动态加载节点
2013-12-09 14:15
1576 查看
因为项目的需要,需要做一个树状菜单,并且节点是动态加载的,也就是只要点击父节点,就会加载该节点下的子节点。
大致的效果实现如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/25/b722a9d2475b06c03051e860d26fb72d.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/25/76534f5d399eb0273dafef6bf2887108.png)
以上的实现就是通过jsTree实现的,一个基于JQuery的树状菜单插件,支持html,json,xml三种数据源,支持自定义主题,应该说是一个很强大的工具,现在我就把相关的代码,也是最常用的代码贴出来供大家参考。
jsTree官网地址:http://www.jstree.com/
以下为代码片段:
按我自己的理解方式,我定义了两种初始化方式,数据源都是采用的html,以下为详细的使用过程。
第一种:使用默认的html元素初始化jsTree(本地初始化,无需动态加载)
1)定义div容器
2)初始化jsTree
第二种:使用自定义或给定的html元素(作为父节点)初始化jsTree
1)定义div容器
2)初始化jsTree
以上为我个人的使用体验,仅供参考
大致的效果实现如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/25/b722a9d2475b06c03051e860d26fb72d.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/25/76534f5d399eb0273dafef6bf2887108.png)
以上的实现就是通过jsTree实现的,一个基于JQuery的树状菜单插件,支持html,json,xml三种数据源,支持自定义主题,应该说是一个很强大的工具,现在我就把相关的代码,也是最常用的代码贴出来供大家参考。
jsTree官网地址:http://www.jstree.com/
以下为代码片段:
按我自己的理解方式,我定义了两种初始化方式,数据源都是采用的html,以下为详细的使用过程。
第一种:使用默认的html元素初始化jsTree(本地初始化,无需动态加载)
1)定义div容器
<div id="jsTree"> <ul> <li> <a href="#">node1</a> <ul> <li> <a href="#">node1</a> </li> </ul> </li> <li> <a href="#">node2</a> </li> </ul> </div>
2)初始化jsTree
$(document).ready(function(){ $("#jsTree").jstree({ "themes" : { "theme" : "apple", }, "plugins" : [ "themes", "html_data", "ui"] }); });
第二种:使用自定义或给定的html元素(作为父节点)初始化jsTree
1)定义div容器
<div id="jsTree"><div>
2)初始化jsTree
$(document).ready(function(){ var root = $("#root").html(); $("#jsTree").jstree({ "themes" : { "theme" : "apple", //定义主题风格,此处为苹果系统风格 }, "html_data":{ "data":"<li class="jstree-closed" id=""><a href="#">node1</a></li>",//自定义用于初始化的父节点,此处默认为关闭状态,class属性值“jstree-closed”指定 "ajax":{ //打开父节点时,将会触发ajax请求,以用来加载该父节点下的子节点 "url":"", //用于获取子节点的链接地址 "data":function(n){ //请求上述链接地址返回的html数据,结果格式为"<li><a href="#">node_1</a></li>",可以含有多个li元素(也就是所需要的多个字节点) return { "configId":n.attr("id") //父节点id,用于获取子节点 }; } } }, "plugins" : [ "themes", "html_data" ,"ui"] //定义jsTree中需要使用的插件 }); });
以上为我个人的使用体验,仅供参考
相关文章推荐
- 使用jsTree动态加载节点
- jsTree异步动态加载子节点
- jsTree动态加载子节点(lazy loading)
- jsTree基本使用(新增,修改,删除,移动,点击,加载默认选中根节点,异步加载数据)
- 使用dtree生成的树结构,ajax动态加载子节点后,如何绑定右键菜单?求助
- JsTree3.3动态加载树节点
- jstree无限级菜单ajax按需动态加载子节点
- 使用dtree生成的树结构,ajax动态加载子节点后,如何绑定右键菜单续
- 使用jstree创建无限分级的树(ajax动态创建子节点)
- 【Android】使用LoaderManager管理Loader实现异步动态加载数据
- 类加载机制与反射5——使用反射生成JDK动态代理
- c# 中treeview 树节点图标的动态加载,及选中时图标改变
- extjs4.0 动态异步加载节点数据
- treeview动态加载树节点
- 使用lazyload在js中动态加载其他的js和css
- __declspec(thread)不支持使用LoadLibrary动态加载的情况
- Android_ListView_Adapter使用和数据动态加载
- 小白使用React--动态渲染dom节点
- Android 使用动态加载框架DL进行插件化开发
- 使用echarts动态加载数据