近期，在网上看了一些资料，自己写了一个二级联动的例子：
在这里，DWR的配置就不多说了，先贴上dwr.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
<filter class="org.directwebremoting.filter.AuditLogAjaxFilter"/>
<filter class="org.directwebremoting.filter.AuditLogAjaxFilter"/>
<create creator="new" javascript="MainService">
<param name="class" value="com.service.portal.MainService "/>
</create>
</allow>
</dwr>
MainService.java 代码如下：
public class MainService {
/**
* 获取联动类型
* @param hs 前台传入的查询参数pid
* @return
*/
public ListRange getType(HashMap hs){
hs.put("flag","1");
List<Type> list = typeDao.getTypeList(hs);
listRange.setData(list.toArray());
listRange.setTotalSize(list.size());
return listRange;
}
}
该方法返回一个ListRange；其中的typeDao.getTypeList(hs) 这个方法就不多介绍，就是返回一个List<Type> （Type类代码下面会贴上）。
ListRange.java:
public class ListRange {
private Object[] data;
private int totalSize;
public Object[] getData() {
return data;
}
public void setData(Object[] data) {
this.data = data;
}
public int getTotalSize() {
return totalSize;
}
public void setTotalSize(int totalSize) {
this.totalSize = totalSize;
}
}
Type.java
/**
* 类型
* @author Administrator
*
*/
public class Type {
private Integer id;
private String name;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
接下来上是显示页面test.jsp
<%@ page contentType="text/html; charset=GBK"%>
<html>
<head>
<title>二级联动</title>
<link rel="stylesheet" type="text/css" href="../css/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type='text/javascript' src='../dwr/interface/MainService.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/dwrproxy.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="from"></div>
</body>
</html>
test.js:
Ext.onReady(function() {
var typeRecord = Ext.data.Record.create([
{name : 'id', type : 'int',mapping:'id'},
{name : 'name',type : 'string',mapping:'name'}
]);
var typeStore = new Ext.data.Store({
proxy : new Ext.data.DWRProxy(MainService.getType, true),
reader : new Ext.data.ListRangeReader({
totalProperty : 'totalSize',
root:'data',
id : 'pid'
}, typeRecord)
});
typeStore.on("beforeload", function(thiz, options) {
thiz.baseParams["pid"] = '0';
});
var sonStore = new Ext.data.Store({
proxy : new Ext.data.DWRProxy(MainService.getType, true),
reader : new Ext.data.ListRangeReader({
totalProperty : 'totalSize',
root:'data',
id : 'pid'
}, typeRecord)
});
var tyleCombobox = new Ext.form.ComboBox({
fieldLabel:"一级类型",
valueField:"id",
displayField:"name",
store:typeStore,
triggerAction:"all",
name :'_type',
id:'_type',
emptyText:'请选择...',
blankText:'请选择类型',
editable:false,
width:200,
mode:"remote",
listeners:{
'select' : function(o){
var v = o.getValue();
var sonType = Ext.getCmp('son_type');
sonType.reset(); //重置
sonStore.load({ //加载sonStore
params : {
pid : v
}
})
}
}
});
var sonTypeCombobox = new Ext.form.ComboBox({
fieldLabel:"二级类型",
valueField:"id",
displayField:"name",
store:sonStore,
triggerAction:"all",
name :'son_type',
id:'son_type',
emptyText:'请选择...',
blankText:'请选择二级类型',
editable:false,
width:200,
mode:"local"
});
var form = new Ext.form.FormPanel({
title : '二级联动例子',
frame:true,
id:'form',
bodyStyle:"padding:10px 10px 0px 10px",
renderTo : 'from',
items:[tyleCombobox,sonTypeCombobox]
});
});
在这里注意：tyleCombobox 的 mode用的是“remote” 而 sonTypeCombobox 的mode用的是“local” ，这样的话，只有在选择了 一级类型 后 才加载 二级类型 的数据。若sonTypeCombobox 的mode也改成“remote”的话，会出现在没选择一级类型的情况下，可直接选二级类型。
附：mode:'local'指的是打开页面时就将数据取到本地，需要load() 启动
mode:'remote'指的是要动态去服务器端拿数据,点击下拉列表时会加载数据
相关推荐
总结起来，"DWR+extjs+spring+hibernate"的组合是现代Web应用开发的一个强大工具集，它能够帮助开发者快速构建出交互性强、性能优异的企业级应用。通过深入理解和熟练掌握这四个技术，可以显著提升开发者的技能水平...
本项目将讲解如何使用ExtJs（一个强大的JavaScript框架）结合DWR（Direct Web Remoting，一种允许JavaScript与Java后端进行实时通信的技术）来实现页面的登录功能。通过这种方式，我们可以创建一个高效、用户友好的...
ExtJs+Dwr(Grid)实现分页功能，很实用
在“EXTJS+DWR3.0实现文件上传”这个主题中，我们将探讨如何结合这两者来实现一个高效且用户友好的文件上传功能。在实际的Web应用中，文件上传是一个常见的需求，例如在社交媒体平台上传图片、在文档分享网站上传...
EXTJS+S2SH+DWR 是一种常见的Web应用程序开发架构，结合了三种强大的技术来构建交互性强、用户体验良好的企业级应用。以下是对这些技术及其在雇员管理系统中的应用的详细解释： 1. EXTJS：EXTJS 是一个JavaScript库...
首先，ExtJS是一个强大的JavaScript库，用于构建富客户端应用程序。它提供了丰富的UI组件，如Grid，能够方便地处理数据展示、分页和排序。在这个场景中，`usernamerecord.jsp`是用户界面的入口点，它引用了所需的CSS...
在本文中，我们将深入探讨如何使用ExtJS 4和Struts2框架实现省市区三级联动的完整示例。这个示例适用于需要在Web应用程序中实现地理区域选择功能的情况，例如用户地址输入。以下是对该技术栈及其实现方法的详细说明...
用的东西比较杂,主要为了学习一下知识呵呵: ssh2、dwr、jquery、extjs、jquery weekcalendar、jfreechart、jasperreport 联系人实现了拖动实现好友分组。可以把grid直接拖到tree，不同于其他的例子，拖动grid后会...
ExtJS 是一个强大的JavaScript前端框架，用于构建富客户端应用程序。它提供了一系列的组件，包括网格（Grid）、表单（Form）、树形结构（Tree）等，使得开发者可以创建功能丰富的、用户界面友好的Web应用。在与...
标题中的“spring+dwr+Extjs+sql2008的数组传递grid”是指一个集成应用，使用了Spring框架、Direct Web Remoting (DWR)技术、ExtJS前端框架以及SQL Server 2008数据库，实现了从后端服务器向前端Grid组件传递数据的...
本压缩包文件"Extjs+Dwr"提供了一个整合ExtJS和DWR的例子，让我们来详细探讨一下这两个技术以及它们的整合过程。 **ExtJS** 是一个JavaScript库，主要用于构建桌面级的Web应用。它提供了一套完整的UI组件，包括数据...
ExtJS 是一个流行的JavaScript库，用于构建富客户端的Web应用程序，而DWR（Direct Web Remoting）则是一种在客户端JavaScript和服务器端Java之间进行实时通信的技术。这篇博客文章"Extjs--DWR做的动态树"可能探讨了...
EXTJS 是一个基于 JavaScript 的富客户端框架，它提供了丰富的组件库，用于构建用户界面，特别是企业级应用。SSH 框架则由 Spring、Struts 和 Hibernate 组成，是一个经典的 Java Web 开发框架，用于处理业务逻辑和...
ExtJs完整例子ext+dwr,希望能给需要地兄弟提供帮助
Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南
基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架
NULL 博文链接：https://atgoingguoat.iteye.com/blog/620103
MyBatis是一个轻量级的持久层框架，它允许开发者自由地编写SQL语句，将数据访问逻辑与应用程序紧密结合。在财务管控系统中，MyBatis可以方便地操作数据库，执行复杂的查询和更新操作，如账目核对、统计分析等。通过...
本系统是采用Struts1.3+ExtJS2.2+DWR2.0技术 开发环境：Myeclipse6.0+tomcat6.0+sql server2000 里面有完整的代码！ 系统简介： 本系统已经实现了对好友发送即时消息和离线消息，也实现了用户的查询及添加，删除...
extjs+asp+access 实例, 用IIS 即可立即调试 详细请看里面说明 同时,打包文件有个extjs3.0的javascript包,里面有个example文件夹,很多都可以copy过来改成自己的代码