大型项目技术栈第三讲 ztree的使用

ztree的使用

一、ztree简介

1.什么是zTree

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

2.zTree优点

采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀

兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

支持 JSON 数据

支持静态 和 Ajax 异步加载节点数据

支持任意更换皮肤 / 自定义图标（依靠css）

支持极其灵活的 checkbox 或 radio 选择功能

提供多种事件响应回调

灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟

在一个页面内可同时生成多个 Tree 实例

简单的参数配置实现 灵活多变的功能

二、ztree使用

1.入门实例

1.1下载ztree资源链接

1.2解压资源并导入到项目

将js、metro.css和metro.css对应的img文件夹复制到项目，注意保持css和img结构对应关系

1.3 示例

2.callback节点事件回调

ztree的setting属性，callback用于处理节点上的事件回调

案例：点击元素打印出选中元素id及元素节点数据

3.综合案例

点击输入框，显示菜单树，并且输入内容按回车后，实现模糊搜索查出节点名字，用红色字体显示这些节点