Posted on 2008-08-07 20:16
云自無心水自閑 閱讀(5628)
評論(6) 編輯 收藏 所屬分類:
心得體會 、
Struts2
前一陣子使用了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
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
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
package demo;
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"