OAF学习笔记-22-多层菜单的制作

思路:利用系统中的HGrid 控件从数据库中将菜单抓出来父菜单的id 作为区别子菜单

做两个VO 一个VO是父菜单另一个VO 是子菜单

SOBVO(父菜单)

自己增加一列 selectflag 作为勾选的一列

OUVO(子菜单)

set_of_books_id 作为父菜单辨别(分类)

建VL(view link 联系两个VO 配两个的关系)

Select Source Attribute 作为父id   Select Destination Attribute 作为子id

新建AM (有AM 直接添加进去就行了)

将两个VO增加进去,

做页面中的HGrid

新建Region 将style 改成HGrid

新建Tree

Tree来做出层次结构

nodeDef 显示, chileNode 将两个node联系起来

这里是OUVO,不是其他的VO 其他的则不显示子菜单

子菜单

注:Ancestor Node 如果在PageLayout下就直接页面.Region如果中间还有Region 则是页面.Region1.Region2.

显示

此时的ALL 不会显示为ALL 是显示ROOT NODE 这需要在CO 中进行修改

获取HGrid 将RootNode 修改在 CO中的processRequest修改勾选框有两种做法,一种是用HGrid 提供的multipleSelection 

显示效果为:

HGrid 中的多选框 ,不能设置ActionType,   两种方法进行操作,第一种较为简单,单独做一个Checkbox的域,可以设置ActionType 直接传参(缺点不能将位置调到之前Hgrid 生成的多选框的位置,只能在在Hgrid 之后添加) 第二种较为繁琐,利用js 在加载时将Hgrid的的多选框上添加函数事件.

第一种:

用两个checkbox的原因是使用一个,HGrid 会自动让它变成multipleSelection 就算写了Action Type 都没有用所以建两个Checkbox  VO 对应 父类菜单的VO (对应子类VO,不能下拉菜单 )

让第一个CheckBox不显示(两种方法)

第一种

在CO中的processRequest进行设置

第二种

Rendered 设置为false 就可以了

 

隐藏select 成功

 

设置Action

提交进来后对其进行处理

获取父类所有菜单,获取记录,

勾选出发后,判断是ALL 触发的(由于ALL 没有对应VO中的数据 ,所以判断触发,由系统页面分配的HTML 元素判断 , 由于ALL是RootNode 始终处于第一个元素,所以元素id不变)

判断确定是ALL触发后则将所有的菜单中的selectflag 设为Y 则就等于将所有的勾选框进新了勾选

ALL取消勾选(在ALL触发时遍历所有的勾选框进行判断,如果是全部选中则将所有置为否)

遍历所有菜单,如果有一个未被勾选,可以确定要求为全部选中,反之是要求全部取消选中;确定需求后,直接再一次遍历根据需求将值设置.

在checkbox 中Action  设置Parameters

如果是父菜单,sob这个参数则会有值, 如果是子菜单则没有

判断如果是父类菜单触发的 遍历所有父类菜单,被勾选上的,将其子VO中的selectflag 设为Y,如果没有勾选的将其子VO中的selectflag 设为 N (实现的功能是勾选父菜单,子菜单全部勾选,取消勾选父菜单,子菜单全部取消勾选) 

判断为子菜单触发的话,获取当前VO的下标我这里使用的是系统参数evtSrcRowId ,参数是一串字符串用下划线分隔开的,最后一个数据是则是下标值,也可以通过系统函数获取当前VO的Index.获取后,找到该下标的SOB 遍历其子VO中的勾选情况,如果有一个为未勾选,则整个状态为false (采用与运算) 反之全部勾选则为true ,为true 将该SOB的selectfalg设为Y 否则为N.(实现的功能是全选父菜单的子菜单,父菜单勾选,父菜单中的任意子菜单没有勾选,取消勾选父菜单)

第二种:

思路:通过js 获取到触发的控件,再在控件上写函数提交到CO中并将页面上的数据当作参数,传到CO中根据传过来的值,进行setSelectflag,

JS 函数(一)

这个函数用过获取触发js 的控件,并且判断是否是勾选框或者是否是全选或者全否选,如果是就将需要的参数获取,submit form.

JS 函数(二)

这个函数是鼠标移动上时将全选和全否选的href置为#, 在设置时设置为onmouseover 如果设置onclick 则将先进href 后再将值置为#,原来的href 为系统生成的js函数,只是将页面上显示出来的全部勾选或者否选.用函数将其置为#,后用上一函数,改为点击进入CO. 

OAF中使用js 是在CO中的processRequest 用String将function 拼接,用     pageContext.putJavaScriptFunction 将js 加进到js库中,再在触发区域使用setOnClick;

同理将此函数与触发区域绑定,但是使用setOnMouseOver;

将系统生成的js 函数 submit拿过来用有几点需要注意;

submitForm('DefaultFormName',1,{'evtSrcRowIdx':'','sob':'','evtSrcRowId':'',event:'Test1',source:'Checkbox','sobt':'','out':v,'check':flag});returntrue;

这个js函数主要是中间几个系统的参数,可以选择不修改,也可以删除,但是参数名不能删除

自己需要传参可以在后面添加,我添加了sobt,out和check 这三个参数在 CO中的processFormRequest 中直接使用Stringsobt=pageContext.getRawParameter("sobt").trim();获取,会有空行,所以使用trim()去掉前后空格

setSelectflag 过程与上一方法类似,不进行再次贴图.

 

注:在过程中遇到使用部分VOImpl和VORowImpl (不知道是什么原因导致)会报类型转化错误此时可以直接使用am.findViewObject 返回VO的父类对象ViewObject则可以正常使用后期解决,在此修改

注:js在不同的浏览器中兼容性的问题需要考虑,贴图只是IE的