jQuery 实现的多功能Tree/TreeView “树插件”— zTree

知道91 | 工具运用 | 2014-09-04 | 阅读:7519

很多时候我们在制作前端Web网页的时候需要以树(tree)来显示网页,对于这种需求如果不是特别的要求,我们没有必要自己去写,已经有众多的 jQuery 树形(Tree)插件,这里介绍一款叫做 "zTree" 的jQuery Tree 插件。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。 zTree 最大优点是具有灵活的配置、优异的性能、多种功能的组合。这个树形插件专门适合项目开发,特别是对于 树状菜单、树状数据的Web显示(TreeView)、权限管理等等。最大的好处还在于zTree 是一款开源免费的软件,具有MIT 许可证。zTree 目前已经拥有了不少粉丝,在开源的作用下,zTree 也越来越完善,并且还在不断推出更多的 zTree 扩展功能库,让 zTree 更加强大。

前端开发 - jquery tree

zTree —— jQuery 树插件实现方法

一、下载zTree包

点击此处下载zTree包。

二、导入zTree包到项目代码

将zTree包解压后放到你的项目中,将zTreeStyle.css和jquery.ztree.all-3.5.js引入项目,如示例

    
    

三、加入tree的容器和js代码

示例代码如下


   

上面的示例代码只需要更改一个地方就是async下的url,这个url请求返回的是tree的构造数据,返回的结果是类似如下的json字符串

        {name: "父节点1", children: [
		{name: "子节点1"},
		{name: "子节点2"}
	]}

这个是最基本的用法。然而zTree这个jquery tree 插件的功能绝不是仅此而已,它具有如下特性

  1. 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
  2. 简单的参数配置实现 灵活多变的功能
  3. 在一个页面内可同时生成多个 Tree 实例
  4. 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
  5. 支持 JSON 数据
  6. 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
  7. 支持任意更换皮肤 / 自定义图标(依靠css)
  8. 提供多种事件响应回调
  9. 支持极其灵活的 checkbox 或 radio 选择功能

zTree非常的强大,在此不能一一敖述,关于zTree的具体使用可以参考 zTree API 。如有任何疑问也可以给我留言,谢谢!