zTree使用详解_ jQuery Tree树插件例子_JQuery Tree Demo
2014-08-31 18:25:15  By: dwtedx

• dwtedx
• JQuery教程
• 1
• 23331
• 34

前段时候做过一个项目、其中使用到了一个树形菜单的功能、虽然项目已经做完了、但我还是觉得有必要分享一下技术点

我使用的是 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的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛