jquery ztree连接数据库使用说明教程.doc

1. zTree 介绍zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等。zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，zTree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 zTree 扩展功能库，让 zTree 更加强大。zTree2. zTree 的特点 zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON 数据 支持静态 和 Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标（依靠css） 支持极其灵活的 checkbox 或 radio 选择功能 提供多种事件响应回调 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟 在一个页面内可同时生成多个 Tree 实例 简单的参数配置实现 灵活多变的功能3. zTree 的优势zTree 的作者利用业余时间不断改进 zTree 功能，并且还能及时与用户沟通，及时回复各种疑问，便于新用户快速掌握。目前越来越多的用户都使用 zTree 替换了系统中原有的 树插件，这其中包括最近刚发布最新版本的 QUI 框架。大家也可以从官网http:/www.ztree.me/v3/main.php#_zTreeInfo看一些列子、下包！本处以提供（JQuery zTree v3.3.zip）；4. zTree 整体解析：首先把JQuery zTree v3.3.zip解压放到web目录下（可以根据业务需求自定义），然后看一下代码应用的整体结构：以下内容有图有真相1、引入zTree相关的js、css文件（如下图所示）：2、zTree异步加载的一些配置，业务需求不同配置也不同，看图分析：查看大图从图中看到已经表明的六处配置信息，从字面上就可以看出大概信息，注意：以下分析的都是关键字不可更改！标记1：async:异步的，主要配置一下url或Ajax获取的数据类型等等标记2：check:字面理解就是检查的意思，但是有没有联想到checkbox那？不错他就实现了下图中的效果(当然前提是要设置enable为true 的情况下)：标记3：data:数据，主要配置一些属性锁、对应关系！（注意：非常重要，本人不幸栽过跟头）！标记4：edit:编辑，主要配置一些是否允许拖拽、全选、辅助信息等等标记5：view:字面意思观察、查看，我们称为视图，主要配置一下我们宏观上就可以看到的一下信息，如：字体颜色、背景颜色、是否支持html脚本、节点之间的连线： 标记6：callback：回调，主要调用业务中所需要的一些函数！3、声明节点：看下图，zTree节点的声明必须是json类型，其中id，pId，name都是关键字，如果有必要可以通过setting配置里的data配置进行替换！4、函数调用：函数的调用主要根据业务的需求有关，在这里咱们只分析下async配置里url的函数：看图片注释！5、不可遗忘的配置信息：查看大图5. zTree 具体代码具体解析：1、async:Enable: true 就是开启异步加载，因为业务的需求一般默认都是true,在此处如果改成false的否则会有下图异常：2、check:我们先看一下上图的结果：图1、enable:true 图2、enable:false 如果chkStyle:radio看图： 具体下面注掉的一些配置，我们根据测试分析！3、data:如果Model里的字段名和zTree里zNodes不一致，就需要配置上面的信息大家可以参考一下zTree原始的zNodes样式：如果不一致会报异常！4、edit:在这里主要配置了节点的编辑、删除的一些信息，以及一些辅助信息！看图：同样enable要设成true,咱们看图对比一下：1、 Enable:false 2、enable:true 因为edit主要就是配置一些编辑、删除的一些辅助信息，所以如果把enable设成false的话编辑和删除按钮就会消失，同样也就无法编辑和删除了！RemoveTitle和RenameTitle主要起提示的作用：此时我把RemoveTitle:”删除节点”注释掉，如果把鼠标放在x号上就是remove提示，打开注释就是图2的提示！图1 图2 showRemoveBtn和showRenameBtn分别是显示删除按钮和编辑按钮，默认是ture,如果是false编辑和删除按钮都会消失：showRemoveBtn : setRemoveBtn是调用了下面的函数，用来判断当前节点是否为顶级节点如果是就不会显示删除按钮，可以根据业务需求自定义：如果editNameSelectAll设置成true的话点击编辑，节点进入编辑状态，并且名字进入全选状态：editNameSelectAll:true editNameSelectAll:false 5、view:视图，完全可以通过宏观看出来的变化，一个非常有意思的配置，我们先来仔细分析一下：图小？看大的！fontCss:字面理解就是字体css，可以直接写成fontCss : color:blue这样(json形式)，也可以写成fontCss: setFontCss ，zTree会自动查找setFontCss函数，下面是一个事例，可以根据业务需求自定义：现在我们就看一下效果：nameIsHTML：设置 name 属性是否支持 HTML 脚本，true / false 分别表示 支持 / 不支持 HTML 脚本(默认false):true效果： false效果： showIcon和showLine分别表示：是否显示节点图片/是否显示节点连线（默认都是true）,看下都设成false的效果：木有了图片，木有了节点连线，当然二者也可以分开设置！expandSpeed zTree 节点展开、折叠时的动画速度，截图看不出什么效果，就简单分析下它支持的参数，他主要支持两种参数类型：1、 String类型：三种预定速度之一的字符串(slow, normal, or fast) 2、 Number类型：直接输入数字，例如1000，单位毫秒addHoverDom：用于当鼠标移动到节点上时，显示用户自定义控件在这里我们调用了下面的函数，从css获取图片，并执行相应的业务！如果不设置他的话，用户自定义的添加（）按钮就不会显示！removeHoverDom：用于当鼠标移出节点时，隐藏用户自定义控件，如果设置了addHoverDom而没有设置removeHoverDom的话就造成了下图中的现象：selectedMulti: 设置是否允许同时选中多个节点,默认是true,看效果：true(默认)： false: 6、callback:查看大图beforeExpand：用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作! 也就是每次展开节点的时候都会调用此方法！来看一下具体函数代码：首先判断当前点击的节点是否正在异步加载，如果没有的话ajaxGetNodes(treeNode, refresh);刷新并展开当前节点，如果正在异步加载的话直接弹出对话框，提示用户！onAsyncSuccess和onAsyncError用于捕获异步加载正常/错误结束的事件回调函数，主要用作日志记录，和错误时警示用户等等！beforeDrag：用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作！一个非常有意思的拖拽功能，返回值是true/false, 如果返回 false，zTree 将终止拖拽，也无法触发 onDrag / beforeDrop / onDrop 事件回调函数，默认是true!beforeRemove：删除节点，单纯的调用删除节点函数，没其他难度！beforeEditName: 用于捕获节点编辑按钮的 click 事件，并且根据返回值确定是否允许进入名称编辑状态!为了防止用户失误，点错，所以弹出对话框提示用户：beforeRename：用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作!OnCheck: 用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数;6. zTree 实现编辑和删除因为zTree 已经提供了编辑和删除的组件，所以这个我们会很轻松，具体怎么实现呢？很简单，只要在配置里添加edit配置就行，并且把edit下的enable设成true就好！但是经过点击修改或删除以后，不能刷新，刷新以后数据就恢复了，为什么？因为它没走咱们的数据库呗，但是我们怎么能不能给他一个点击事件或者什么事件触发一下，让他走数据库那？。没思路了？。不会做了？。不要气馁，咱们不妨看看人家给的Demo，看看人家是怎么说的？有没有什么引导？参考（/zTree/web/demo/cn/exedit/edit.html（需要配置tomcat环境）看下图：提到了几个关键字beforeRemove/onRemove/beforeRename/onRename,并且详细指出参看api,那咱们就看看他们是什么意思吧！beforeRemove：用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作！onRemove：用于捕获删除节点之后的事件回调函数。beforeRename：用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作onRename:用于捕获节点编辑名称结束之后的事件回调函数。但是具体我们该用那一个那？那我们就先以删除为例！看看beforeRemove和onRemove有什么区别吧！先看看我写的方法吧：就这么简单，由于是书面文档，暂时无法测试效果，在这里就声明一下，beforeRemove和onRemove的区别：beforeRemove是在等待用户确认以后才执行删除，而onRemove则想法，所以在这里我们采用了beforeRemove！BeforeRename和onRename也是同样道理，只贴出代码，不做详细书面讲解：7. zTree 实现节点添加通过第六章的的讲解我们可以按照同样的方法找到！但是zTree没有给提供控件怎么办？看下面的一个参数！addHoverDom：用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内