ztree.docVIP

ztree 【简介】 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动、编辑、删除 支持任意更换皮肤 / 个性化图标（依靠css） 支持极其灵活的 checkbox 或 radio 选择功能 简单的参数配置实现 灵活多变的功能 zTree博客地址：/ 目前zTree作者已经入驻ItEye，如果有什么需要学习的完全可以到作者博客上去学习，而且zTree的版本已经更新了很多次了，下面的内容跟最新版估计会有很大出入，我不能保证下面的教程在最新版可用。zTree真的是非常强大的树组件，希望能对大家有所帮助！ 在官网能够下载到zTree的源码、实例和API，其中作者pdf的API写得非常详细（中文的哦） 【部分函数和属性介绍】 核心：zTree(setting, [zTreeNodes]) 这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。 核心参数：setting zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置 setting 举例: Js代码 收藏代码 var setting = { showLine: true, checkable: true }; 因为参数太多，具体参数详见zTreeAPI 核心参数：zTreeNodes zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息 zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式 ①带有父子关系的标准 zTreeNodes 举例: Js代码 收藏代码 var zTreeNodes = [ {id:1, name:test1, nodes:[ {id:11, name:test11, nodes:[ {id:111, name:test111} ]}, {id:12, name:test12} ]}, ...... ]; ②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例： Js代码 收藏代码 var treeNodes = [ {id:1, pId:0, name:test1}, {id:11, pId:1, name:test11}, {id:12, pId:1, name:test12}, {id:111, pId:11, name:test111}, ...... ]; 【实例一】(Java代码) ①在页面引用zTree的js和css： Html代码 收藏代码 !-- ZTree树形插件 -- link rel=stylesheet href=%=root%/Web/common/css/zTreeStyle/zTreeStyle.css type=text/css !-- link rel=stylesheet href=%=root%/Web/common/css/zTreeStyle/zTreeIcons.css type=text/css -- script type=text/javascript src=%=root%/Web/common/js/jquery-ztree-2.5.min.js/script ②在script脚本中定义setting和zTreeNodes Java代码 收藏代码 var setting = { isSimple