`

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整理(转)
评论
发表评论

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

相关推荐

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