TRSWCM65二次开发004树形组件.docx
《TRSWCM65二次开发004树形组件.docx》由会员分享，可在线阅读，更多相关《TRSWCM65二次开发004树形组件.docx（24页珍藏版）》请在冰豆网上搜索。
TRSWCM65二次开发004树形组件
1树形组件
1.1概述
树形结构在普通的Web设计中不常用到，但是在一些B/S结构的系统（如OA系统）中是不可缺少的一种UI组件。
树状结构不仅是一种有效的信息组织方式，它同时建立了一种索引方式，帮助人类更快地在查找机器中的信息。
现代操作系统基本上都使用树状结构来管理磁盘文件，所以大多数人对树状菜单的逻辑模型和操作方式都非常熟悉，对于UI设计师来说就成了一种很好的选择。
1.2基本功能点
Ø有缩进的层次
Ø使用不同的图标区别出来树根、树枝、树叶
Ø图标可以标示出树枝是打开还是关闭
Ø每一个节点都有提示（ToolTip和状态栏）
Ø支持分隔符
1.3扩展功能点
Ø支持全展开和全关闭
Ø支持定位到指定节点
Ø支持动态载入指定树枝的节点
Ø不预先加载树中所有节点，只是在点击的时候自动加载，对于大数据量的树形结构特别有效；
Ø支持拖动
Ø支持给LI上填写扩展属性
Ø支持选择框
2关键技术
设计原则：
按照WEB标准建议，HTML代码只是表达内容的结构，由样式表和JavaScript结合控制表现。
wcm系统中树形组件定义在文件app\js\source\wcmlib\com.trs.tree\TreeNav.js。
这个JS文件里定义了树形组件的对象com.trs.tree.TreeNav的属性、方法和事件。
2.1HTML表达式
采用UL和DIV元素标示：
DIV表示单个节点；UL表示一组平级的节点，其中DIV中的A元素上定义Title属性。
2.2CSS的作用
Ø定义不同类型节点的图标（树根、树枝、树叶、分隔符）；
Ø定义各种状态的标示（展开、关闭、鼠标移上、鼠标一种、选中）；
Ø控制节点是否展开；
2.3不同类型节点的样式如何定义
按照设计原则，HTML内容只是复杂表达数据的结构，表现由样式+JavaScript来控制．所以在UL和DIV中是不包含任何样式，由JavaScript读取DOM树，动态设置样式。
2.4支持动态装载
动态载入的原理：
通过定义一个空的UL元素，让树形组件向JSP发出一个XMLHttp请求，获取到内容，填充UL。
其中JSP地址由覆写的树形组件函数决定。
例如，在wcm\app\nav_tree\nav_tree_select.jsp页面中调用该方法来重写原来的动态载入功能。
代码如下：
//重写com.trs.tree.TreeNav的动态载入方法
com.trs.tree.TreeNav.makeGetChildrenHTMLAction=function（_elElementLi）{
…
//获取父节点的类型
varsParentType=_elElementLi.id.substring（0,nPos）;
//获取父节点的id
varsParentId=_elElementLi.id.substring（nPos+1）;
//返回tree_html_creator.jsp请求页面的结果，返回的结果为子节点的代码
return"tree_html_creator.jsp"+（location.search||'?
1=1'）+"&Type=0&FromSelect=1&ParentType="+sParentType+"&ParentId="+sParentId;
}
由上可知动态载入主要是从请求tree_html_creator.jsp页面的返回值中获取子节点的代码。
tree_html_creator.jsp中各参数如下：
参数名
取值范围
描述
Type
0,1,2
参数值0：
表示输出当前节点的一级子节点，调用方法TreeCreator.writeTopChildrenHTML（）
参数值1：
表示输出当前节点路径的HTML，调用方法TreeCreator.writeHTMLOfAPath（）
参数值2：
表示产生包含指定栏目的HTML，调用方法TreeCreator.writeHTMLContainsChannels（）
FromSelect
0或1
控制点击节点文字是否可以定位到节点前的选择框
ParentType
字符串
父节点的类型
ParentId
整型值
父节点的ID
2.5刷新树
在树组件中有两种刷新树的方法updateNodeChildrenHTML和reloadChildren。
这两个方法都可以只传入一个父节点或者父节点的ID来动态刷新该节点的所有子节点。
函数中各参数的意义见附录8.2的表。
以下举例说明：
1.需求：
点击树节点的时候触发刷新子节点的操作;
2.实现如下：
//树节点的点击事件
TreeNav.doActionOnClickA=function（event,oSrcElement）{
//由于点击事件是发生在A元素上，我们需要找到该节点对应的DIV
//元素，该元素上记录了节点类型、ID等信息
varsrcElementDiv=oSrcElement.parentNode;
//更新子节点，将DIV元素传递给刷新函数
//TreeNav.reloadChildren（srcElementDiv）
TreeNav.updateNodeChildrenHTML（srcElementDiv）;
}
2.6对节点事件的处理
有时我们想要在点击树节点时触发一些事件，这个事件的处理主要就包含在com.trs.tree.TreeNav.onClickNode函数中。
首先我们分析下默认的onClickNode函数是如何处理事件的，其代码如下：
onClickNode:
function（_event）{
varevent=window.event||_event;
//获取点击的元素
varoSrcElement=Event.element（event）;
varsOnclick=null;
//获取该元素上的onclick属性
if（（sOnclick=oSrcElement.getAttribute（'onclick',2））!
=null&&（sOnclick!
=''））{
try{
//执行该元素上定义的onclick函数，然后返回
eval（sOnclick）;
returnfalse;
}catch（err）{
//justskipover
}
}
//获取点击的元素标签名
switch（oSrcElement.tagName）{
//如果为div，即树节点上的图标
case"DIV":
//调用默认的_onClickFolder函数，默认为展开或收缩节点
com.trs.tree.TreeNav._onClickFolder（oSrcElement）;
break;
//如果为a元素，即树节点上的文字
case"A":
//如果oPreSrcElementA元素不为空，即之前点击过其它节点
if（com.trs.tree.TreeNav.oPreSrcElementA!
=null）{
//将之前节点的设置成不选中状态
Element.removeClassName（com.trs.tree.TreeNav.oPreSrcElementA,"Selected"）;
}
//将当前节点设置成选中状态
Element.addClassName（oSrcElement,"Selected"）;
//将之前的节点设置成倒数第二个元素
com.trs.tree.TreeNav.lastSecondSrcElementA=com.trs.tree.TreeNav.oPreSrcElementA;//modifiedbyhxj
//将当前节点设置成现在的元素
com.trs.tree.TreeNav.oPreSrcElementA=oSrcElement;
//执行doActionOnClickA函数
varbReturn=com.trs.tree.TreeNav.doActionOnClickA（event,oSrcElement）;
if（bReturn==false）returnfalse;
break;
default:
break;
}
returntrue;
}
由上述代码中的注释分析可知，若想触发指定的事件有如下方法：
在节点上添加onclick属性;在onClickNode函数中执行需要的操作;在_onClickFolder和doActionOnClickA方法中添加需要的操作。
若只添加onclick属性，树节点并不会执行树的展开和收缩动作，因此一般不采用第一种方法。
下面我们将举个例子来说明，由于我们需要使用a元素，因此生成的子节点中不能包含有label元素。
我们修改动态生成子节点函数中传递给tree_html_creator.jsp页面的参数，如下所示，将FromSelect设置为0，则生成的子节点中不包含label元素（若想保留label元素，可将onClickNode函数中的case‘A’设置成case‘label’）：
首先我们在app/_test目录下创建一个文件tree_test.html
引入相关的JS及CSS文件
在HTML页面中我们定义初始节点
100%;height:
100%;border:
0;">
文字库
升级会员 