前一阵子使用了DHtmlx的Tree,视觉效果不错,功能也不弱。具体参见:http://dhtmlx.com
现在把Struts2结合DHtmlxTree的经验心得整理一下,发表出来:
一、Struts.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="demo" extends="struts-default">
<action name="menu" method="execute" class="demo.TreeMenuAction">
<result>/WEB-INF/menu.jsp</result>
</action>
</package>
</struts>
二、tree.jsp
< %
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
% >
< html >
< head >
< title > Main Page </ title >
<!-- 注意此处的路径需要根据各自具体情况修改 -->
< link rel ="STYLESHEET" type ="text/css" href ="styles/dhtmlxtree.css" >
< script src ="scripts/dhtmlxcommon.js" ></ script >
< script src ="scripts/dhtmlxtree.js" ></ script >
</ head >
< body onload ="loadTree(); " style ="padding: 0; margin: 0; overflow: hidden; height: 100%;" >
< script >
String.prototype._dhx_trim = function(){
return this.replace(/ /g," ").replace(/(^[ /t/n/r]*)|([ /t/n/r]*$)/g,"");
}
/* init tree */
var tree;
function loadTree(){
tree=new dhtmlXTreeObject("doctree_box","100%","100%",0);
tree.setImagePath("images/"); <!-- 注意此处的路径需要根据各自具体情况修改 -->
tree.setOnClickHandler(
function(id){ openPathDocs(id); }
);
tree.loadXML(" < %=basePath % > /menu.do");
}
/* open path funtion */
function openPathDocs(id){
if (tree.getUserData(id, "thisurl") != null ){
window.frames.sampleframe.location.href = " < %=path % > /" + tree.getUserData(id, "thisurl") + ".do";
return;
}
}
function autoselectNode(){
tree.selectItem(node,true);
tree.openItem(node);
}
</ script >
< table width ="100%" height ="100%" cellpadding ="0" cellspacing ="0" border ="0" >
< tr >
< td valign ="top" width ="276" >
< div id ="doctree_box" style ="width: 274px; height: 100%;" ></ div >
</ td >
< td width ="10" background ="images/grid.gif" >
</ td >
< td align ="right" >
< iframe id ="sampleframe" name ="sampleframe" width ="100%" height ="99%" frameborder ="0" src ="blank.html" style ="border: 0px solid #cecece;" ></ iframe >
</ td >
</ tr >
</ table >
</ body >
</ html >
上面的JavaScript基本上是从dhtmlx的例子中修改而来,理解起来并不复杂,只有
String.prototype._dhx_trim = function(){
return this.replace(/ /g," ").replace(/(^[ /t/n/r]*)|([ /t/n/r]*$)/g,"");
}
这一段代码含义不明。
三、Action
public class TreeMenuAction {
private String menuString;
public String execute() {
StringBuffer buf = new StringBuffer();
buf.append("<tree id=/"0/">");
buf.append(" <item text=/"Java/">");
buf.append(" <item text=/"Thinking in java/">");
buf.append(" <userdata name=/"thisurl/">java_tij.do</userdata>");
buf.append(" </item>");
buf.append(" <item text=/"Head first design pattern/">");
buf.append(" <userdata name=/"thisurl/">java_hfdp.do</userdata>");
buf.append(" </item>");
buf.append(" </item>");
buf.append(" <item text=/"Fiction/">");
buf.append(" <item text=/"Harry Porter/">");
buf.append(" <userdata name=/"thisurl/">fiction_hp.do</userdata>");
buf.append(" </item>");
buf.append(" <item text=/"Oliver Twist/">");
buf.append(" <userdata name=/"thisurl/">fiction_ot.do</userdata>");
buf.append(" </item>");
buf.append(" </item>");
buf.append("</tree>");
menuString = buf.toString();
return "success";
}
public String getMenuString() {
return menuString;
}
public void setMenuString(String menuString) {
this.menuString = menuString;
}
}
四、menu.jsp
<%@ page contentType="text/xml;charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:property value="menuXmlString" escape="false"/>
过程是这样的:首先在浏览器地址栏中输入:http://......./tree.jsp
展示tree.jsp,在load函数中调用menu.do
menu.do对应TreeMenuAction,返回menu.jsp,而menu.jsp只包含menuString的值,注意在menu.jsp中的escape="false"
转自 http://www.blogjava.net/usherlight/archive/2009/05/20/220756.html