Z-Tree的應用.docVIP

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