web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等。
历手三四个项目有大有小,采用的树前端都是 Ztree。
有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供给前端,这样固然是好,开发效率会提升几倍。
客户需求是什么,组件化往上一套,几分钟就能搭建起来。
但这样程序员真的就是搬砖的了,纯纯的重复性工作。
ZTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态 和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标(依靠css)
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现 灵活多变的功能
具体使用框架不同,前端通信请求写法可能会有差距,但无论使用什么样的MVC 框架,怎样封装/变化,个人认为前端到后端通信方式大致为 Ajax/Websocket。
首先页面需要引入JS,ZTree 依赖 JQuery,所以 JQuery 写到前面位置。


最后将后端组织好的 Json 数据初始化入ZTree 即可,具体的 ZTree 使用,比如显示的样式,拖拽,点击事件的响应........都是支持的,看具体需求来实现。
前端的各种样式事件响应需要一颗细腻的心,如果你们公司前后端是严格分工开发的,你完全可以交给前端MM了,专注后端设计。
下面都为个人理解设计,如看客老爷有更好方式,请斧正。
首先你得需要一个像 Ztree 树节点属性类似的数据结构 POJO(setter,getter 方法已省略)。
其中只对几个常用的属性进行了定义,方便其他人使用,降低业务代码之间的耦合性。


其次你需要一张具有上下级关系的数据表,下面这是自己的测试脚本。
SQL 无国界,尽管拿去练手吧。


当然对于业务 POJO 的数据结构封装比不可少,主流的持久层框架都能将表映射为 POJO 对象,有自动生成业务接口,服务层。
不用那些看起来难懂的书面话, 个人理解 POJO 的作用,将现实业务抽象到程序表现层。
最后是核心的业务处理逻辑,通过持久层获取想要遍历的数据,进行处理封装。


需要注意的地方是最后在 ZTreeNodeList 头部添加的 treeNode 为树组件的头部,这里需要将数据表中的一级菜单的 parentid 设置为 -1。
最终界面展示
本文转自Orson博客园博客,原文链接:http://www.cnblogs.com/java-class/p/5202086.html,如需转载请自行联系原作者