一棵 tree

最新推荐文章于 2024-03-25 15:23:31 发布

109905418

最新推荐文章于 2024-03-25 15:23:31 发布

阅读量1.2k

点赞数

文章标签： tree string class exception prototype null

本文链接：https://blog.csdn.net/aduovip/article/details/4564181

版权

一个 LuanmadAjaxDtree实用例子

实现技术:spring+struts2+hibernate+json+dtree

总体图:

jar包(41个)图:

开发流程:

1.搭建好框架后,首先创建一个数据库 luanmad

Dtree.sql

CREATE DATABASE 'luanmad'

USE `luanmad`;

DROP TABLE IF EXISTS `treenodes`;

CREATE TABLE `treenodes` (

`id` int(11) NOT NULL AUTO_INCREMENT,
`pid` int(11) NOT NULL,

`name` varchar(200) NOT NULL,

`url` varchar(200) NOT NULL,
`title` varchar(200) DEFAULT NULL,
`target` varchar(20) DEFAULT NULL,
`icon` varchar(200) DEFAULT NULL,
`sort` int(11) NOT NULL,
`fontStyleName` varchar(500) DEFAULT NULL,
`iconOpen` varchar(80) DEFAULT NULL,
`open` tinyint(1) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=106 DEFAULT CHARSET=utf8 CHECKSUM=1 DELAY_KEY_WRITE=1 ROW_FORMAT=DYNAMIC;

插入数据

insert into `treenodes(`id`,`pid`,`name`,`url`,`title`,`target`,`icon`,`sort`,`fontStyleName`,`iconOpen`,`open`) values

(35,0,'aaa','/index.jsp','aaa',NULL,'images/ajax_dtree/folder.gif',10,'font-weight:bold;font-size:14px;color:#0066FF',NULL,NULL),

(36,0,'bbb','/index.jsp','bbb',NULL,'images/ajax_dtree/folder.gif',2,'font-weight:bold;font-size:14px;color:#009900',NULL,NULL),(37,36,'ccc','#','ccc',NULL,'images/ajax_dtree/folder.gif',3,';;;color:#000000',NULL,NULL),

-------------------------------------------------------------

2.几个重要配置 xml 文件的写法

web.xml

在<web-app></web-app>之间写上:

<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath*:applicationContext*.xml</param-value>
</context-param>

<filter>
  <filter-name>hibernateFilter</filter-name>
  <filter-class>
   org.springframework.orm.hibernate3.support.OpenSessionInViewFilter
  </filter-class>
</filter>

<filter-mapping>
<filter-name>hibernateFilter</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>

<filter>
  <filter-name>struts2</filter-name>
  <filter-class>
   org.apache.struts2.dispatcher.FilterDispatcher
  </filter-class>
</filter>

<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

<listener>
<listener-class> org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>

在这里将连接数据库的配置写到 hibernate.cfg.xml 文件中

hibernate.cfg.xml

<session-factory>
<property name="connection.username">root</property>
<property name="connection.password">root</property>
<property name="connection.url">
  jdbc:mysql://localhost:3306/luanmad?useUnicode=true&characterEncoding=UTF8
</property>
<property name="dialect">
  org.hibernate.dialect.MySQL5Dialect
</property>
<property name="myeclipse.connection.profile">
  luanmadAjaxDtree
</property>
<property name="connection.driver_class">
  com.mysql.jdbc.Driver
</property>
<property name="show_sql">false</property>
<property name="connection.autocommit">true </property>
<property name="connection.useUnicode">true</property>
    <property name="connection.characterEncoding">utf8</property>

<mapping resource="com/luanmad/ajax/dtree/model/TreeNodes.hbm.xml" />

</session-factory>

将applicationContext.xml文件分 2 个写

applicationContext-common.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:aop="http://www.springframework.org/schema/aop"
      xmlns:tx="http://www.springframework.org/schema/tx"
      xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
           http://www.springframework.org/schema/aop
           http://www.springframework.org/schema/aop/spring-aop-2.0.xsd
           http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd">
<bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
  <property name="configLocation">
   <value>classpath:hibernate.cfg.xml</value>
  </property>
</bean>

<bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager">
  <property name="sessionFactory">
   <ref bean="sessionFactory"/>
  </property>
</bean>

<tx:advice id="txAdvice" transaction-manager="transactionManager">
  <tx:attributes>
   <tx:method name="add*" propagation="REQUIRED" />
   <tx:method name="del*" propagation="REQUIRED"/>
   <tx:method name="update*" propagation="REQUIRED"/>
   <tx:method name="sort*" propagation="REQUIRED"/>
   <tx:method name="*" read-only="true" />
  </tx:attributes>
</tx:advice>

<aop:config>
  <aop:pointcut id="allManagerMethod" expression="execution(* com.luanmad.ajax.dtree.manager.*.*(..))"/>
  <aop:advisor pointcut-ref="allManagerMethod" advice-ref="txAdvice"/>
</aop:config>
</beans>

applicationContext-beans.xml

在<beans></beans>之间写上:

<bean id="treeNodesDAO" class="com.luanmad.ajax.dtree.dao.impl.TreeNodesDAOImpl" scope="prototype">
      <property name="sessionFactory" ref="sessionFactory"></property>
</bean>

<bean id="treeNodesManager" class="com.luanmad.ajax.dtree.manager.impl.TreeNodesManagerImpl" scope="prototype">
     <property name="treeNodesDAO" ref="treeNodesDAO"></property>
</bean>

<bean name="treeNodesList" class="com.luanmad.ajax.dtree.action.TreeListAction" scope="prototype">
      <property name="treeNodesManager" ref="treeNodesManager"></property>
</bean>

<bean name="treeNodesAdd" class="com.luanmad.ajax.dtree.action.TreeListAction" scope="prototype">
     <property name="treeNodesManager" ref="treeNodesManager" ></property>
</bean>

<bean name="treeNodesUpdate" class="com.luanmad.ajax.dtree.action.TreeListAction" scope="prototype">
     <property name="treeNodesManager" ref="treeNodesManager" ></property>
</bean>

<bean name="treeNodesDelete" class="com.luanmad.ajax.dtree.action.TreeListAction" scope="prototype">
     <property name="treeNodesManager" ref="treeNodesManager" ></property>
</bean>

<bean name="treeNodesSort" class="com.luanmad.ajax.dtree.action.TreeListAction" scope="prototype">
     <property name="treeNodesManager" ref="treeNodesManager" ></property>
</bean>

struts.xml文件

<action name="treeNodesList" class="treeNodesList" method="list" >
   <result type="json"></result>
  </action>

  <action name="listParentNodes" class="treeNodesList" method="listParentNodes" >
   <result >jsp/update.jsp</result>
  </action>

  <action name="treeNodesAdd" class="treeNodesAdd" method = "add">
      
     <interceptor-ref name="token"></interceptor-ref>
           <interceptor-ref name="defaultStack"></interceptor-ref>
      <result name="invalid.token" >menu.jsp</result>
      <result >menu.jsp</result>
  </action>

  <action name="treeNodesUpdate" class="treeNodesUpdate" method="update">
      <result>menu.jsp</result>
      <result name="input">menu.jsp</result>
  </action>

  <action name="treeNodesDelete" class="treeNodesDelete" method="delete">
      <result>menu.jsp</result>
      <result name="input">menu.jsp</result>
  </action>

  <action name="treeNodesSort" class="treeNodesSort" method="sort">
      <result>menu.jsp</result>
      <result name="input">menu.jsp</result>
  </action>
</package>
log4j.properties：

# For JBoss: Avoid to setup Log4J outside $JBOSS_HOME/server/default/deploy/log4j.xml!
# For all other servers: Comment out the Log4J listener in web.xml to activate Log4J.
log4j.rootLogger=INFO, stdout, logfile

log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d %p [%c] - %m%n

log4j.appender.logfile=org.apache.log4j.RollingFileAppender
log4j.appender.logfile.File=${petstore.root}/WEB-INF/petstore.log
log4j.appender.logfile.MaxFileSize=512KB
# Keep three backup files.
log4j.appender.logfile.MaxBackupIndex=3
# Pattern to output: date priority [category] - message
log4j.appender.logfile.layout=org.apache.log4j.PatternLayout
log4j.appender.logfile.layout.ConversionPattern=%d %p [%c] - %m%n

--------------------------------------------------

3.模块开发

(1)实体bean:

TressNodes.java

public class TreeNodes implements java.io.Serializable
{

private Integer id;
private Integer pid;   //父节点Id
private String name;
private String url;
private String title;
private String target;
private String icon;
private Integer sort;
private String fontStyleName;
private String iconOpen;
private Boolean open;

...

}

TreeNodes.hbm.xml

<hibernate-mapping>

...

</class>

<hibernate-mapping>

Style.java

//字体风格样式

public class Style
{

private String fontType;
private String fontStyle;
private String fontSize;
private String fontColor;

...

}

(2)DAO 及 DAOImpl层:

public interface TreeNodesDAO
{
     int addNode(TreeNodes treeNodes)throws SQLException;
     void updateNode(TreeNodes treeNodes)throws SQLException;
     void deleteNode(int id)throws SQLException;
     List queryNodes(String sql)throws SQLException;
     String sortNode(TreeNodes treeNodes,String move)throws SQLException;
     void updateByselectiveKey(int id,int sort)throws SQLException;
}

TreeNodesDAOImpl.java

public class TreeNodesDAOImpl extends HibernateDaoSupport implements
TreeNodesDAO
{

public int addNode(TreeNodes treeNodes) throws SQLException
{
  int result = (Integer) this.getHibernateTemplate().save(treeNodes);
  this.getHibernateTemplate().flush();
  return result;
}

public void deleteNode(int id) throws SQLException
{
this.getSession().createQuery("delete from TreeNodes where id=" + id).executeUpdate();
}

public List queryNodes(String sql) throws SQLException
{
return this.getHibernateTemplate().find(sql);
}

public void updateNode(TreeNodes treeNodes) throws SQLException
{
this.getHibernateTemplate().update(treeNodes);
}

/**
* 上下两节点排序
*/
public String sortNode(TreeNodes treeNodes, String move)
   throws SQLException
{
  int currentNodeSort = treeNodes.getSort();
  int currentNodeId = treeNodes.getId();
  int currentNodePid = treeNodes.getPid();

  String getNodeSql = null;
  Query query = null;
  String status = "SORTSUCCESS";
  try
  {   if ("DOWN".equals(move) )
   {
    getNodeSql = "from TreeNodes tr where tr.sort in (select max(tr1.sort) from TreeNodes tr1 where tr1.pid =:currentNodePid   and tr1.sort <:currentNodeSort ) and tr.pid =:currentNodePid ";

   }
   else if ("UP".equals(move) )
   {
    getNodeSql = "from TreeNodes tr where tr.sort in (select min(tr1.sort) from TreeNodes tr1 where tr1.pid =:currentNodePid   and tr1.sort >:currentNodeSort ) and tr.pid =:currentNodePid ";
   }
   else
   {
    status = "Failure";
    return status;
   }

   query = this.getSession().createQuery(getNodeSql);
   query.setInteger("currentNodePid", currentNodePid);
   query.setInteger("currentNodeSort", currentNodeSort);

List<TreeNodes> eeList = query.list();

   //both update the sort by both id
   for (TreeNodes treeNodes2 : eeList)
   {

    updateByselectiveKey(currentNodeId, treeNodes2.getSort());
    updateByselectiveKey(treeNodes2.getId(), currentNodeSort);

}

  }
  catch (Exception e)
  {
   System.out.println(e);
  }
  return status;
}

public void updateByselectiveKey(int id, int sort) throws SQLException
{
  Query query = null;
  query = this.getSession().createQuery("update TreeNodes set sort=:sort where id=:id");
  query.setInteger("id", id);
  query.setInteger("sort", sort);
  query.executeUpdate();
}
}

(2)Service 及 ServiceImpl层:

TreeNodesService 与TreeNodesDAO 代码相似

TreeNodesServiceImpl.java:

public class TreeNodesManagerImpl implements TreeNodesManager
{

private TreeNodesDAO treeNodesDAO;

public TreeNodesDAO getTreeNodesDAO(){return treeNodesDAO;}

public void setTreeNodesDAO(TreeNodesDAO treeNodesDAO) {this.treeNodesDAO = treeNodesDAO;}

public void addNode(TreeNodes treeNodes) throws SQLException
{
treeNodesDAO.addNode(treeNodes);
}

public void deleteNode(int id) throws SQLException
{
treeNodesDAO.deleteNode(id);
}

public List queryNodes(String sql) throws SQLException
{
return treeNodesDAO.queryNodes(sql);
}

public void updateNode(TreeNodes treeNodes) throws SQLException
{
treeNodesDAO.updateNode(treeNodes);
}

//节点排序

public String sortNode(TreeNodes treeNodes, String move)throws SQLException
{
return treeNodesDAO.sortNode(treeNodes, move);
}

//根据选中的节点Id,序号进行更新

public void updateByselectiveKey(int id, int sort) throws SQLException
{
treeNodesDAO.updateByselectiveKey(id, sort);

}

}

(2)Action层(这层处理所有业务,至关重要):

public class TreeListAction extends ActionSupport
{
private TreeNodes treeNodes;
private TreeNodesManager treeNodesManager;
private List<TreeNodes> treeNodesList;
private String treeNodesString;
private Style style;
private Map<String, Integer> parentNodesMap = new HashMap<String, Integer>();
private List<TreeNodes> parentNodesList = new ArrayList<TreeNodes>();
private String move;

//这里写一些 getter 与 setter 方法

...

@JSON(serialize = false)
public TreeNodesManager getTreeNodesManager()
{
return treeNodesManager;
}

public void setTreeNodesManager(TreeNodesManager treeNodesManager)
{
this.treeNodesManager = treeNodesManager;
}

@JSON(name = "treeList")
public List<TreeNodes> getTreeNodesList()
{
return treeNodesList;
}

public void setTreeNodesList(List<TreeNodes> treeNodesList)
{
this.treeNodesList = treeNodesList;
}

@JSON(serialize = false)
public TreeNodes getTreeNodes()
{
return treeNodes;
}

public void setTreeNodes(TreeNodes treeNodes)
{
this.treeNodes = treeNodes;
}

/**
* 加载树
* @return
* @throws Exception
*/
public String list() throws Exception
{

treeNodesString = createTreeNodes();
return SUCCESS;
}

public String add() throws Exception
{

  treeNodes.setName(URLDecoder.decode(URLDecoder.decode(treeNodes.getName(), "utf-8"), "utf-8"));
  treeNodes.setTitle(treeNodes.getName());
  treeNodes.setIcon("images/ajax_dtree/folder.gif");
  treeNodes.setFontStyleName(style.getFontStyle() + style.getFontSize()
         + ";color:" + style.getFontColor());

treeNodesManager.addNode(treeNodes);

return SUCCESS;
}

public String update() throws Exception
{

  //为了兼容火狐与IE的编码问题，在客户端需进行两次编码（使用UTF-8编码），在此虽两次解码后再将值插入到数据库中。
  treeNodes.setName(URLDecoder.decode(URLDecoder.decode(treeNodes.getName(), "utf-8"), "utf-8"));
  treeNodes.setTitle(treeNodes.getName());
  treeNodes.setIcon("images/ajax_dtree/folder.gif");
  treeNodes.setFontStyleName(style.getFontStyle() + style.getFontSize()
         + ";color:" + style.getFontColor());

treeNodesManager.updateNode(treeNodes);
return SUCCESS;
}

/**
* 列出所有节点作为更新节点时的父节点
* @return
* @throws Exception
*/
public String listParentNodes() throws Exception
{
  try
  {
   parentNodesList = treeNodesManager.queryNodes("From TreeNodes as t Order By sort");

  }
  catch (SQLException e)
  {
   e.printStackTrace();
  }

return SUCCESS;
}

public String delete() throws Exception
{

treeNodesManager.deleteNode(treeNodes.getId());
return SUCCESS;
}

/**
* 节点排序
* @return
* @throws Exception
*/
public String sort() throws Exception
{

treeNodesManager.sortNode(treeNodes, move);
return SUCCESS;
}

/**
* 构建树。
* @return
*/
public String createTreeNodes()
{
StringBuffer treeListBuffer = new StringBuffer();

  try
  {
   treeNodesList = treeNodesManager.queryNodes("From TreeNodes as t Order By sort");
  }
  catch (SQLException e)
  {
   e.printStackTrace();
  }

TreeNodes treeNodesContent = null;

  for (int i = 0; i < treeNodesList.size(); i++)
  {
   System.out.println("i=" + i);
   treeNodesContent = treeNodesList.get(i);

   // 构树时的结点次序要严格固定好，不能篡序。
   treeListBuffer.append("d.add(").append(treeNodesContent.getId()).append(",") // id
   .append(treeNodesContent.getPid()).append(",") // pid
   .append("/"").append(treeNodesContent.getName()).append("/",") // name
   .append("/"").append(treeNodesContent.getUrl()).append("/",") // url
   .append("/"").append(treeNodesContent.getTitle()).append("/",") // title
   .append("/"").append(treeNodesContent.getTarget()).append("/",") // target
   .append("/"").append(treeNodesContent.getIcon()).append("/",") // icon
   // E:/Works/trunk/ctoshop/project/shopAdmin/resources/StoreAdmin/images/ajax_dtree/img/folder.gif
   .append(treeNodesContent.getSort()).append(",") // sort
   // .append("/"").append("<font style=").append(treeNodesContent.getFontStyleName()).append(">").append(treeNodesContent.getName()).append("</font>").append("<img src='").append("images/ajax_dtree/available.gif'").append(" alt='类别显示' />").append("/"")
   // // fontStyle+name+img(is_available)
   .append("/"").append("<font style='").append(treeNodesContent.getFontStyleName()).append("'>").append(treeNodesContent.getName()).append("</font>").append("/"") // fontStyle+name+img(is_available)
   .append(");/n");
  }

  treeListBuffer.append("d.draw();");
  System.out.println("11treeList=" + treeListBuffer.toString());
  return treeListBuffer.toString();

}
}

到这里主要业务代码完成，还需要写一个简单的测试类

public class Test
{
public static List treeUtilList()
{
ApplicationContext context = new ClassPathXmlApplicationContext("classpath:applicationContext-*.xml");
TreeNodesManager treeNodesManager =(TreeNodesManager) context.getBean("treeNodesManager");
List<TreeNodes> treeList = new ArrayList<TreeNodes>();
TreeNodes treeNodes1 = new TreeNodes();
treeNodes1.setPid(3);
treeNodes1.setName("republic of China");
treeNodes1.setUrl("/index.jsp");
treeNodes1.setTitle("luanmadAjaxDtree");
treeNodes1.setSort(6);
treeNodes1.setIcon("images/ajax_dtree/folder.gif");
treeNodes1.setFontStyleName("font-style:italic;font-family:Garamond;font-size:60px;color:#ff9900;");
try
{
  treeNodesManager.addNode(treeNodes1);

  treeList = treeNodesManager.queryNodes("From TreeNodes as t");
  System.out.println("get list success!");
  Iterator iterator = treeList.iterator();
  while(iterator.hasNext())
  {
   TreeNodes treeNodes = (TreeNodes)iterator.next();
   System.out.println("id="+treeNodes.getId()+",pid="+treeNodes.getPid()+",name="+treeNodes.getName()+",url="+treeNodes.getUrl()+",sort="+treeNodes.getSort()+",icon="+treeNodes.getIcon());
  }
}
catch (SQLException e)
{
  e.printStackTrace();
}
return treeList;
}

public static void main(String[] args)
{
   ApplicationContext context = new ClassPathXmlApplicationContext("classpath:applicationContext-*.xml");
  TreeNodesManager treeNodesManager =(TreeNodesManager) context.getBean("treeNodesManager");
  List<TreeNodes> treeNodesList = null;

  TreeNodes treeNodes = new TreeNodes();
  treeNodes.setPid(1);
  treeNodes.setName("999 of China中国");
  treeNodes.setUrl("/index.jsp");
  treeNodes.setTitle("luanmadAjaxDtree");
  treeNodes.setSort(99);
  treeNodes.setIcon("images/ajax_dtree/folder.gif");
  try
  {
   treeNodesManager.addNode(treeNodes);
   String string = "%25E7%259B%25B4%25E6%258E%25A5%25E5%258F%2582%25E4%25B8%258E";
   System.out.println("decode="+URLDecoder.decode(URLDecoder.decode(string, "utf-8"),"utf-8"));

  }
  catch (Exception e1)
  {
   e1.printStackTrace();
  }

}

--------------------------------------------------

4.页面显示

menu.jsp

<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%@ page import="com.luanmad.ajax.dtree.test.*"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>luanmad!--LuanmadAjaxDtree实用例子</title>
  <link rel="StyleSheet" href="css/dtree.css" type="text/css" />
  <script type="text/javascript" src="javascript/jquery.js"></script>
     <script type="text/javascript" src="javascript/util.js"></script>
     <script type="text/javascript" src="javascript/dtree.js"></script>
  <script type="text/javascript" src="javascript/nodeOperate.js"></script>

</head>
<body>
  <a href="http://www.zoomhoo.com"><center><h1><font color="blue">luanmad! spring+struts2+hibernate+json+dtree demo</font></h1></center></a>
  <p>
   <a href="javascript: d.openAll();" alt="">全部展开</a> |
   <a href="javascript: d.closeAll();" alt="">全部合拢</a>
  </p>
  <div id="dtree" class="dtree">

        </div>
  <div id="addDiv" style="background-color: white; position: absolute; display: none; padding: 5px; width: 5px;">
  </div>

  <form name="menuForm">
   <input type="hidden" name="currentNodeId" id="currentNodeId" value="">

  </form>
</body>
</html>

add.jsp

<%@ page contentType="text/html; charset=utf-8" language="java"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page import="java.net.URLDecoder"%>
<%@ page import="java.net.URLEncoder"%>
<html>

<title>luanmad ajax dtree deom</title>

</script>

</td>

         </tr>
         <tr>
          <td height="229" colspan="3" align="center" valign="top"
           bgcolor="#E4E4E4">
           <table width="98%" border="0" cellspacing="0" cellpadding="0">
            <s:form action="treeNodesAdd.action"
             οnsubmit="return check_submit()" name="theform"
             theme="simple">

<s:token></s:token>
             <tr>
              <td height="25">
               增加类别
              </td>
             </tr>
             <tr>
              <td height="174" valign="top" bgcolor="#FFFFFF">
               <table cellspacing="0" cellpadding="3" border="0">
                <tr>
                 <td width="125">
                  <label>
                   类别名:
                  </label>
                  <span class="required">*</span>
                 </td>
                 <td colspan="2">
                  <s:textfield name="treeNodes.name" id="nodeName" />

                 </td>
                 <td with="200">
                  <label>
                   URL地址：
                  </label>
                  <span class="required">*</span>
                 </td>
                 <td width="1" colspan="4">
                  <s:textfield name="treeNodes.url" id="nodeUrl"
                   maxlength="200" value="#" />

</td>
</tr>

                <tr>
                 <td height="20" width="125">
                  <label>
                   类别字体样式:
                   <span class="required"></span>:
                  </label>
                 </td>
                 <TD width="100" bgcolor="#FFFFFF" style="WIDTH: 100px">
                  <s:select label="类别字体样式"
                   οnchange="applyFont('example-2', this.options[this.selectedIndex].text);"
                   list="#{'字体类型':';','Arial':'font-family:Arial,Helvetica,sans-serif;','Garamond':'font-family:Garamond;','Tahoma':'font-family:Tahoma;','Verdana':'font-family:Verdana;'}"
                   listKey="value" listValue="key" value="---select----"
                   name="style.fontType" id="style.fontType"
                   theme="simple" />
                 </TD>
                 <TD width="95" bgcolor="#FFFFFF" style="WIDTH: 95px">
                  <s:select label="字体大小"
                   οnchange="applyFontSize('example-2', this.options[this.selectedIndex].text);"
                   list="#{'字体大小':';','10px':'font-size:10px;','14px':'font-size:14px','20px':'font-size:20px'}"
                   listKey="value" listValue="key" value="---select----"
                   name="style.fontSize" id="style.fontSize"
                   theme="simple" />
                 </TD>
                 <TD width="95" bgcolor="#FFFFFF" style="WIDTH: 95px">
                  <s:select label="字体样式"
                   οnchange="applyFontStyle('example-2', this.options[this.selectedIndex].text);"
                   list="#{'字体样式':';','BOLD':'font-weight:bold;','ITALIC':'font-style:italic;','NORMAL':'font-style:normal;'}"
                   listKey="value" listValue="key" value="---select----"
                   name="style.fontStyle" id="style.fontStyle"
                   theme="simple" />
                 </TD>
                 <TD width="90" bgcolor="#FFFFFF" style="WIDTH: 90px">
                  <s:textfield id="style.fontColor"
                   name="style.fontColor"
                   οnclick="applyFontColor('example-2', this.value);"
                   οnfοcus="applyFontColor('example-2', this.value);"
                   οnblur="relateColor(this.id,'colorLayout');"
                   οnmοuseup="applyFontColor('example-2', this.value);"
                   οnkeypress="return blockInvalid(this,event);"
                   οnkeyup="relateColor(this.id,'colorLayout');applyFontColor('example-2', this.value);"
                   value="#000000" size="5" maxLength="7" />
                  <DIV id="colorLayout"
                   style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; FLOAT: left; MARGIN-LEFT: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 19px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 19px; TEXT-DECORATION: none"
                   οnclick="pickColor(this.id,'style.fontColor');">
                  </DIV>

                 </TD>
                 <td width="54">
                  <DIV id="example-2">
                   example
                  </DIV>
                 </td>
                </tr>
                <tr>

<s:hidden name="treeNodes.pid"
value="%{#parameters['treeNodes.id']}" />

<%
                   String currentNodeName = request.getParameter("treeNodes.name");
                  %>
                  
                  <%
                   String decodeCurrentNodeName = URLDecoder.decode(URLDecoder
                      .decode(currentNodeName, "utf-8"), "utf-8");
                  %>
                  <s:textfield readonly="true" name="parentName"
                   value="<%=decodeCurrentNodeName%>" />
                 </td>
                 <td colspan="4">
                  <s:hidden name="treeNodes.sort"
                   value="%{#parameters['treeNodes.sort']}" />
                 </td>

                </tr>
               </table>
               <div style="margin-top: 10px;">
                <span class="important">带*为必填项</span>
               </div>
              </td>

             </tr>
             <tr>
              <td height="30" valign="bottom">
               <s:submit name="submit" label="确定" />
                   

<s:reset name="return" label="取消并返回" οnclick="hideDiv()" />

</td>
             </tr>
            </s:form>
           </table>
          </td>
         </tr>
         <tr>
          <!-- <td height="10" valign="bottom" bgcolor="#E4E4E4">
           <img src="/StoreAdmin/images/ll1.jpg" width="10" height="10" />
          </td>

    </td>
   </tr>
  </table>
</body>
</html>

update.jsp

<%@ page contentType="text/html; charset=utf-8" language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page import="java.net.URLDecoder" %>
<%@ page import="java.net.URLEncoder" %>
<html>

<title>luanmad ajax dtree deom--update</title>

    function check_submit() {
        var regu = /^[0-9]+$/;
        var re = new RegExp(regu);
        var nodeName = document.getElementById("nodeName");
        var nodeUrl = document.getElementById("nodeUrl");
        nodeName.value=encodeURI(nodeName.value,"utf-8");
        if (trim(nodeName.value) == "")
        {
            alert("请输入类别名称");
            return false;
        }
        if(trim(nodeUrl.value) == "")
        {
             alert("请输入链接地址");
            return false;
        }

        //nodeOperate_add();
        return true;
    }

</script>

         </tr>
         <tr>
          <td height="229" colspan="3" align="center" valign="top"
           bgcolor="#E4E4E4">
           <table width="98%" border="0" cellspacing="0" cellpadding="0">
            <s:form action="treeNodesUpdate.action"
             οnsubmit="return check_submit()" name="theform"
             theme="simple">

<s:token></s:token>
             <tr>
              <td height="25">
               修改类别
              </td>
             </tr>
             <tr>
              <td height="174" valign="top" bgcolor="#FFFFFF">
               <table cellspacing="0" cellpadding="3" border="0">
                <tr>
                 <td width="125">
                  <label>
                   类别名:
                  </label>
                  <span class="required">*</span>
                 </td>
                 <td colspan="2">
                  <%
                  String currentNodeName = request.getParameter("treeNodes.name");
                  %>
                  
                  <%
                     String decodeCurrentNodeName = URLDecoder.decode(URLDecoder.decode(currentNodeName, "utf-8"),"utf-8");
                  %>
                  <s:hidden name="treeNodes.id" value="%{#parameters['treeNodes.id']}" />
                  <s:textfield id="nodeName" name="treeNodes.name" value="<%=decodeCurrentNodeName %>" />

                 </td>
                  <td with="200">
                     <label>URL地址：</label>
                     <span class="required">*</span>
                 </td>
                 <td width="1" colspan="4">
                   <s:textfield name="treeNodes.url" id="nodeUrl" maxlength="200" value="%{#parameters['treeNodes.url']}" />

</td>
</tr>

                <tr>
                 <td height="20" width="125">
                  <label>
                   类别字体样式:
                   <span class="required"></span>:
                  </label>
                 </td>
                 <TD width="100" bgcolor="#FFFFFF" style="WIDTH: 100px">
                  <s:select label="类别字体样式"
                   οnchange="applyFont('example-2', this.options[this.selectedIndex].text);"
                   list="#{'字体类型':';','Arial':'font-family:Arial,Helvetica,sans-serif;','Garamond':'font-family:Garamond;','Tahoma':'font-family:Tahoma;','Verdana':'font-family:Verdana;'}"
                   listKey="value" listValue="key" value="---select----"
                   name="style.fontType" id="style.fontType" theme="simple" />
                  </TD>
                 <TD width="95" bgcolor="#FFFFFF" style="WIDTH: 95px">
                  <s:select label="字体大小"
                   οnchange="applyFontSize('example-2', this.options[this.selectedIndex].text);"
                   list="#{'字体大小':';','10px':'font-size:10px;','14px':'font-size:14px','20px':'font-size:20px'}"
                   listKey="value" listValue="key" value="---select----"
                   name="style.fontSize" id="style.fontSize" theme="simple" />
                  </TD>
                 <TD width="95" bgcolor="#FFFFFF" style="WIDTH: 95px">
                  <s:select label="字体样式"
                   οnchange="applyFontStyle('example-2', this.options[this.selectedIndex].text);"
                   list="#{'字体样式':';','BOLD':'font-weight:bold;','ITALIC':'font-style:italic;','NORMAL':'font-style:normal;'}"
                   listKey="value" listValue="key" value="---select----"
                   name="style.fontStyle" id="style.fontStyle" theme="simple" />
                  </TD>
                  <TD width="171" bgcolor="#FFFFFF" style="WIDTH: 90px">
                 <s:textfield
                  id="style.fontColor" name="style.fontColor"
                  οnclick="applyFontColor('example-2', this.value);"
                  οnfοcus="applyFontColor('example-2', this.value);"
                  οnblur="relateColor(this.id,'colorLayout');"
                  οnmοuseup="applyFontColor('example-2', this.value);"
                  οnkeypress="return blockInvalid(this,event);"
                  οnkeyup="relateColor(this.id,'colorLayout');applyFontColor('example-2', this.value);"
                  value="#000000" size="5" maxLength="7" theme="simple" />
                 <span id="colorLayout"
                  style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; FLOAT: left; MARGIN-LEFT: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 19px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 19px; TEXT-DECORATION: none"
                  οnclick="pickColor(this.id,'style.fontColor');">
                    </span>

                     </TD>
<td><DIV id="example-2">
                  example
                 </DIV>  </td>
                    </tr>

<tr>

                </tr>
               </table>
               <div style="margin-top: 10px;">
                <span class="important">带*为必填项</span>
               </div>
              </td>

             </tr>
             <tr>
              <td height="30" valign="bottom">
               <s:submit name="submit" label="确定" />
                   

<s:reset name="return" label="取消并返回" οnclick="hideDiv()" />

              </td>
             </tr>
            </s:form>
           </table>
          </td>
         </tr>
         <tr>

         </tr>
        </table>
       </td>
      </tr>
     </table>
     <br>

    </td>
   </tr>
  </table>
</body>
</html>

-------------------------------------------

附件css,js,images .整个开发全部完成,显示效果如下: