zTree使用详解_ jQuery Tree树插件例子_JQuery Tree Demo
前段时候做过一个项目、其中使用到了一个树形菜单的功能、虽然项目已经做完了、但我还是觉得有必要分享一下技术点
我使用的是 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