树形菜单能很好的呈现菜单项之前的从属关系,结构清晰明了。J-hi平台提供了自定义树形菜单的功能,通过简单的配置即可实现。
本文主要介绍通过树形菜单选择带回节点值的实现方法。以选择带回行政区划位置为例。
数据库表设计:
默认带回页选择界面:
通过jhi自动生成代码的功能,对于lookup xzqhwz的字段默认是如上带回页面,显然并不能表现行政区划位置之间的主从关系。
树形带回页面:
而如果实现如下页面的展示,将会清晰方便许多。
双击即可带回节点,也可通过配置带回节点的各级父节点。
下面是配置的方法:
配置方法:
修改xml
修改C:"Program"hi-studio"eclipse"workspace"earch5"web"WEB-INF"config"himenu-config.xml
在代码末尾:
</object>
</java>
之前插入:(注意修改其中参数)
<void method="put">
<string>zdtree</string>
<object class="org.hi.base.menu.strutsmenu.WebDynamicMenuDefine">
<void property="keymap">
<object class="java.util.HashMap">
<void method="put">
<string>id</string>
<string>parentxzqhwz</string>
</void>
</object>
</void>
<void property="parent">
<string>id</string>
</void>
<void property="child">
<string>parentxzqhwz</string>
</void>
<void property="childValue">
<int>0</int>
<!
新版本jhi应为:<string>0</string>
>
</void>
<void property="menuName">
<string>zdtree</string>
</void>
<void property="beanName">
<string>org.hi.zdtree.model.Xzqhwz</string>
</void>
<void property="submenuName">
<string>zdtree</string>
</void>
<void property="title">
<string>行政区划位置</string>
</void>
<void property="titleField">
<string>xzqhwz</string>
</void>
<void property="needShow">
<boolean>true</boolean>
</void>
<void property="javascript">
<string>
function backAgent(id,orgName){
if(opener.document.getElementById('yzjbxx.xzqhwz')!=null){
opener.document.getElementById('yzjbxx.xzqhwz').value=orgName;
}
<!带回到相应的页面的相应文本框。
>
else{ opener.document.getElementById('xzqhwz.pxzqhwz').value=orgName;
opener.document.getElementById('xzqhwz.parentxzqhwz.id').value=id;
window.close();
}
}
</string>
</void>
<void property="action">
<string>{js}backAgent([#id],"'[#xzqhwz]"');</string>
<!在树型结构上通过双击一个节点,获取带回该节点的各级上节点
<string>{js}backAgent([#id],"'[#parentxzqhwz.parentxzqhwz.parentxzqhwz.xzqhwz][#parentxzqhwz.parentxzqhwz.xzqhwz][#parentxzqhwz.xzqhwz][#xzqhwz]"');</string>
>
</void>
</object>
</void>
修改XzqhwzEdit.jsp页面
将C:"Program"hi-studio"eclipse"workspace"earch5"web"zdtree"XzqhwzEdit.jsp中
onclick="xzqhwz_lookupPOP('parentxzqhwz')"
改为:
onclick="window.open('/tree.action?menuName=zdtree','部门','width=300,height=500,left=10,top=20,location=no,status=no')"
这样,到Xzqhwz的页面,点击父节点的带回按钮即可看到效果,同样lookup到xzqhwz字段的地方也修改Edit.jsp页面的onclick动作就行啦。
该文档是对J-Hi树形的入门级介绍,J-Hi的树功能还有:节点的过滤,lazy加载,一个节点可以多个图标、复选框效果,多个实体组合形成一棵树,我们将在以后继续讲解
注:该文档由J-Hi爱好者"冯思豪"提供,他的QQ号为382600911,欢迎大家与他在技术上多多交流