首先配置好dwr框架所需的文件。
dwr的配置过程:
在/WEB-INF/lib中加入dwr.jar文件
在web.xml中加载dwr对应的servlet
在/WEB-INF/中加入dwr.xml文件
在jsp加入如下内容
〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉〉
有几点要注意:
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>
注意
items的类型为java.util.Map
["====待选择查询字段===="]为Array
DWRUtil.addOptions('startSelects',items, true)表示将显示的key与value互换显示
show为一回调函数,返回的结果在function show(items){}的items中
dwr的配置过程:
在/WEB-INF/lib中加入dwr.jar文件
在web.xml中加载dwr对应的servlet
- <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>
<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文件
- <?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>
<?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加入如下内容
- <%@ 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" οnchange="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" οnclick="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>
<%@ 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" οnchange="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" οnclick="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>
注意
- DWRUtil.removeAllOptions('startSelects');
- DWRUtil.addOptions('startSelects',["====待选择查询字段===="]);
- 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中