struts2 结合 dhtmlx tree

前一阵子使用了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(/ &nbsp; /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" >
             &nbsp;
         </ 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(/&nbsp;/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"