天天看点

web 前端常用组件【05】ZTree

 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 写到前面位置。

web 前端常用组件【05】ZTree
web 前端常用组件【05】ZTree

   最后将后端组织好的 Json 数据初始化入ZTree 即可,具体的 ZTree 使用,比如显示的样式,拖拽,点击事件的响应........都是支持的,看具体需求来实现。

    前端的各种样式事件响应需要一颗细腻的心,如果你们公司前后端是严格分工开发的,你完全可以交给前端MM了,专注后端设计。

    下面都为个人理解设计,如看客老爷有更好方式,请斧正。

    首先你得需要一个像 Ztree 树节点属性类似的数据结构 POJO(setter,getter 方法已省略)。

    其中只对几个常用的属性进行了定义,方便其他人使用,降低业务代码之间的耦合性。

web 前端常用组件【05】ZTree
web 前端常用组件【05】ZTree

     其次你需要一张具有上下级关系的数据表,下面这是自己的测试脚本。

     SQL 无国界,尽管拿去练手吧。

web 前端常用组件【05】ZTree
web 前端常用组件【05】ZTree

    当然对于业务 POJO 的数据结构封装比不可少,主流的持久层框架都能将表映射为 POJO 对象,有自动生成业务接口,服务层。

    不用那些看起来难懂的书面话, 个人理解 POJO 的作用,将现实业务抽象到程序表现层。

    最后是核心的业务处理逻辑,通过持久层获取想要遍历的数据,进行处理封装。

web 前端常用组件【05】ZTree
web 前端常用组件【05】ZTree

   需要注意的地方是最后在 ZTreeNodeList 头部添加的 treeNode 为树组件的头部,这里需要将数据表中的一级菜单的 parentid 设置为 -1。

   最终界面展示

web 前端常用组件【05】ZTree

 本文转自Orson博客园博客,原文链接:http://www.cnblogs.com/java-class/p/5202086.html,如需转载请自行联系原作者

继续阅读