大前端

一份完整的Spring+Hibernate+DWR+extJs的生成树及下拉comBoboxTree

Ne0inhk

25 Dec 2024 — 29 min read

在各种论坛上看了很久，没见到完整extJs树的生成代码。研究了很久终于实现了Spring+Hibernate+DWR+extJs的生成树及下拉comBoboxTree。

一、树的对象模型。
Java代码

package com.ssgly.model;
import java.util.List;
import java.util.Set;
public class Region {
private Long id;
private String name;
private String code;
private Region parent;
private Set<Region> children = new java.util.HashSet<Region>();
public Region() {}
public Region(String name, String code, Region parent) {
this.name = name;
this.code = code;
if(parent!=null) parent.addChild(this);
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public Region getParent() {
return parent;
}
public void setParent(Region parent) {
this.parent = parent;
}
public Set<Region> getChildren() {
return children;
}
public void setChildren(Set<Region> children) {
this.children = children;
}
}
package com.ssgly.model; import java.util.List; import java.util.Set; public class Region { private Long id; private String name; private String code; private Region parent; private Set<Region> children = new java.util.HashSet<Region>(); public Region() {} public Region(String name, String code, Region parent) { this.name = name; this.code = code; if(parent!=null) parent.addChild(this); } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public Region getParent() { return parent; } public void setParent(Region parent) { this.parent = parent; } public Set<Region> getChildren() { return children; } public void setChildren(Set<Region> children) { this.children = children; } }
二、树结构的数据库（mySql）DDL
Java代码
CREATE TABLE `region` (
`id` bigint(20) NOT NULL,
`name` varchar(100) default NULL,
`code` varchar(100) default NULL,
`parent_id` bigint(20) default NULL,
PRIMARY KEY (`id`),
KEY `FK91AD1314568C1D72` (`parent_id`),
CONSTRAINT `FK91AD1314568C1D72` FOREIGN KEY (`parent_id`) REFERENCES `region` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE `region` ( `id` bigint(20) NOT NULL, `name` varchar(100) default NULL, `code` varchar(100) default NULL, `parent_id` bigint(20) default NULL, PRIMARY KEY (`id`), KEY `FK91AD1314568C1D72` (`parent_id`), CONSTRAINT `FK91AD1314568C1D72` FOREIGN KEY (`parent_id`) REFERENCES `region` (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
三、对象模型到数据库的Hibernate映射关系
Java代码
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
<class name="com.ssgly.model.Region" table="region" >
<id name="id" column="id" type="java.lang.Long">
<generator class="assigned" />
</id>
<property name="code" column="code" type="java.lang.String" />
<property name="name" column="name" type="java.lang.String" />
<many-to-one name="parent" column="parent_id" cascade="save-update" />
<set name="children" inverse="true" cascade="save-update" lazy="false">
<key column="parent_id" ></key>
<one-to-many class="com.ssgly.model.Region"></one-to-many>
</set>
</class>
</hibernate-mapping> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"> <hibernate-mapping> <class name="com.ssgly.model.Region" table="region" > <id name="id" column="id" type="java.lang.Long"> <generator class="assigned" /> </id> <property name="code" column="code" type="java.lang.String" /> <property name="name" column="name" type="java.lang.String" /> <many-to-one name="parent" column="parent_id" cascade="save-update" /> <set name="children" inverse="true" cascade="save-update" lazy="false"> <key column="parent_id" ></key> <one-to-many class="com.ssgly.model.Region"></one-to-many> </set> </class> </hibernate-mapping>
四、用Spring框架来管理和支撑持久层、业务逻辑层和展示层
【一】持久层采用了DAO模式。具体设计了一个类型安全的泛型DAO。由于这不是我要讲的重点部分，感兴趣的朋友可以
查阅有关文档。要生成一个树，必须要从后台数据库中按一定类型（我用了适配器模式）取出java对象--TreeNode 对象。及要实现方法 public List<Region> listRegionByParent(Region parent)。
TreeNode类型为：
Java代码
package com.ssgly.model;
ublic class TreeNode {
private String id;
private String Text;
private boolean leaf;
private String cls="";
private Region region;
public TreeNode(Region region)
{
this.region=region;
}
public String getId() {
return region.getId().toString();
}
public boolean getLeaf() {
return region.getChildren().size()<1;
}
public String getText() {
return region.getName();
}
public String getCls() {
return region.getChildren().size()<1?"file":"folder";
}
package com.ssgly.model; public class TreeNode { private String id; private String Text; private boolean leaf; private String cls=""; private Region region; public TreeNode(Region region) { this.region=region; } public String getId() { return region.getId().toString(); } public boolean getLeaf() { return region.getChildren().size()<1; } public String getText() { return region.getName(); } public String getCls() { return region.getChildren().size()<1?"file":"folder"; } }

具体生成树的泛型DAO实现是：
Java代码
package com.ssgly.dao;
import java.io.IOException;
import java.sql.SQLException;
import java.text.SimpleDateFormat;
import java.util.List;
import com.ssgly.model.Region;
import com.ssgly.model.Page;
public class RegionDAOImpl extends GenericHibernateDAOCrud<Region> implements IRegionDAO {
public RegionDAOImpl(){
super(Region.class);
}
public void deleteRegion(Region region) {
hibernateTemplate.delete(region);
}
public void deleteRegion(Long id) {
hibernateTemplate.delete(hibernateTemplate.get(Region.class, id));
}
public Region getRegion(Long id) {
return (Region)hibernateTemplate.get(Region.class, id);
}
public Long saveRegion(Region region) {
hibernateTemplate.save(region);
return region.getId();
}
public void updateRegion(Region region) {
hibernateTemplate.saveOrUpdate(region);
}
/**
* 查询父节点的所有子节点
* @param parent 父节点
* @return 该父节点对应的子节点
*
*
**/
public List<Region> listRegionByParent(Region parent) {
if (parent==null){
return (List<Region>)hibernateTemplate.find("from Region as r where r.parent is null");
}else{
return (List<Region>)queryForLists("from Region as r where r.parent=?"
,new Object[]{parent});
}
}
} package com.ssgly.dao; import java.io.IOException; import java.sql.SQLException; import java.text.SimpleDateFormat; import java.util.List; import com.ssgly.model.Region; import com.ssgly.model.Page; public class RegionDAOImpl extends GenericHibernateDAOCrud<Region> implements IRegionDAO { public RegionDAOImpl(){ super(Region.class); } public void deleteRegion(Region region) { hibernateTemplate.delete(region); } public void deleteRegion(Long id) { hibernateTemplate.delete(hibernateTemplate.get(Region.class, id)); } public Region getRegion(Long id) { return (Region)hibernateTemplate.get(Region.class, id); } public Long saveRegion(Region region) { hibernateTemplate.save(region); return region.getId(); } public void updateRegion(Region region) { hibernateTemplate.saveOrUpdate(region); } /** * 查询父节点的所有子节点 * @param parent 父节点 * @return 该父节点对应的子节点 * * **/ public List<Region> listRegionByParent(Region parent) { if (parent==null){ return (List<Region>)hibernateTemplate.find("from Region as r where r.parent is null"); }else{ return (List<Region>)queryForLists("from Region as r where r.parent=?" ,new Object[]{parent}); } } }

从上面java代码中可以看到：DWR需要解析的是 List<Region> 类型的对象。
【二】业务逻辑层主要采用一个实现类BusinessServiceImp 。将所有的业务逻辑放在一个类中，一是便于spring中bean好管理，二是方便权限控制。BusinessServiceImp 中的一个很重要的属性是： private IRegionDAO regionDAO; regionDAO的生命周期依赖于spring容器，在spring中管理和维护。逻辑层的代码如下：
Java代码
package com.ssgly.business.impl;
import java.io.IOException;
import java.io.Serializable;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import com.ssgly.model.*;
import com.ssgly.util.Hzxs;
import com.ssgly.business.BusinessService;
import com.ssgly.dao.*;
public class BusinessServiceImpl implements BusinessService {
private IRegionDAO regionDAO;
public void setRegionDAO(IRegionDAO regionDAO) {
this.regionDAO = regionDAO;
}
public List<TreeNode> getAllChildren(Long parentId) throws IOException,
SQLException {
List<Region> listRegion=regionDAO.listRegionByParent(regionDAO.getRegion(parentId));
List<TreeNode> listTreeNode=new ArrayList<TreeNode>();
for(Region region:listRegion){
System.out.println(">>"+region.getName());
listTreeNode.add(new TreeNode(region));
}
//System.out.println("List<TreeNode> getAllChildren 方法已执行!");
return listTreeNode;
}
} package com.ssgly.business.impl; import java.io.IOException; import java.io.Serializable; import java.sql.SQLException; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import com.ssgly.model.*; import com.ssgly.util.Hzxs; import com.ssgly.business.BusinessService; import com.ssgly.dao.*; public class BusinessServiceImpl implements BusinessService { private IRegionDAO regionDAO; public void setRegionDAO(IRegionDAO regionDAO) { this.regionDAO = regionDAO; } public List<TreeNode> getAllChildren(Long parentId) throws IOException, SQLException { List<Region> listRegion=regionDAO.listRegionByParent(regionDAO.getRegion(parentId)); List<TreeNode> listTreeNode=new ArrayList<TreeNode>(); for(Region region:listRegion){ System.out.println(">>"+region.getName()); listTreeNode.add(new TreeNode(region)); } //System.out.println("List<TreeNode> getAllChildren 方法已执行!"); return listTreeNode; } }
【三】Spring容器的配置主要是通过xml方式体现。
一是：web.xml的配置如下：
Java代码
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
/WEB-INF/dispatcherServlet-servlet.xml,
/WEB-INF/model-config.xml
</param-value>
</context-param>
<context-param>
<param-name>log4jConfigLocation</param-name>
<param-value>/WEB-INF/log4j.properties</param-value>
</context-param>
<!--========================================================================
Filters
=========================================================================-->
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>com.ssgly.web.filter.EncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>*</url-pattern>
</filter-mapping>
<!--========================================================================
Listeners
=========================================================================-->
<listener>
<listener-class>
org.springframework.web.util.Log4jConfigListener
</listener-class>
</listener>
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<!--========================================================================
Servlets
=========================================================================-->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<!--========================================================================
DWR 配置
=========================================================================-->
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>classes</param-name>
<param-value>java.lang.Object</param-value>
</init-param>
<load-on-startup>100</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<!--========================================================================
Session
=========================================================================-->
<session-config>
<session-timeout>30</session-timeout>
</session-config>
</web-app> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app> <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/dispatcherServlet-servlet.xml, /WEB-INF/model-config.xml </param-value> </context-param>  <context-param> <param-name>log4jConfigLocation</param-name> <param-value>/WEB-INF/log4j.properties</param-value> </context-param>  <filter> <filter-name>encodingFilter</filter-name> <filter-class>com.ssgly.web.filter.EncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>*</url-pattern> </filter-mapping>  <listener> <listener-class> org.springframework.web.util.Log4jConfigListener </listener-class> </listener> <listener> <listener-class> org.springframework.web.context.ContextLoaderListener </listener-class> </listener>  <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <load-on-startup>0</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping>   <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>classes</param-name> <param-value>java.lang.Object</param-value> </init-param> <load-on-startup>100</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>  <session-config> <session-timeout>30</session-timeout> </session-config> </web-app>
二是：bean生成的配置。model-config.xml
Java代码
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING/DTD BEAN/EN"
"http://www.springframework.org/dtd/spring-beans.dtd">
<beans>
<bean id="propertyConfigurer"
class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
<property name="locations">
<list>
<value>/WEB-INF/jdbc.properties</value>
</list>
</property>
</bean>
<bean id="myDataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="${jdbc.driver}" />
<property name="url" value="${jdbc.url}" />
<property name="username" value="${jdbc.username}" />
<property name="password" value="${jdbc.password}" />
</bean>
<bean id="sessionFactory"
class="org.springframework.orm.hibernate3.LocalSessionFactoryBean" destroy-method="close">
<property name="dataSource">
<ref local="myDataSource" />
</property>
<property name="mappingResources">
<list>
<value> com/ssgly/model/Region.hbm.xml</value>
</list>
</property>
<property name="hibernateProperties">
<props>
<prop key="connection.characterEncoding">utf-8</prop>
<prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop>
<prop key="hibernate.jdbc.batch_size">50</prop>
<prop key="hibernate.show_sql">true</prop>
<prop key="hibernate.query.factory_class">org.hibernate.hql.classic.ClassicQueryTranslatorFactory</prop>
</props>
</property>
</bean>
<bean id="transactionManager"
class="org.springframework.orm.hibernate3.HibernateTransactionManager">
<property name="sessionFactory">
<ref bean="sessionFactory"/>
</property>
</bean>
<bean id="hibernateTemplate" class="org.springframework.orm.hibernate3.HibernateTemplate">
<property name="sessionFactory"> <ref bean="sessionFactory"/> </property>
</bean>
<bean id="regionDao" class="com.ssgly.dao.RegionDAOImpl">
<property name="hibernateTemplate">
<ref bean="hibernateTemplate"/>
</property>
</bean>
<bean id="businessService" class="com.ssgly.business.impl.BusinessServiceImpl">
<property name="regionDAO"><ref bean="regionDao" /></property>
</bean>
<bean id="todoSsglyService" class="com.ssgly.ext.ToDoImpl">
<property name="businessServiceImpl">
<ref bean="businessService"/>
</property>
</bean>
</beans> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE beans PUBLIC "-//SPRING/DTD BEAN/EN" "http://www.springframework.org/dtd/spring-beans.dtd"> <beans> <bean id="propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"> <property name="locations"> <list> <value>/WEB-INF/jdbc.properties</value> </list> </property> </bean> <bean id="myDataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName" value="${jdbc.driver}" /> <property name="url" value="${jdbc.url}" /> <property name="username" value="${jdbc.username}" /> <property name="password" value="${jdbc.password}" /> </bean> <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean" destroy-method="close"> <property name="dataSource"> <ref local="myDataSource" /> </property> <property name="mappingResources"> <list> <value> com/ssgly/model/Region.hbm.xml</value> </list> </property> <property name="hibernateProperties"> <props> <prop key="connection.characterEncoding">utf-8</prop> <prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop> <prop key="hibernate.jdbc.batch_size">50</prop> <prop key="hibernate.show_sql">true</prop> <prop key="hibernate.query.factory_class">org.hibernate.hql.classic.ClassicQueryTranslatorFactory</prop> </props> </property> </bean> <bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager"> <property name="sessionFactory"> <ref bean="sessionFactory"/> </property> </bean> <bean id="hibernateTemplate" class="org.springframework.orm.hibernate3.HibernateTemplate"> <property name="sessionFactory"> <ref bean="sessionFactory"/> </property> </bean> <bean id="regionDao" class="com.ssgly.dao.RegionDAOImpl"> <property name="hibernateTemplate"> <ref bean="hibernateTemplate"/> </property> </bean> <bean id="businessService" class="com.ssgly.business.impl.BusinessServiceImpl"> <property name="regionDAO"><ref bean="regionDao" /></property> </bean> <bean id="todoSsglyService" class="com.ssgly.ext.ToDoImpl"> <property name="businessServiceImpl"> <ref bean="businessService"/> </property> </bean> </beans>
三是：servlet配置 dispatcherServlet-servlet.xml
Java代码
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING/DTD BEAN/EN"
"http://www.springframework.org/dtd/spring-beans.dtd">
<beans>
<!--============================================================================
URL Mapping configuration
=============================================================================-->
<bean id="beanNameUrlMapping"
class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping">
<property name="alwaysUseFullPath" value="true" />
</bean>
<!--============================================================================
Velocity configuration
=============================================================================-->
<bean id="viewResolver" class="org.springframework.web.servlet.view.velocity.VelocityViewResolver">
<property name="contentType"><value>text/html;charset=GBK</value></property>
</bean>
<bean id="velocityConfig" class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
<property name="configLocation" value="/WEB-INF/velocity.properties" />
<property name="resourceLoaderPath" value="/" />
</bean>
<bean id="treeRegionServlet" name="/treeRegionServlet.do" class="com.ssgly.web.TreeRegionServlet">
<property name="businessService">
<ref bean="businessService"/>
</property>
</bean>
</beans> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE beans PUBLIC "-//SPRING/DTD BEAN/EN" "http://www.springframework.org/dtd/spring-beans.dtd"> <beans>  <bean id="beanNameUrlMapping" class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping"> <property name="alwaysUseFullPath" value="true" /> </bean>  <bean id="viewResolver" class="org.springframework.web.servlet.view.velocity.VelocityViewResolver"> <property name="contentType"><value>text/html;charset=GBK</value></property> </bean> <bean id="velocityConfig" class="org.springframework.web.servlet.view.velocity.VelocityConfigurer"> <property name="configLocation" value="/WEB-INF/velocity.properties" /> <property name="resourceLoaderPath" value="/" /> </bean> <bean id="treeRegionServlet" name="/treeRegionServlet.do" class="com.ssgly.web.TreeRegionServlet"> <property name="businessService"> <ref bean="businessService"/> </property> </bean> </beans>
有了这些xml的配置。Spring能将三层很好地组合起来。以上是java部分。还没有讲到extJs。extJs可以接受asp、php、java等服务器端生成的json格式的对象。就java来说，extJs能接受三种方式的json对象，一是servlet中拼接json对象；其次是引用json lib 包；三是DWR方式，绕过Controller（就Spring来说）或servlet，在javascript中直接调用java业务逻辑层中的方法（通过DWR引擎），利用dwr代理或者javascript 回调函数返回json对象并在页面展示。
本人采用了第三种DWR方式实现ExtJs生成树。要使用dwr 就的要在以上几个配置文件中配置DWR（已配）。具体的下次再说吧。
今天就写到这里吧。不知写的怎么样？有朋友关注这一块？若支持，请鼓励一下；写的不好、不对或不懂的地方，请拍砖。（续）

抱歉啊，这几天忙着考驾照，把这事给耽搁啊。书接上回吧。
【四】基于Spring方式的DWR配置说明。
一、首先在WEB.xml中配置dwr拦截器代码如下（节选）：
Java代码
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>classes</param-name>
<param-value>java.lang.Object</param-value>
</init-param>
<load-on-startup>100</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>  <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>classes</param-name> <param-value>java.lang.Object</param-value> </init-param> <load-on-startup>100</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>
二、dwr.xml的配置。这里将Spring管理的bean映射成javascipt操作的对象。更直观的说法就是使得页面中javascript能直接使用java中对象的方法。代码如下:
Java代码
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<convert converter="bean" match="com.ssgly.model.*"/>
<convert converter="map" match="org.directwebremoting.convert.MapConverter"/>
<create creator="spring" javascript="treeBusinessService">
<param name="beanName" value="businessService"/>
<include method="getAllChildren" />
</create>
</allow>
</dwr> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.ltd.uk/dwr/dwr20.dtd"> <dwr> <allow> <convert converter="bean" match="com.ssgly.model.*"/> <convert converter="map" match="org.directwebremoting.convert.MapConverter"/> <create creator="spring" javascript="treeBusinessService"> <param name="beanName" value="businessService"/> <include method="getAllChildren" /> </create> </allow> </dwr>

从上面的代码可以看出，javascript使用treeBusinessService.getAllChildren 方法就能够直接取出 Spring维持的业务逻辑层定义的bean----- businessService。从而完成了DWR的功能。这里当然存在安全问题，在这里暂时没有讨论，关于如何在DWR中进行安全控制，大家可以参考有关文档。本文暂不考虑。
【五】ext和服务器端交互的机制和具体实现
一般说来，按照上面DWR的配置，就已经实现了在页面中使用java的方法。但java方法执行后生成的List 传回到页面还需要靠回调函数实现。例如下面代码就是包含了回调函数的测试页。
Java代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ExtJS－树示例</title>
<link rel="stylesheet" type="text/css" href="ext2/resources/css/ext-all.css" />
<script type="text/javascript" src="ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext2/ext-all.js"></script>
<PRE class=java name="code"><script type="text/javascript" src="dwr/interface/treeBusinessService.js "></script>
<script type="text/javascript" src="dwr/engine.js "></script>
<script type="text/javascript" src="dwr/util.js "></script></PRE>
<BR><script type="text/javascript">
<BR>
<BR> treeBusinessService.getAllChildren(1,function(ret){
<BR> alert("一共有"+ret.length+"个子节点");
<BR> });
<BR>
<BR></script>
<BR></head>
<BR>
<BR><body>
<BR><div id="tree-div"></div>
<BR></body>
<BR></html>
<BR> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ExtJS－树示例</title> <link rel="stylesheet" type="text/css" href="ext2/resources/css/ext-all.css" /> <script type="text/javascript" src="ext2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext2/ext-all.js"></script> Java代码
<script type="text/javascript" src="dwr/interface/treeBusinessService.js "></script>
<script type="text/javascript" src="dwr/engine.js "></script>
<script type="text/javascript" src="dwr/util.js "></script> <script type="text/javascript" src="dwr/interface/treeBusinessService.js "></script> <script type="text/javascript" src="dwr/engine.js "></script> <script type="text/javascript" src="dwr/util.js "></script>
<script type="text/javascript">

treeBusinessService.getAllChildren(1,function(ret){
alert("一共有"+ret.length+"个子节点");
});

</script>
</head>

<body>
<div id="tree-div"></div>
</body>
</html>

现在分析一下上面页面主要代码：

Java代码
<script type="text/javascript" src="dwr/interface/treeBusinessService.js "></script>
<script type="text/javascript" src="dwr/interface/treeBusinessService.js "></script>
这句中的treeBusinessService就是DWR.xml中定义的 Java代码
<create creator="spring" javascript="treeBusinessService"> <create creator="spring" javascript="treeBusinessService">

下面两句是使用DWR所必需的，原样加上即可。
Java代码
<script type="text/javascript" src="dwr/engine.js "></script>
<script type="text/javascript" src="dwr/util.js "></script> <script type="text/javascript" src="dwr/engine.js "></script> <script type="text/javascript" src="dwr/util.js "></script>
有了上面的这些DWR配置，就能够以DWR的方式使用java的方法啦：
Java代码
<script type="text/javascript">
treeBusinessService.getAllChildren(1,function(ret){
alert("一共有"+ret.length+"个子节点");
});
</script> <script type="text/javascript"> treeBusinessService.getAllChildren(1,function(ret){ alert("一共有"+ret.length+"个子节点"); }); </script>
function(ret)就是回调函数。因为treeBusinessService.getAllChildren执行的结果是List类型，DWR解析List到页面应该是javascript的对象数组，所以ret应该是个数组，ret.length是这个数组的长度。

上面的例子只不过是原理性的介绍，帮助我们理解javascript如何和后台进行的交互。真正要实现DWRTree 还需要专门的DWRTreeLoader代理。下面这段代码很是重要，参考了ext官方bbs上的代码，并做了修改。先提供如下：
Java代码
Ext.tree.DWRTreeLoader = function(config) {
Ext.tree.DWRTreeLoader.superclass.constructor.call(this, config);
};
Ext.extend(Ext.tree.DWRTreeLoader, Ext.tree.TreeLoader, {
args:[],
requestData : function(node, callback) {
if (this.fireEvent("beforeload", this, node, callback) !== false) {
var callParams = new Array();
var success = this.handleResponse.createDelegate(this, [node, callback], 1);
var error = this.handleFailure.createDelegate(this, [node, callback], 1);
callParams.push(node.id);
callParams.push({callback:success, errorHandler:error});
//todo: do we need to set this to something else?
this.transId=true;
this.dataUrl.apply(this, callParams);
} else {
// if the load is cancelled, make sure we notify
// the node that we are done
if (typeof callback == "function") {
//alert(callback);
callback();
}
}
},
processResponse : function(response, node, callback){
try {
for(var i = 0; i < response.length; i++){
var n = this.createNode(response[i]);
if(n){
node.appendChild(n);
}
}
if(typeof callback == "function"){
callback(this, node);
}
}catch(e){
this.handleFailure(response);
}
},
handleResponse : function(response, node, callback){
this.transId = false;
this.processResponse(response, node, callback);
this.fireEvent("load", this, node, response);
},
handleFailure : function(response, node, callback){
this.transId = false;
this.fireEvent("loadexception", this, node, response);
if(typeof callback == "function"){
callback(this, node);
}
}
}); Ext.tree.DWRTreeLoader = function(config) { Ext.tree.DWRTreeLoader.superclass.constructor.call(this, config); }; Ext.extend(Ext.tree.DWRTreeLoader, Ext.tree.TreeLoader, { args:[], requestData : function(node, callback) { if (this.fireEvent("beforeload", this, node, callback) !== false) { var callParams = new Array(); var success = this.handleResponse.createDelegate(this, [node, callback], 1); var error = this.handleFailure.createDelegate(this, [node, callback], 1); callParams.push(node.id); callParams.push({callback:success, errorHandler:error}); //todo: do we need to set this to something else? this.transId=true; this.dataUrl.apply(this, callParams); } else { // if the load is cancelled, make sure we notify // the node that we are done if (typeof callback == "function") { //alert(callback); callback(); } } }, processResponse : function(response, node, callback){ try { for(var i = 0; i < response.length; i++){ var n = this.createNode(response[i]); if(n){ node.appendChild(n); } } if(typeof callback == "function"){ callback(this, node); } }catch(e){ this.handleFailure(response); } }, handleResponse : function(response, node, callback){ this.transId = false; this.processResponse(response, node, callback); this.fireEvent("load", this, node, response); }, handleFailure : function(response, node, callback){ this.transId = false; this.fireEvent("loadexception", this, node, response); if(typeof callback == "function"){ callback(this, node); } } });

上面的代码可以直接在项目中使用，无需修改。
【六】最终DWRTree的实现包括 tree.js和 tree.html
tree.js完整代码如下：
Java代码
Ext.onReady(function(){
Ext.tree.DWRTreeLoader = function(config) {
Ext.tree.DWRTreeLoader.superclass.constructor.call(this, config);
};
Ext.extend(Ext.tree.DWRTreeLoader, Ext.tree.TreeLoader, {
args:[],
requestData : function(node, callback) {
if (this.fireEvent("beforeload", this, node, callback) !== false) {
var callParams = new Array();
var success = this.handleResponse.createDelegate(this, [node, callback], 1);
var error = this.handleFailure.createDelegate(this, [node, callback], 1);
callParams.push(node.id);
callParams.push({callback:success, errorHandler:error});
//todo: do we need to set this to something else?
this.transId=true;
this.dataUrl.apply(this, callParams);
} else {
// if the load is cancelled, make sure we notify
// the node that we are done
if (typeof callback == "function") {
//alert(callback);
callback();
}
}
},
processResponse : function(response, node, callback){
try {
for(var i = 0; i < response.length; i++){
var n = this.createNode(response[i]);
if(n){
node.appendChild(n);
}
}
if(typeof callback == "function"){
callback(this, node);
}
}catch(e){
this.handleFailure(response);
}
},
handleResponse : function(response, node, callback){
this.transId = false;
this.processResponse(response, node, callback);
this.fireEvent("load", this, node, response);
},
handleFailure : function(response, node, callback){
this.transId = false;
this.fireEvent("loadexception", this, node, response);
if(typeof callback == "function"){
callback(this, node);
}
}
});
var myTree = new Ext.tree.TreePanel({
el:Ext.getBody(),
autoScroll:true,
animate:true,
width:'300px',
height:'800px',
enableDD:true,
containerScroll: true,
root:new Ext.tree.AsyncTreeNode({
text: '单位',
draggable:false,
id:'1' }),
loader:new Ext.tree.DWRTreeLoader({
dataUrl:treeBusinessService.getAllChildren,
listeners : {
'beforeload' : function( node) {
myTree.getLoader().args[0]=(node.id!='root'?node.id:"1");
}
}
})
});
myTree.render();
}); Ext.onReady(function(){ Ext.tree.DWRTreeLoader = function(config) { Ext.tree.DWRTreeLoader.superclass.constructor.call(this, config); }; Ext.extend(Ext.tree.DWRTreeLoader, Ext.tree.TreeLoader, { args:[], requestData : function(node, callback) { if (this.fireEvent("beforeload", this, node, callback) !== false) { var callParams = new Array(); var success = this.handleResponse.createDelegate(this, [node, callback], 1); var error = this.handleFailure.createDelegate(this, [node, callback], 1); callParams.push(node.id); callParams.push({callback:success, errorHandler:error}); //todo: do we need to set this to something else? this.transId=true; this.dataUrl.apply(this, callParams); } else { // if the load is cancelled, make sure we notify // the node that we are done if (typeof callback == "function") { //alert(callback); callback(); } } }, processResponse : function(response, node, callback){ try { for(var i = 0; i < response.length; i++){ var n = this.createNode(response[i]); if(n){ node.appendChild(n); } } if(typeof callback == "function"){ callback(this, node); } }catch(e){ this.handleFailure(response); } }, handleResponse : function(response, node, callback){ this.transId = false; this.processResponse(response, node, callback); this.fireEvent("load", this, node, response); }, handleFailure : function(response, node, callback){ this.transId = false; this.fireEvent("loadexception", this, node, response); if(typeof callback == "function"){ callback(this, node); } } }); var myTree = new Ext.tree.TreePanel({ el:Ext.getBody(), autoScroll:true, animate:true, width:'300px', height:'800px', enableDD:true, containerScroll: true, root:new Ext.tree.AsyncTreeNode({ text: '单位', draggable:false, id:'1' }), loader:new Ext.tree.DWRTreeLoader({ dataUrl:treeBusinessService.getAllChildren, listeners : { 'beforeload' : function( node) { myTree.getLoader().args[0]=(node.id!='root'?node.id:"1"); } } }) }); myTree.render(); });
提个醒：这句 Java代码
myTree.getLoader().args[0]=(node.id!='root'?node.id:"1"); myTree.getLoader().args[0]=(node.id!='root'?node.id:"1"); 不能错哦，它是和 DWRTreeLoader耦合的。

tree.html是这样的：
Java代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ExtJS－树示例</title>
<link rel="stylesheet" type="text/css" href="ext2/resources/css/ext-all.css" />
<script type="text/javascript" src="ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext2/ext-all.js"></script>
<script type="text/javascript" src="dwr/interface/treeBusinessService.js "></script>
<script type="text/javascript" src="dwr/engine.js "></script>
<script type="text/javascript" src="dwr/util.js "></script>
<script type="text/javascript" src="js/tree.js"></script>
</head>
<body>
</body>
</html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ExtJS－树示例</title> <link rel="stylesheet" type="text/css" href="ext2/resources/css/ext-all.css" /> <script type="text/javascript" src="ext2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext2/ext-all.js"></script> <script type="text/javascript" src="dwr/interface/treeBusinessService.js "></script> <script type="text/javascript" src="dwr/engine.js "></script> <script type="text/javascript" src="dwr/util.js "></script> <script type="text/javascript" src="js/tree.js"></script> </head> <body> </body> </html>

好了，基于Spring+hibernate+dwr+EXTJs的DWRTreeLoader的实现就是这样。

就是那个下拉树。。。
ComboTree

Java代码

Ext.QuickTips.init();
var Artform = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 150,
width: 600,
frame: true,
items: [{
layout: 'column',
items: [{
width:580,
xtype:'fieldset',
title: '输入标题',
autoHeight:true,
defaults: {width: 300},
defaultType: 'textfield',
items: [{
fieldLabel: '标题',
name: 'title',
id:'title',
allowBlank:false,
blankText:'标题不能为空'
// value:'adfadsfasd'
},{
xtype:"combo",
fieldLabel: '选择',
name: 'combo',
id:'combotree',
store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,//是否可编辑的表格
selectClass:'',//适用于所有样式
mode: 'local', //本地数据
triggerAction:'all', //是否自动匹配
autoHeight: true,
tpl: "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>", //模板循环
emptyText:'请选择'
}]
}]
},{
layout: 'form',
labelAlign: 'top',
items: [{
xtype: 'htmleditor',
fieldLabel: '请输入文章内容',
id: 'context',
height:400,
allowBlank:false,
blankText:'内容不能为空',
anchor: '98%'
// value:'adfadfasd'
}]
}] ,
buttons: [{text: '保存',handler:add},
{text: '取消'}]
});
var treedata = new Ext.tree.TreeLoader({
url:'http://localhost:8080/pkm/register!queryChild.action'
});
var tree = new Ext.tree.TreePanel({
loader:treedata,
border:false,
root:new Ext.tree.AsyncTreeNode({text:'目录结构',id:'1'})
});
tree.on('click',function(node){
Artform.findById('combotree').value=node.id;//设置combo的键值
Artform.findById('combotree').setRawValue(node.text); //给combo设置显示的值
Artform.findById('combotree').collapse(); //隐藏下拉列表中，如果它展开，这个属性将会完成数据的加载
});
Artform.findById('combotree').on('expand',function(){
tree.render('tree');//ComboBox的tpl里的<div id='tree'>这个ID可以改成别的, 但必须要在'expand'事件里, 将树显示在这个div上
});
function add(){
if(Artform.form.isValid()){
//btn.disabled=true;//确认按钮有效默认为false
Ext.MessageBox.show({
msg: '正在请求数据, 请稍侯',
progressText: '正在请求数据',
width:300,
wait:true,
waitConfig: {interval:200}
});//进度条显示
Ext.Ajax.request({
url:'http://localhost:8080/pkm/article!saveOrupdate.action',
params:{
title:Ext.getCmp('title').getValue(),
context:Ext.getCmp('context').getValue(),
type:Artform.findById('combotree').value
},
failure:function(){
Ext.MessageBox.alert('友情提示',"异步通讯失败，请与管理员联系！");
},
success:function(request){
Ext.MessageBox.hide();
Ext.MessageBox.alert("友情提示","信息保存成功");
}
});
}else{
Ext.MessageBox.alert("信息","请填写完整");
}
}
Artform.render("form");
}); Ext.QuickTips.init(); var Artform = new Ext.form.FormPanel({ labelAlign: 'right', labelWidth: 150, width: 600, frame: true, items: [{ layout: 'column', items: [{ width:580, xtype:'fieldset', title: '输入标题', autoHeight:true, defaults: {width: 300}, defaultType: 'textfield', items: [{ fieldLabel: '标题', name: 'title', id:'title', allowBlank:false, blankText:'标题不能为空' // value:'adfadsfasd' },{ xtype:"combo", fieldLabel: '选择', name: 'combo', id:'combotree', store: new Ext.data.SimpleStore({fields:[],data:[[]]}), editable:false,//是否可编辑的表格 selectClass:'',//适用于所有样式 mode: 'local', //本地数据 triggerAction:'all', //是否自动匹配 autoHeight: true, tpl: "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>", //模板循环 emptyText:'请选择' }] }] },{ layout: 'form', labelAlign: 'top', items: [{ xtype: 'htmleditor', fieldLabel: '请输入文章内容', id: 'context', height:400, allowBlank:false, blankText:'内容不能为空', anchor: '98%' // value:'adfadfasd' }] }] , buttons: [{text: '保存',handler:add}, {text: '取消'}] }); var treedata = new Ext.tree.TreeLoader({ url:'http://localhost:8080/pkm/register!queryChild.action' }); var tree = new Ext.tree.TreePanel({ loader:treedata, border:false, root:new Ext.tree.AsyncTreeNode({text:'目录结构',id:'1'}) }); tree.on('click',function(node){ Artform.findById('combotree').value=node.id;//设置combo的键值 Artform.findById('combotree').setRawValue(node.text); //给combo设置显示的值 Artform.findById('combotree').collapse(); //隐藏下拉列表中，如果它展开，这个属性将会完成数据的加载 }); Artform.findById('combotree').on('expand',function(){ tree.render('tree');//ComboBox的tpl里的<div id='tree'>这个ID可以改成别的, 但必须要在'expand'事件里, 将树显示在这个div上 }); function add(){ if(Artform.form.isValid()){ //btn.disabled=true;//确认按钮有效默认为false Ext.MessageBox.show({ msg: '正在请求数据, 请稍侯', progressText: '正在请求数据', width:300, wait:true, waitConfig: {interval:200} });//进度条显示 Ext.Ajax.request({ url:'http://localhost:8080/pkm/article!saveOrupdate.action', params:{ title:Ext.getCmp('title').getValue(), context:Ext.getCmp('context').getValue(), type:Artform.findById('combotree').value }, failure:function(){ Ext.MessageBox.alert('友情提示',"异步通讯失败，请与管理员联系！"); }, success:function(request){ Ext.MessageBox.hide(); Ext.MessageBox.alert("友情提示","信息保存成功"); } }); }else{ Ext.MessageBox.alert("信息","请填写完整"); } } Artform.render("form"); });

我这是一个form 里面生成的下拉树，单独测试的时候其实可以用一个简单的comboBox 做的，我这里为了方便就直接把我的代码拿过来和大家分享下

其实上面的代码最重要的就只有一个部分，下拉树写出来很简单，问题就是怎么能取到值给form 让它提交到后台，

Java代码

tree.on('click',function(node){
Artform.findById('combotree').value=node.id;设置combo的键值
Artform.findById('combotree').setRawValue(node.text); //给combo设置显示的值
Artform.findById('combotree').collapse(); //隐藏下拉列表中，如果它展开，这个属性将会完成数据的加载
}); tree.on('click',function(node){ Artform.findById('combotree').value=node.id;设置combo的键值 Artform.findById('combotree').setRawValue(node.text); //给combo设置显示的值 Artform.findById('combotree').collapse(); //隐藏下拉列表中，如果它展开，这个属性将会完成数据的加载 });

秘诀就在这里，这里能给你提交到后台什么的，什么父节点不能选择，根节点不能选择什么的，那个简单，你直接把你的树写好，就OK 在哪里判断如有不对，请拍砖—-—！！

一份完整的Spring+Hibernate+DWR+extJs的生成树及下拉comBoboxTree

Ne0inhk

Read more

都用HTTPS了，还能被查出浏览记录？

美团今年的校招薪资。。。

3个小 bug，直接损失近千万

为什么忘记密码时只能重设，不把旧密码告诉我？