在网上看了很多三级级联的例子,大多数都是js的,数据都是写死的,要从数据库里取出数据来实现三级级联的很少,最近做项目需要用到从数据库取数据实现三级菜单,在网上找了找dwr可以实现,但都是简单的小列子,下了些教程和例子,拿来自己研究了下,终于做出来了。
1.先要下载dwr.jar包,把它导入到项目的lib目录下,
2.在web.xml的编写如下
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<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>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr
@SuppressWarnings("unchecked")
public class CountryDAO
{
public List queryAll()
{
Session session = HibernateUtil.getSession();
session.beginTransaction().begin();
List list = new ArrayList();
try
{
String hql = "From Country";
Query query = session.createQuery(hql);
List countrylist = query.list() ;
session.getTransaction().commit();
System.out.println("国家列表大小"+countrylist.size());
for(int i=0;i<countrylist.size();i++)
{
Country country = (Country) countrylist.get(i);
Country cy= new Country();
cy.setId(country.getId());
cy.setCountryName(country.getCountryName());
list.add(cy);
}
} catch (Exception e)
{
e.printStackTrace();
}
finally
{
session.close();
}
return list;
}
public List queryProvinceById(Integer countryId)
{
Session session = HibernateUtil.getSession();
session.beginTransaction().begin();
List list = new ArrayList();
try
{
String hql = "From Province where countryId = "+countryId+"";
Query query = session.createQuery(hql);
List provincelist = query.list() ;
session.getTransaction().commit();
for(int i=0;i<provincelist.size();i++)
{
Province province = (Province) provincelist.get(i);
Province pro = new Province();
pro.setId(province.getId());
pro.setProvinceName(province.getProvinceName());
list.add(pro);
}
} catch (Exception e)
{
e.printStackTrace();
}
finally
{
session.close();
}
return list;
}
public List queryCityById(Integer provinceId)
{
Session session = HibernateUtil.getSession();
session.beginTransaction().begin();
List list = new ArrayList();
try
{
String hql = "From City where provinceId ="+provinceId+"";
Query query = session.createQuery(hql);
List citylist = query.list() ;
session.getTransaction().commit();
for(int i=0;i<citylist.size();i++)
{
City city1 = (City) citylist.get(i);
City city2= new City();
city2.setId(city1.getId());
city2.setCityName(city1.getCityName());
list.add(city2);
}
} catch (Exception e)
{
e.printStackTrace();
}
finally
{
session.close();
}
return list;
}
// 测试dao的输出方法
public static void p(Object o)
{
System.out.println(o);
}
public static void main(String[] args)
{
CountryDAO countryDAO = new CountryDAO();
p(countryDAO.queryAll());
p(countryDAO.queryProvinceById(1));
p(countryDAO.queryCityById(2));
}
}
7.Servle类,定义一动作类,调用dao
--------SelectServlet.java----------
package com.test.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.test.dao.CountryDAO;
@SuppressWarnings("serial")
public class SelectServlet extends HttpServlet
{
public SelectServlet()
{
super();
}
public void destroy()
{
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
Integer type = Integer.parseInt(request.getParameter("type"));
// 跳转到test.jsp,其实这里的type参数可有可无,在这个例子中,不过这可是最佳实践哦!有利于扩展~
if (type == 0)
{
// 查询出所有国家并放入reuqest范围中
CountryDAO countryDAO = new CountryDAO();
request.setAttribute("countrys", countryDAO.queryAll());
request.getRequestDispatcher("/test.jsp")
.forward(request, response);
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
doGet(request, response);
}
public void init() throws ServletException
{
}
}
8.跳转页面index.jsp代码,其实也可以不需要
<%@ page language="java" pageEncoding="GBK"%>
<html>
<head>
<title>test</title>
<script type="text/javascript">
window.location = "select?type=0";
</script>
</head>
<body>
</body>
</html>
9.效果页面代码
<%@ page language="java" import="java.util.*,com.test.pojo.*" pageEncoding="GBK"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<html>
<head>
<title>DWR三级联动</title>
<script type='text/javascript' src='/Test02/dwr/interface/menu.js'></script>
<script type='text/javascript' src='/Test02/dwr/engine.js'></script>
<script type='text/javascript' src='/Test02/dwr/util.js'></script>
</head>
<body>
<script type="text/javascript">
//根据国家id查询所属省或州
function queryProvince()
{
var countryId = $("country").value;
//默认为不选择
if(countryId == 0)
{
$("province").options.length=0;
$("city").options.length=0;
}
else
{
menu.queryProvinceById(countryId,provinceCallback);
}
}
//根据国家id查询所属省或州的回调函数
function provinceCallback(provinces)
{
$("province").options.length=0;
//每次获得新的数据的时候先把每二个下拉框架的长度清0
for(var i=0;i< provinces.length;i ++){
var value = provinces[i].id;
var text = provinces[i].provinceName;
var option = new Option(text, value);
//根据每组value和text标记的值创建一个option对象
try{
$("province").add(option);//将option对象添加到第二个下拉框中
}catch(e){
}
}
//同时关联第三级
var provinceId = $("province").value;
menu.queryCityById(provinceId,cityCallback);
}
//查询所属城市
function queryCity()
{
var provinceId = $("province").value;
menu.queryCityById(provinceId,cityCallback);
}
//查询所属城市回调函数
function cityCallback(citys)
{
//每次获得新的数据的时候先把每三个下拉框架的长度清0
$("city").options.length=0;
for(var i=0;i< citys.length;i ++){
var value = citys[i].id;
var text = citys[i].cityName;
var option = new Option(text, value);
//根据每组value和text标记的值创建一个option对象
try{
$("city").add(option);//将option对象添加到第三个下拉框中
}catch(e){
}
}
}
function change1()
{
queryProvince();
}
function change2()
{
queryCity();
}
</script>
<div align="center">
<h3>
<br>
</h3>
<h3>
DWR三级联动演示
</h3>
<!-- 我都奇怪了,我的<c>标签在这里不能用 -->
<select id="country" οnchange="change1();">
<option selected="selected" value="0">
请选择
</option>
<%
@SuppressWarnings("unchecked")
List list = (List) request.getAttribute("countrys");
for (int i = 0; i < list.size(); i++)
{
Country temp = (Country) list.get(i);
%>
<option value="<%=temp.getId()%>"><%=temp.getCountryName()%></option>
<%
}
%>
</select>
<select id="province" οnchange="change2();">
</select>
<select id="city">
</select>
</div>
</body>
</html>
10.最终页面效果
2011-08-05 09:52:48