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

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

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

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


猜你喜欢的

快速评论


技术评论

DD记账
top
+