AJAX实现动态树型结构-WEB开发频道-中国IT实验室-技术·资讯·教育·服务·社区

　　Model 2则解决了这些问题，它是面向对象的MVC模式（Model-View-Controller，模型-视图-控制器）在Web开发中的应用，Model表示应用的业务逻辑，View是应用的表示层页面，Controller是提供应用的处理过程控制。通过这种MVC设计模式把应用逻辑，处理过程和显示逻辑划分成不同的组件、模块实现，组件间可以进行交互和重用。

　　本方案是采用J2EE的多层架构，设计时结合Struts框架将表示层、业务逻辑层和数据层划分成不同的模块。表示层专注于树的外观显示，业务逻辑层为服务器端处理程序，处理树的生成、变化，为减少耦合性，该程序全部模块化实现，不在表示页面嵌入服务器程序；模型层是数据的存储和表示。下面分别介绍各层实现。

　　2.1 表示层实现

　　类似Windows资源管理器的文件夹模式，节点的图片样式如表1所示。对于每个节点的DHTML 代码，需要包含节点的位置、前导图片、样式、针对该节点的其他操作等。同时为了节点显示的连贯性，还需一些前导图片。

　　表1 树节点的前的图片样式表

　对于树的非叶子节点，图片和节点信息等，采用一个DIV ( division) 容器包含。DIV 等容器是DHTML 的基础，使用它可以通过脚本程序对其属性进行操作，如设置其style 样式的display 属性来控制子节点的展开和隐藏。节点的位置、前导图片、样式、针对该节点的其他的操作等都放入容器中，例：
＜ DIV id =mParentID＞
＜ IMG align = center border = 0 onclick =″nodeExpand (‘leafid’)″ name = m1Tree src =′Tplus.gif′＞
＜ IMG align = center border = 0 name = m1Folder src =′folderClosed. gif′＞计算机学院＜/DIV＞

　　叶子节点无需容器直接输出即可。

　　当点击某节点前的“ + ”、“ - ”图片时通过DIV 的style 样式的display 属性控制子节点的展开和隐藏。display：“none”(隐藏,不可见)，display：“block”(显示) 。相关JavaScript 代码如下：
if (expandChild.style.display = =″none″){
　// 当前为隐藏状态,执行展开动作
　this.Loading(parentObject);//判断该分支的数据是否已经加载
　expandChild.style.display =″block″;
if (para2 = =″last″)
　parentObject.src =″Lminus. gif″; // 最后一个节点
else
　parentObject.src = ″Tminus. gif″; // 显示┠
　expandFolder.src = ″folderOpen. gif″;
}else {
　// 将当前节点的子节点全部隐藏
　expandChild.style.display = ″none″;
　if (para2 = = ″last″)
　　parentObject.src = ″Lplus. gif″;
　else
　　parentObject.src = ″Tplus. gif″;
　　expandFolder.src = ″folderClosed. gif″;
}