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

1. zTree 介绍 　　zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等。 　　zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，zTree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 zTree 扩展功能库，让 zTree 更加强大。 ?? 2. 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,咱们看图对比一下： Enable:false 2、enable:true 因为edit主要就是配置一些编辑、删除的一些辅助信息，所以如果把enable设成false的话编辑和删除按钮就会消失