一个 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>之间写上:
<!-- action -->
<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文件
<constant name="struts.objectFactory" value="spring"></constant>
<constant name="struts.i18n.encoding" value="UTF-8"/>
<package name="luanmadAjaxTree" extends="json-default" >
<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">
<!-- avoid refresh again -->
<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 name="com.luanmad.ajax.dtree.model.TreeNodes" table="treenodes" catalog="luanmad">
<id name="id" type="java.lang.Integer">
<column name="id" />
<generator class="increment"></generator>
</id>
<property ...>
...
</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>
<!--
<script type="text/javascript" src="../src/struts.xml"></script>
../表示根目录(/../也表法上一层目录),/表示WebRoot目录
-->
</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 type="text/javascript" src="javascript/colorPicker.js"></SCRIPT>
<SCRIPT type="text/javascript" src="javascript/styleEditor.js"></SCRIPT>
<script type="text/javascript" src="javascript/util.js"></script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<script language="JavaScript">
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(encodeURI(nodeName.value,"utf-8"),"utf-8");
//alert("after encode:"+nodeName.value);
if (trim(nodeName.value) == "")
{
alert("请输入类别名称");
return false;
}
if(trim(nodeUrl.value) == "")
{
alert("请输入链接地址");
return false;
}
//nodeOperate_add();
return true;
}
</script>
<body>
<table border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="750" align="center" valign="top">
<br>
<table cellpadding="0" cellspacing="0" class="no-print" width="750">
<tr>
<td height="291" align="right" valign="top">
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="94%" background="/StoreAdmin/images/lbg1.jpg"
class="c14">
</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>
<td width="125">
<span>所属分类:</span>
</td>
<td colspan="4">
<s:hidden name="treeNodes.pid"
value="%{#parameters['treeNodes.id']}" />
<%
String currentNodeName = request.getParameter("treeNodes.name");
%>
<!-- decode the currentNodeName which encode with utf-8 -->
<%
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 width="6%" height="10" align="right" valign="bottom"
bgcolor="#E4E4E4">b<br></td>
-->
</tr>
</table>
</td>
</tr>
</table>
<br>
</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>
<SCRIPT type="text/javascript" src="javascript/colorPicker.js"></SCRIPT>
<SCRIPT type="text/javascript" src="javascript/styleEditor.js"></SCRIPT>
<script type="text/javascript" src="javascript/util.js"></script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<script language="JavaScript">
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>
<body>
<table border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="750" align="center" valign="top">
<br>
<table cellpadding="0" cellspacing="0" class="no-print" width="750">
<tr>
<td height="291" align="right" valign="top">
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="94%" background="/StoreAdmin/images/lbg1.jpg"
class="c14">
</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="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");
%>
<!-- decode the currentNodeName which encode with utf-8 -->
<%
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>
<td width="125">
<span>所属分类:</span>
</td>
<td colspan="4">
<s:select label="所属分类"
headerKey="0" headerValue="主分类"
list="parentNodesList"
listKey="id" listValue="name" value="${param['treeNodes.pid']}"
name="treeNodes.pid" theme="simple" />
</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>
</tr>
</table>
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</body>
</html>
-------------------------------------------
附件css,js,images .整个开发全部完成,显示效果如下: