云自无心水自闲

天平山上白云泉,云自无心水自闲。何必奔冲山下去,更添波浪向人间!
posts - 288, comments - 524, trackbacks - 0, articles - 6
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

struts2 结合 dhtmlx tree

Posted on 2008-08-07 20:16 云自无心水自闲 阅读(5605) 评论(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(/
&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"


评论

# re: struts2 结合 dhtmlx tree  回复  更多评论   

2009-05-20 23:51 by 永远的雷欧
menuString 的内容就是 Xml字符串吧? 谢谢博主的文章!

# re: struts2 结合 dhtmlx tree  回复  更多评论   

2009-05-21 18:38 by usherlight
@永远的雷欧
Yes.

# re: struts2 结合 dhtmlx tree  回复  更多评论   

2010-05-12 10:07 by wyonge@gmail.com
我的例子也是这样写的。不过在IE下面显示没有问题,在FF下面,仍然提示xml结构错误。
用firebug查看了一下,action返回的时候,其实质上是HTML格式。也就是说,返回的内容contentType是text/html,而不是text/xml,不知道是不是这个原因,导致了FF觉得是错误!!!

# re: struts2 结合 dhtmlx tree  回复  更多评论   

2010-08-04 11:10 by www
String.prototype._dhx_trim = function(){
return this.replace(/&nbsp;/g," ").replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g,"");
}


正则表达式,替换

# re: struts2 结合 dhtmlx tree  回复  更多评论   

2010-08-09 07:54 by usherlight
@www
使用正则表达式进行替换,我是知道的,但是关键是为什么进行这样的替换?
为什么把&nbsp换成回车?

# re: struts2 结合 dhtmlx tree  回复  更多评论   

2010-08-09 07:55 by usherlight
没看仔细,是把&nbsp;和回车全部都删除了。

只有注册用户登录后才能发表评论。


网站导航: