zTree的简单使用1.0

2018/10/10 北京朝阳.冠城大厦17楼

这里是引用
zTree 简介
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态 和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现 灵活多变的功能

本人JAVA萌新一只，在这里仅仅简单介绍下zTree的创建及使用

	首先，想要使用zTree必须要创造一个zTree容器，那么如何创造这个容器呢？其实很简单，我们只需给
标签定义一个className为“ztree”即可，如：
，这样，一个zTree容器就诞生了。至于为什么要在
标签上创造zTree容器，我想是因为zTree这个插件内部通过你后台传来的数据进行遍历循环形成菜单的过程中，第一级菜单数据都是以一个个
标签显示的，而每一个一级菜单下面的二级，三级甚至更多级菜单都是以一个个
标签出现的，我们知道，
标签跟
标签一般都是一同出现，因此，才会使用
标签来创造zTree容器。好了，zTree容器创造好了以后，我们该来使用这个容器了。我们需要用zTree对象的setting来配置数据以达到你传输的数据是zTree插件需要的数据格式的要求，写法如下：
 

	setting = {showLine : true,edit : {drag: {isCopy: false,isMove: false},enable: true,renameTitle: "修改菜单",removeTitle: "删除菜单",showRenameBtn: true,showRemoveBtn: true},view : {addHoverDom : addHoverDom,removeHoverDom : removeHoverDom,selectedMulti : false},data : {simpleData : {enable : true,idKey:"id",pIdKey:"fzid",rootPId:0}},callback : {beforeRemove: beforeRemove,onRemove: onRemove,beforeEditName: beforeEditName,beforeRename: beforeRename,onRename: onRename,beforeClick: beforeClick,onClick: onClick}}
 

	这里setting可看作是一个参数，后面会用到这个配置参数。其中：showLine：设置zTree是否显示节点之间的连线，默认值为true，true/false分别表示 显示/不显示 连线；edit:{}：用来配置编辑事件状态等；drag:{}：用来配置节点(菜单)拖拽事件等；isCopy：拖拽时，设置是否允许复制节点[setting.edit.enable 		 		  = true 时生效]，默认值为true；isMove：拖拽时，设置是否允许移动节点[setting.edit.enable = true 时生效]，默认值为true;1、isCopy = true; isMove = true 时，拖拽节点按下 Ctrl 或 Cmd 键表示 copy; 否则为 move。2、isCopy = true; isMove = false 时，所有拖拽操作都是copy。3、isCopy = false; isMove = true 时，所有拖拽操作都是 move。4、isCopy = false; isMove = false时，禁止拖拽操作。enable：设置zTree是否处于编辑状态，默认值是false，true/false分别表示 可以/不可以 编辑；showRenameBtn：设置是否显示编			辑名称按钮[setting.edit.enable = true 时生效]，默认值为true，true / false 分别表示 显示 / 隐藏 编辑名称按钮，当点击此编辑名称		按钮时：1、进入节点编辑名称状态。2、编辑名称完毕（Input 失去焦点 或 按下 Enter 键），会触发 setting.callback.beforeRename 回调函数，用户可根据自己的规则判定是否允许修改名称。3、如果 beforeRename 返回 false，则继续保持编辑名称状态，直到名称符合规则位置 （按下 ESC 键可取消编辑名称状态，恢复	原名称）。4、如果未设置 beforeRename 或 beforeRename 返回 true，则结束节点编辑名称状态，更新节点名称，并触发 			setting.callback.onRename 回调函数。showRemoveBtn：设置是否显示删除按钮。[setting.edit.enable = true 时生效]，默认值为true，true / false 分别表示 显示 / 隐藏 删		除按钮，当点击此删除按钮时：1、首先触发 setting.callback.beforeRemove 回调函数，用户可判定是否进行删除操作。2、如果未设置 beforeRemove 或 beforeRemove 返回 true，则删除节点并触发 setting.callback.onRemove 回调函数。renameTitle：设置鼠标移动到 编辑名称按钮 上时，浏览器自动弹出的辅助信息内容，可根据用户需要自行修改[setting.edit.enable 		 、					= true & setting.edit.showRenameBtn = true 时生效]，默认值为“rename”；removeTitle：鼠标移动到 删除按钮 上时，浏览器自动	弹出的辅助信息内容，可根据用户需要自行修改[setting.edit.enable = true & setting.edit.showRemoveBtn = true 时生效]，默认值	为“remove”；view:{}：selectedMulti ：设置是否允许同时选中多个节点(菜单)。默认值为true，true / false 分别表示 支持 / 不支持 同时选中多个节点；addHoverDom：用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮，默认值为	null，务必与 setting.view.removeHoverDom 同时使用；removeHoverDom：用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮，默认值为null，务必与 addHoverDom 同时使用；data:{}：simpleData:{}：用来设置简单数据格式类型以便更方便的与zTreer插件要求的数据格式相匹配；enable ：确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)，不需要用户再把	 数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式，默认值为false，true / false 分别表示 使用 / 不使用 简单数据模式，如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系，简单 Array 	格式的数据如下：
 

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"}
 ];
 

					idKey：节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]，默认值为“id”；pIdKey：节点数据中	保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]，默认值为“pid”；rootPId：用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]，默认值为null；