Z-Tree的应用.docVIP

【简介】 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件 ? ?兼容 IE、FireFox、Chrome 等浏览器 ? ?在一个页面内可同时生成多个 Tree 实例 ? ?支持 JSON 数据 ? ?支持一次性静态生成 和 Ajax 异步加载 两种方式 ? ?支持多种事件响应及反馈 ? ?支持 Tree 的节点移动、编辑、删除 ? ?支持任意更换皮肤 / 个性化图标（依靠css） ? ?支持极其灵活的 checkbox 或 radio 选择功能 ? ?简单的参数配置实现 灵活多变的功能部分函数和属性介绍? 核心：zTree(setting, [zTreeNodes]) 这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。 ? ? 核心参数：setting zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置 setting 举例: Js代码 var?setting?=?{??? ????showLine:?true,??? ????checkable:?true??? };???var setting = { ????showLine: true, ????checkable: true }; ? 核心参数：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}??? ????]},??? ????......??? ];??? 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},??? ????......??? ];??? 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/comm