zTree使用详解_ jQuery Tree树插件例子_JQuery Tree Demo
2014-08-31 18:25:15 By: shinyuu
前段时候做过一个项目、其中使用到了一个树形菜单的功能、虽然项目已经做完了、但我还是觉得有必要分享一下技术点
我使用的是 zTree 的一个插件、使用非常简单、官方的文档已经非常不错了、我之所以写下来一方面是为自己做笔记
另外一方面是让有相同需求朋友可以少走弯路、希望对大家有些许的帮助
zTree 简介
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点
1、zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
2、采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
3、兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
4、支持 JSON 数据
5、支持静态 和 Ajax 异步加载节点数据
6、支持任意更换皮肤 / 自定义图标(依靠css)
7、支持极其灵活的 checkbox 或 radio 选择功能
8、提供多种事件响应回调
9、灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
10、在一个页面内可同时生成多个 Tree 实例
11、简单的参数配置实现 灵活多变的功能
下面是程序运行的效果
使用方法
zTree 的使用非常简单、只需要4步就可以搞定了
1、引入插件和JQuery
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../js/jquery.ztree.core-3.5.js"></script>
2、setting 配置信息
普通使用,无必须设置的参数
与显示相关的内容请参考 API 文档中 setting.view 内的配置信息
name、children、title 等属性定义更改请参考 API 文档中 setting.data.key 内的配置信息
3、treeNode 节点数据配置
标准的 JSON 数据需要嵌套表示节点的父子包含关系
例如:
var nodes = [ {name: "父节点1", children: [ {name: "子节点1"}, {name: "子节点2"} ]} ];
4、使用JS加载插件
$(document).ready(function(){ var t = $("#tree"); t = $.fn.zTree.init(t, setting, zNodes); demoIframe = $("#testIframe"); demoIframe.bind("load", loadReady); var zTree = $.fn.zTree.getZTreeObj("tree"); zTree.selectNode(zTree.getNodeByParam("id", 101)); });
最后给大家共享一下官方的Demo链接: http://dwtedx.com/download.html?bdkey=s/1bnfDNTP 密码: sxno
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)
或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛
66 2016-10-20 16:27:35 1 评 | 回复
666