`
bangel
  • 浏览: 3871 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

利用dwr实现的级联菜单

阅读更多
本例将实现一个利用dwr实现的级联菜单处理:

首先建立两个实体类:Org(机构),Person(机构下的人员)

代码如下:

Org.java

package com.dwr;

publicclass Org {

    privateintid;

    private String name;

   

    publicint getId() {

       returnid;

    }

    publicvoid setId(int id) {

       this.id = id;

    }

    public String getName() {

       returnname;

    }

    publicvoid setName(String name) {

       this.name = name;

    }

}

Person.java

package com.dwr;

publicclass Person {

    privateintid;

    private String name;

   

    publicint getId() {

       returnid;

    }

    publicvoid setId(int id) {

       this.id = id;

    }

    public String getName() {

       returnname;

    }

    publicvoid setName(String name) {

       this.name = name;

    }

}

创建管理类:PersonManager用于初始化数据和返回数据

package com.dwr;

import java.util.ArrayList;

import java.util.Collection;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

public class PersonManager {

   

    private static Map orgs = new HashMap();

    private static Map persons = new HashMap();

    //初始化数据

    static{

       for(int i=0; i<10; i++){

           Org org = new Org();

           org.setId(i);

           org.setName("机构"+i);

           orgs.put(org.getId(), org);

          

           List personsList = new ArrayList();

           for(int j=0; j < 20; j++){

              Person person = new Person();

              person.setId(j);

              person.setName("org["+org.getName()+"]下的人员[人员"+j+"]");

              personsList.add(person);

           }

           persons.put(org.getId(), personsList);

       }

    }

    //返回所有机构

    public Collection searchAllOrg(){

       return orgs.values();

    }

    //返回某机构所有人员

    public List searchPersons(int orgId){

       return (List)persons.get(orgId);

    }

}

配置文件:

Web.xml中加入以下代码:

<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/*</url-pattern>

</servlet-mapping>

添加dwr.xml和web.xml同一个目录

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

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">

<dwr>

<allow>

     <create creator="new" javascript="personManager">

      <param name="class" value="com.dwr.PersonManager"/>

    </create>

    <convert converter="bean" match="com.dwr.Org"/>

    <convert converter="bean" match="com.dwr.Person"/>

</allow>

</dwr>

测试页面:

<%@ page language="java" contentType="text/html; charset=GB18030"

    pageEncoding="GB18030"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB18030">

<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/personManager.js"></script>

<title>Insert title here</title>

<script type="text/javascript">

function init(){

    personManager.searchAllOrg(

       function(data){

           //data是Org对象的集合,id,name

           dwr.util.removeAllOptions("o");

           dwr.util.addOptions("o",data,"id","name");

           searchPersons();

       }

    );

}

function searchPersons(){

    personManager.searchPersons(

       $("o").value,

       function(data){

           dwr.util.removeAllOptions("p");

           dwr.util.addOptions("p",data,"id","name");

       }

    );

}

</script>

</head>

<body onload="init()">

请选择机构信息:<select id="o" onchange="searchPersons()">

</select>

请选择人员信息:<select id="p">

</select>

</body>

</html>

分享到:
评论
1 楼 wxw850227 2008-01-11  
[list]
[*] :oops:  :wink: 
[/list]

相关推荐

    DWR级联菜单下拉框

    总之,DWR级联菜单下拉框是利用DWR和AJAX技术实现的动态交互功能,它简化了前后端通信,提供了更流畅的用户体验。通过学习和实践这个案例,开发者可以提升在Web应用开发中对DWR、AJAX以及级联菜单设计的理解和应用...

    dwr实现2级级联菜单(sql2000 数据库)

    本篇文章将深入探讨如何利用DWR来实现一个两级级联菜单,并以SQL Server 2000数据库作为数据源。 首先,我们需要理解DWR的基本工作原理。DWR允许在后台执行Java方法并返回结果到前端,无需刷新整个页面。这种技术...

    Ajax级联菜单,通过dwr框架实现省份城市级联效果

    在这个特定的场景中,我们利用Ajax技术和Direct Web Remoting(DWR)框架来创建一个动态的省份城市级联菜单。这个功能能够提升用户体验,因为它减少了用户手动刷新页面的需求,提供了流畅的交互。 首先,我们需要...

    级联菜单 java+dwr

    级联菜单(Cascading Menu)在...总的来说,这个项目旨在教你如何结合Java、DWR和数据库技术实现动态的级联菜单,提高Web应用的交互性。通过实践这个例子,你可以加深对Java后端开发、Ajax通信和前端动态更新的理解。

    纯JSP+DWR实现三级联动下拉选择菜单 实现无刷新联动 DWR判断用户是否存在 ajax二级联动菜单 DWR操作数据库模拟实现Google搜索效果

    DWR允许我们通过JavaScript在客户端动态更新下拉菜单选项,当用户在一个菜单中做出选择时,根据选择的值,DWR会自动向服务器发送请求,获取并填充后续级联菜单的内容。这一过程无需用户手动刷新页面,提高了用户体验...

    Struts_Hibernate_Dwr框架整合省份菜单级联

    本资料主要探讨的是如何将这三个框架进行集成,实现省份菜单的级联功能,即在前端选择省份时,对应的下拉菜单会动态加载出该省份的城市。 首先,Struts是一个MVC(Model-View-Controller)框架,它负责处理用户请求...

    DWR 联动下拉菜单基本应用

    在本例中,我们将讨论如何利用DWR2版本创建一个联动下拉菜单,这是一种常见的级联选择功能,常见于数据输入表单中,如地址选择,省-市-区的逐级筛选。 首先,我们需要在服务器端设置DWR引擎。这包括创建一个`dwr....

    纯JSP+DWR实现三级联动下拉选择菜单实现技巧

    总结来说,本示例展示了如何利用DWR和JSP实现一个三级联动下拉菜单,提供了对数据库数据的动态加载和显示,这在构建交互式Web应用时非常有用。这种方法避免了使用复杂框架的过度工程,只使用了必要的组件,适合小型...

    用hibernate做的省市县三级级联,

    在IT行业中,尤其是在Web开发领域,省市县三级级联是一个常见的需求,主要用于用户选择地址时提供方便的下拉菜单选择。这种功能可以提高用户体验,减少输入错误。在本项目中,开发者利用了Hibernate这一强大的对象...

    用Java做的省市级联菜单

    下面我们将深入探讨如何利用DWR实现省市级联菜单。 首先,我们需要在后端创建一个Java服务,这个服务通常是一个Servlet或者Controller,负责处理来自前端的请求并返回省市数据。这个服务可能包含以下关键步骤: 1....

    ajaxdwr select二级联动

    在这个“ajaxdwr select二级联动”的场景中,我们将讨论如何利用这两种技术实现下拉菜单的级联选择效果。 Ajax是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过JavaScript发送异步请求到服务器,...

    开发Ajax总结

    - **按需取数据**:如级联菜单,根据用户的前一步选择动态加载后续选项。 - **读取外部数据**:例如,从第三方API获取数据并在页面上显示。 #### 二、发送请求及处理响应 ##### 2.1 GET请求 GET请求是最常见的...

Global site tag (gtag.js) - Google Analytics