zTree视图

zTree视图含义

• zTree 是一个依靠 jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等。

● zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
● 采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
● 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
● 支持 JSON 数据
● 支持静态和 Ajax 异步加载节点数据
● 支持任意更换皮肤 / 自定义图标（依靠css）
● 支持极其灵活的 checkbox 或 radio 选择功能
● 提供多种事件响应回调
● 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
● 在一个页面内可同时生成多个 Tree 实例
● 简单的参数配置实现 灵活多变的功能

1. js核心文件
   • zTree v3.x有3个js文件，一个核心包(jquery.ztree.core-3.x.js)，两个扩展包–复选框功能包(jquery.ztree.excheck-3.x.js) & 编辑功能包(jquery.ztree.exedit-3.x.js )
   • 核心包必须加载，扩展包根据需要进行加载
   • 在实际中，扩展包与核心包代码合并为一个js文件，合并时将核心包放到最前面
2. css文件
   • zTree v3.x只使用一个zTreeStyle.css文件，为了尽量避免样式冲突，将zTree容器的className 设置为’ztree’
3. img图片
   • zTree v3.x 将主要图标都合并为一个图片，利用图片切割方式显示图标
   • 为了避免原先节点连线之间 1 像素间隔的问题，在 v3.x 中 +/-图标 继续保留 18*18 的尺寸，其余图标全部修改为 16*16，请升级的朋友务必注意修正原先使用的图标大小
   • 在 v3.x Demo 中 自定义图标都是独立的图片文件，实际开发中建议也都采用图片切割的方式
4. zTree数据
5. 调试代码

zTree使用

1. 继承相关的form view
2. 使用xpath 找到指定字段节点
3. 添加 tree_search、parent_field属性
   • tree_search:是否启用组件
   • parent_field:父级字段名(不填默认为parent_id).例如示例中产品分类的上级分类的字段名称为parent_id,则可填写parent_id 也可以不填写.