`

dwr下柆框与列表框联动的实现

    博客分类：
  • Dwr
DWRJavaScriptSpringServletBean 
阅读更多
首先配置好dwr框架所需的文件。
dwr的配置过程：
在/WEB-INF/lib中加入dwr.jar文件
在web.xml中加载dwr对应的servlet
Java代码 复制代码
  1. <servlet>   
  2.         <servlet-name>dwr</servlet-name>   
  3.             <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>   
  4.             <init-param>   
  5.                 <param-name>debug</param-name>   
  6.                 <param-value>true</param-value>   
  7.             </init-param>   
  8.         </servlet>   
  9.         <servlet-mapping>   
  10.             <servlet-name>dwr</servlet-name>   
  11.             <url-pattern>/dwr/*</url-pattern>   
  12.         </servlet-mapping>  
<servlet>
		<servlet-name>dwr</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</servlet-name>
			<url-pattern>/dwr/*</url-pattern>
		</servlet-mapping>

在/WEB-INF/中加入dwr.xml文件
Java代码 复制代码
  1. <?xml version="1.0" encoding="UTF-8"?>   
  2. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">   
  3. <dwr>   
  4. <allow>   
  5. <create creator="spring" javascript="bmgl">   
  6.     <param name="beanName" value="BmglService"/>   
  7.     <include method="checkBmId" />   
  8. </create>   
  9.        
  10. <create creator="spring" javascript="JcyqlbService" >   
  11. <param name="beanName" value="JcyqlbService"/>   
  12. <include method="findJcyqlb" />   
  13. </create>   
  14. <create creator="spring" javascript="reportManageService" >   
  15. <param name="beanName" value="reportManageService"/>   
  16. <include method="isHaveBackReport" />   
  17. </create>   
  18. <create creator="spring" javascript="YwslService" >   
  19. <param name="beanName" value="YwslService"/>   
  20. <include method="getBmList" />   
  21. <include method="getDeviceList" />   
  22. <include method="findDeviceBySydw" />   
  23. <include method="findGcjyDeviceBySydw" />   
  24. <include method="getDeviceCheckState" />   
  25. <include method="validateSbJynr" />   
  26. <include method="getSbYxzt" />   
  27. <include method="findBargainByEmployId" />   
  28. <include method="findBargainUrl" />   
  29. <include method="getCooperateCorporation" />   
  30. <include method="findAllGgSbjcByGzdid" />   
  31. <include method="findAllGgSbjcByTzsbbhs" />   
  32. <include method="findAllHtByid" />   
  33.        
  34. </create>   
  35.        
  36. <create creator="spring" javascript="GjxwhService" >   
  37. <param name="beanName" value="GjxwhService"/>   
  38. <include method="findRy" />   
  39. <include method="getAllYqList" />   
  40. </create>   
  41.   
  42. <create creator="spring" javascript="xtSbzlService" >   
  43. <param name="beanName" value="xtSbzlService"/>   
  44. <include method="findSbzlList" />   
  45. <include method="findJyxzList" />   
  46. <include method="findJynrList" />   
  47. <include method="findGcjyJynrList" />   
  48. <include method="findSbpzList" />   
  49. <include method="findStaySbpzList" />   
  50. </create>   
  51.        
  52. <convert converter="bean" match="com.syscanhc.tjy.data.bo.GgGjx">   
  53.  <param name="include" value="id, gjxmc" />   
  54. </convert>       
  55.        
  56. <convert converter="bean" match="com.syscanhc.tjy.data.bo.TbmBmk">   
  57.  <param name="include" value="dm,sm" />   
  58. </convert>   
  59. <create javascript="QueryManagerDAO" creator="new">   
  60.     <param name="class" value="com.syscanhc.tjy.data.dao.impl.QueryManagerDAO"></param>   
  61. </create>   
  62. <convert match="map" converter="java.util.Map"></convert>   
  63. </allow>   
  64. </dwr>  
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="spring" javascript="bmgl">
	<param name="beanName" value="BmglService"/>
	<include method="checkBmId" />
</create>
	
<create creator="spring" javascript="JcyqlbService" >
<param name="beanName" value="JcyqlbService"/>
<include method="findJcyqlb" />
</create>
<create creator="spring" javascript="reportManageService" >
<param name="beanName" value="reportManageService"/>
<include method="isHaveBackReport" />
</create>
<create creator="spring" javascript="YwslService" >
<param name="beanName" value="YwslService"/>
<include method="getBmList" />
<include method="getDeviceList" />
<include method="findDeviceBySydw" />
<include method="findGcjyDeviceBySydw" />
<include method="getDeviceCheckState" />
<include method="validateSbJynr" />
<include method="getSbYxzt" />
<include method="findBargainByEmployId" />
<include method="findBargainUrl" />
<include method="getCooperateCorporation" />
<include method="findAllGgSbjcByGzdid" />
<include method="findAllGgSbjcByTzsbbhs" />
<include method="findAllHtByid" />
	
</create>
	
<create creator="spring" javascript="GjxwhService" >
<param name="beanName" value="GjxwhService"/>
<include method="findRy" />
<include method="getAllYqList" />
</create>

<create creator="spring" javascript="xtSbzlService" >
<param name="beanName" value="xtSbzlService"/>
<include method="findSbzlList" />
<include method="findJyxzList" />
<include method="findJynrList" />
<include method="findGcjyJynrList" />
<include method="findSbpzList" />
<include method="findStaySbpzList" />
</create>
	
<convert converter="bean" match="com.syscanhc.tjy.data.bo.GgGjx">
 <param name="include" value="id, gjxmc" />
</convert>	
	
<convert converter="bean" match="com.syscanhc.tjy.data.bo.TbmBmk">
 <param name="include" value="dm,sm" />
</convert>
<create javascript="QueryManagerDAO" creator="new">
	<param name="class" value="com.syscanhc.tjy.data.dao.impl.QueryManagerDAO"></param>
</create>
<convert match="map" converter="java.util.Map"></convert>
</allow>
</dwr>

在jsp加入如下内容
Java代码 复制代码
  1. <%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>   
  2. <%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>   
  3. <%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>   
  4.   
  5. <%@ page contentType="text/html; charset=GBK"%>   
  6. <html>   
  7. <head>   
  8. <link href="css/style.css" rel="stylesheet" type="text/css">   
  9. <script language="JavaScript" src="js/system.js"></script>   
  10. <script type="text/javascript" src='dwr/engine.js'></script>   
  11. <script type="text/javascript" src='dwr/util.js'></script>   
  12. <script type="text/javascript" src="dwr/interface/QueryManagerDAO.js"></script>   
  13. <script language="javascript" type="text/javascript">   
  14.     function show(items)   
  15.     {   
  16.        DWRUtil.removeAllOptions('startSelects');   
  17.        
  18.       DWRUtil.addOptions('startSelects',["====待选择查询字段===="]);   
  19.       DWRUtil.addOptions('startSelects',items);   
  20.     }   
  21.       
  22.     function getItems()   
  23.     {   
  24.         QueryManagerDAO.getTableColumn($('tableName').value,show);      
  25.     }   
  26. </script>   
  27. <title>动态查询主页面</title>   
  28.   
  29. </head>   
  30. <body >   
  31. <table border="0" cellspacing="0" cellpadding="0" width="50%" id="table1">   
  32.   
  33.     <html:form action="/query_Gzd?method=setOptions" method="post">   
  34.     <tr><td>   
  35. <html:select property="tableName" styleClass="inputtext" onchange="getItems();">   
  36. <html:options collection="tableItems" labelProperty="key" property="value"/>   
  37. </html:select></td></tr>   
  38.         <tr>   
  39.             <td>   
  40.             <table width="100%" border="0" cellspacing="0" class="DefaultTable">         
  41.                 <tr class="sysdisplay">   
  42.                     <td align="right"> </td>                       
  43.                     <td>   
  44.                     <html:select property="startSelects" styleClass="inputtext"     
  45.                         size="10" multiple="true">   
  46.                         <html:option value="">====待选择查询字段====</html:option>   
  47.                         <html:options collection="gzdItems" labelProperty="value"  property="key"/>   
  48.                         </html:select></td>   
  49.                     <td align="center"><input type="button" value="添加>>"  
  50.                         class="btn2" onClick="addItem()">   
  51.                     <p>   
  52.                     <p><input type="button" value="<<移除" class="btn2"  
  53.                         onClick="deleteItem()">   
  54.                     </td>   
  55.                     <td><html:select property="endSelects" style="weight:80px"  
  56.                         styleClass="inputtext" size="10" multiple="true">   
  57.                         <html:option value="">====已选择查询字段====</html:option>   
  58.                            
  59.                     </html:select></td>   
  60.                 </tr>   
  61.   
  62.                 <tr class="sysdisplay">   
  63.                     <td colspan="4" align="center"><input type="button"  
  64.                         value="确 定" class="btn2" onclick="submitOptions();">    <input   
  65.                         type="button" name="Submit32" onClick="window.close();"  
  66.                         class="btn2" value="关 闭"></td>   
  67.                 </tr>   
  68.             </table>   
  69.             </td>   
  70.         </tr>   
  71.     </html:form>   
  72. </table>   
  73. <script  language="javascript">   
  74. <!--   
  75.     function submitOptions()   
  76.     {   
  77.      var result="";   
  78.       var selto = document.getElementById("endSelects");   
  79.     for(var i=selto.options.length-1;i>=1;i--)   
  80.     {   
  81.         result=result+selto.options[i].text+",";   
  82.     }   
  83.     if(result.length>0){   
  84.         result = result.substr(0,result.length-1);   
  85.     }   
  86.       gzdSearchForm.resultList.value=result;   
  87.       var ss= window.confirm("是否保存查询条件？");   
  88.       if(ss) {   
  89.       var searchName=window.showModalDialog("saveTempl.html",window,"dialogHeight:100px,center:yes,resizable:no,status:no");   
  90.       gzdSearchForm.action=gzdSearchForm.action+"&searchName="+searchName;   
  91.       }   
  92.       gzdSearchForm.submit();   
  93.     }   
  94.   
  95.     function addItem()   
  96.     {   
  97.         var selfrom=document.getElementById("startSelects");   
  98.         var selto=document.getElementById("endSelects");   
  99.        
  100.         for(var i=selfrom.options.length-1;i>=1;i--)   
  101.         {   
  102.           if(selfrom.options[i].selected)   
  103.           {   
  104.              var index = selto.length;   
  105.               selto.options[index]=new Option(selfrom.options[i].text,selfrom.options[i].value);   
  106.               selfrom.remove(i);   
  107.           }   
  108.         }   
  109.     }   
  110.        
  111.     function deleteItem()   
  112.     {   
  113.         var selto=document.getElementById("startSelects");   
  114.         var selfrom=document.getElementById("endSelects");   
  115.        
  116.         for(var i=selfrom.options.length-1;i>=1;i--)   
  117.         {   
  118.             if(selfrom.options[i].selected)   
  119.             {   
  120.                 selto.options[selto.length]=new Option(selfrom[i].text,selfrom[i].value);   
  121.                 selfrom.remove(i);   
  122.             }   
  123.         }   
  124.     }   
  125.                
  126. //-->   
  127. </script>   
  128. </body>   
  129. </html>  
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>

<%@ page contentType="text/html; charset=GBK"%>
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="js/system.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/QueryManagerDAO.js"></script>
<script language="javascript" type="text/javascript">
    function show(items)
    {
       DWRUtil.removeAllOptions('startSelects');
    
      DWRUtil.addOptions('startSelects',["====待选择查询字段===="]);
      DWRUtil.addOptions('startSelects',items);
    }
   
    function getItems()
    {
        QueryManagerDAO.getTableColumn($('tableName').value,show);   
    }
</script>
<title>动态查询主页面</title>

</head>
<body >
<table border="0" cellspacing="0" cellpadding="0" width="50%" id="table1">

	<html:form action="/query_Gzd?method=setOptions" method="post">
	<tr><td>
<html:select property="tableName" styleClass="inputtext" onchange="getItems();">
<html:options collection="tableItems" labelProperty="key" property="value"/>
</html:select></td></tr>
		<tr>
			<td>
			<table width="100%" border="0" cellspacing="0" class="DefaultTable">		
				<tr class="sysdisplay">
					<td align="right"> </td>					
					<td>
					<html:select property="startSelects" styleClass="inputtext"  
						size="10" multiple="true">
						<html:option value="">====待选择查询字段====</html:option>
						<html:options collection="gzdItems" labelProperty="value"  property="key"/>
						</html:select></td>
					<td align="center"><input type="button" value="添加>>"
						class="btn2" onClick="addItem()">
					<p>
					<p><input type="button" value="<<移除" class="btn2"
						onClick="deleteItem()">
					</td>
					<td><html:select property="endSelects" style="weight:80px"
						styleClass="inputtext" size="10" multiple="true">
						<html:option value="">====已选择查询字段====</html:option>
						
					</html:select></td>
				</tr>

				<tr class="sysdisplay">
					<td colspan="4" align="center"><input type="button"
						value="确 定" class="btn2" onclick="submitOptions();">    <input
						type="button" name="Submit32" onClick="window.close();"
						class="btn2" value="关 闭"></td>
				</tr>
			</table>
			</td>
		</tr>
	</html:form>
</table>
<script  language="javascript">
<!--
	function submitOptions()
	{
	 var result="";
	  var selto = document.getElementById("endSelects");
	for(var i=selto.options.length-1;i>=1;i--)
	{
		result=result+selto.options[i].text+",";
	}
	if(result.length>0){
		result = result.substr(0,result.length-1);
	}
	  gzdSearchForm.resultList.value=result;
	  var ss= window.confirm("是否保存查询条件？");
	  if(ss) {
	  var searchName=window.showModalDialog("saveTempl.html",window,"dialogHeight:100px,center:yes,resizable:no,status:no");
	  gzdSearchForm.action=gzdSearchForm.action+"&searchName="+searchName;
	  }
	  gzdSearchForm.submit();
	}

	function addItem()
	{
	    var selfrom=document.getElementById("startSelects");
	    var selto=document.getElementById("endSelects");
	
	    for(var i=selfrom.options.length-1;i>=1;i--)
	    {
	      if(selfrom.options[i].selected)
	      {
	      	 var index = selto.length;
	          selto.options[index]=new Option(selfrom.options[i].text,selfrom.options[i].value);
	          selfrom.remove(i);
	      }
	    }
	}
	
	function deleteItem()
	{
	    var selto=document.getElementById("startSelects");
	    var selfrom=document.getElementById("endSelects");
	
	    for(var i=selfrom.options.length-1;i>=1;i--)
	    {
	        if(selfrom.options[i].selected)
	        {
	            selto.options[selto.length]=new Option(selfrom[i].text,selfrom[i].value);
				selfrom.remove(i);
	        }
	    }
	}
			
//-->
</script>
</body>
</html>

〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉
有几点要注意：
dwr.xml是声明的类名要与页面中声明的类名一致，如
<script type="text/javascript" src="dwr/interface/QueryManagerDAO.js"></script>
与dwr.xml中
<create javascript="QueryManagerDAO" creator="new">
<param name="class" value="com.syscanhc.tjy.data.dao.impl.QueryManagerDAO"></param>
</create>
另外，QueryManagerDAO.getTableColumn()方法中如用到javaBean或者其它对象要在<convert</convert>中声明。如：
<convert match="map" converter="java.util.Map"></convert>
注意
Java代码 复制代码
  1. DWRUtil.removeAllOptions('startSelects');   
  2. DWRUtil.addOptions('startSelects',["====待选择查询字段===="]);   
  3. DWRUtil.addOptions('startSelects',items);   
DWRUtil.removeAllOptions('startSelects');
DWRUtil.addOptions('startSelects',["====待选择查询字段===="]);
DWRUtil.addOptions('startSelects',items);
的用法
items的类型为java.util.Map
["====待选择查询字段===="]为Array
DWRUtil.addOptions('startSelects',items,true)表示将显示的key与value互换显示
show为一回调函数，返回的结果在function show(items){}的items中
分享到：
| DWR整理(转)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax dwr 框架实现二级联动下拉列表源码

    总结来说，利用Ajax和DWR框架实现的二级联动下拉列表，使得用户可以在不刷新页面的情况下完成多级选择，提升了用户体验。同时，DWR的使用简化了前后端交互的复杂性，使得开发更为高效。通过阅读和理解提供的源代码，...

    java+dwr框架实现聊天室

    Java+dwr 框架实现聊天室 Java+dwr框架实现聊天室是使用Java语言和dwr框架实现的服务器推技术，实现了实时通信的聊天室功能。下面将详细介绍该技术的实现过程和相关知识点。 一、dwr 框架简介 dwr（Direct Web ...

    dwr.rar_dwr_dwr ajax_dwr 实现 联动 标签

    在“dwr.rar_dwr_dwr ajax_dwr 实现 联动 标签”这个项目中，我们将探讨如何利用DWR和AJAX技术来创建一个动态的、具有联动效果的标签系统。 1. **DWR基础**： DWR的核心组件包括一个服务器端的Servlet（DWR Engine...

    dwr框架+struts+Hibrenate实现下拉菜单二级联动

    "dwr框架+struts+Hibernate实现下拉菜单二级联动"是一个典型的Web应用程序开发技术组合，它旨在创建一个动态且响应式的交互式UI，特别是在处理关联数据时。下面我们将深入探讨这个主题。 首先，DWR（Direct Web ...

    DWR整合SSH框架实现类百度搜索实例(Oracle)

    【标题】"DWR整合SSH框架实现类百度搜索实例(Oracle)"是一个综合性的IT实践项目，旨在演示如何将Direct Web Remoting (DWR) 框架与Spring、Struts和Hibernate（通常被称为SSH框架）集成，以创建一个类似于百度搜索...

    DWR实现省市县三级联动小例子

    标题 "DWR实现省市县三级联动小例子" 暗示了这个压缩包可能包含一个使用Direct Web Remoting (DWR) 技术构建的示例项目，该示例展示了如何实现在网页上进行省、市、县三级联动选择的功能。这种功能在很多中国的网站...

    DWR框架的实现DWR框架的实现

    DWR (Direct Web Remoting) 是一个开源的Java框架，用于在Web应用程序中实现JavaScript与服务器端Java代码的交互。DWR使得动态的Web页面能够像调用本地方法一样调用服务器上的Java方法，极大地提高了Web应用的用户...

    AJAX 与 DWR框架

    1. **自动完成/下拉列表**：用户输入时，DWR可以从服务器获取匹配的建议列表，动态填充到输入框下方。 2. **表格数据动态加载**：用户滚动表格时，DWR加载额外的数据行，实现无限滚动效果。 3. **表单验证**：在...

    dwr框架实现无刷新分页

    DWR（Direct Web Remoting）是一种JavaScript和Java之间的远程调用技术，它允许Web应用在不刷新整个页面的情况下与服务器进行交互，从而实现动态更新和实时反馈的效果。在DWR中，JavaScript对象可以直接调用后台的...

    dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架

    dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架

    DWR实现省市县三级联动

    在介绍的省市县三级联动的例子中，通过DWR与AJAX的结合使用，可以实现用户在选择一个省级别之后，页面能够动态地加载并显示该省份下属的所有市级选项。同样地，再选择一个市级之后，页面能够加载并显示该市下属的...

    dwr 实现2级联动

    总结，"dwr 实现2级联动"是利用DWR框架来创建一个前端与后端交互的示例，通过动态更新页面元素，达到两个选择框之间的联动效果。在实际开发中，DWR提供了一种便捷的方式来进行异步通信，提高了Web应用的交互体验。

    DWR实现三级联动.pdf

    在本案例中，DWR被用于实现一个省市县三级联动的选择器，即当用户选择一个省份时，相应的城市列表会自动更新；当用户选择了一个城市后，相关的县区列表也会随之更新。 #### 二、关键技术栈 - **Spring 2.0.5**：...

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

    每当用户在搜索框中键入字符，DWR会自动发送异步请求，查询数据库中的相关数据，并实时更新到搜索结果列表。这样，用户可以看到随着输入的每个字符，搜索结果动态变化，提高了搜索效率和用户体验。 综上所述，这个...

    dwr框架的使用简介

    AJAX技术的核心在于能够在不重新加载整个网页的情况下，通过JavaScript与服务器进行数据交换，从而实现网页的部分更新。这种技术能够提供更加流畅的用户体验，减少服务器的负担，并提高应用程序的响应速度。AJAX技术...

    ssh+dwr2实现省市二级联动

    在IT行业中，SSH（Spring、Struts、Hibernate）是一个经典的Java Web开发框架组合，而DWR（Direct Web Remoting）则是一种JavaScript与服务器端交互的技术，常用于实现AJAX功能。本篇主要讨论如何利用SSH框架和DWR来...

Magicbox
Global site tag (gtag.js) - Google Analytics