在jsp页面 处于一个超链接:
如下图:对于处理状态 和确认状态 当数据库中是 0 时 页面显示 “否” 并在 “否”上添加超链接 ;
点击 确认状态的“否” 可以再页面显示 确认人 和 确认时间, 点击 处理状态 的“否”时
- 如果 确认状态为 :“否” 将处理状态,处理人,处理时间,确认状态,确认人,确认时间 都显示出来!
- 如果 处理状态 为:“否” 就将处理状态,
注:
处理人,处理时间,显示出来!
时间都为当前时间,处理人和确认人 为当前 登录的人员!
操作如下图:
上图所示: 处理时间和确认时间 相同的是 先点击了 处理状态,其中确认时间 晚于 确认时间的是 先点击确认状态,这是确认状态已经有值,所以只显示 处理人和处理时间;
以下是这个页面用到的jsp:
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <%@ taglib prefix="s" uri="/struts-tags"%> <%@ include file="/common/header.jsp"%> <script language="javascript" src="${path}/page/wrm/js/util.js"></script> <script language="javascript" src="${path}/page/wrm/js/engine.js"></script> <script language="javascript" src="${path}/dwr/interface/AnalyseMessageService.js"></script> <%-- 对比分析消息(列表查询)页面 Author : Date : 2009-09-28 --%> <script type="text/javascript"> /** * 时间对象的格式化; */ Date.prototype.format = function(format) { /* * eg:format="YYYY-MM-dd hh:mm:ss"; */ var o = { "M+" :this.getMonth() + 1, // month "d+" :this.getDate(), // day "h+" :this.getHours(), // hour "m+" :this.getMinutes(), // minute "s+" :this.getSeconds(), // second "q+" :Math.floor((this.getMonth() + 3) / 3), // quarter "S" :this.getMilliseconds() // millisecond } if (/(y+)/.test(format)) { format = format.replace(RegExp.$1, (this.getFullYear() + "") .substr(4 - RegExp.$1.length)); } for ( var k in o) { if (new RegExp("(" + k + ")").test(format)) { format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); } } return format; } // 改变处理 function changeFlag(id,rowcount,confirmFalg){ // 向后台数据库中 传的时间 var now = new Date().format("yyyy-MM-dd hh:mm:ss"); var loginName = document.getElementById("analyseMessageForm_loginName").value; AnalyseMessageService.updateAnalyseMessageDealFlag(id,now,loginName,function(dealFlag) { var updateID = eval("'dealFlagTd'+rowcount"); var updateIDB = eval("'dealFlagTd1'+rowcount"); var dealTimeIDTd = eval("'dealTimeTd'+rowcount"); var dealTimeID = eval("'dealTime'+rowcount"); var dealTimediv = eval("'dealTimediv'+rowcount"); var dealerTd = eval(" 'dealerTd'+rowcount"); var dealer = eval(" 'dealer'+rowcount"); var dealerdiv = eval(" 'dealerdiv'+rowcount"); // 改变处理状态 var oDivId = document.getElementById(updateID); if (oDivId!=null){ oDivId.style.display = "none"; } var oDivId = document.getElementById(updateIDB); if (oDivId!=null){ oDivId.style.display = "block"; } // 添加处理时间 var oDivTime = document.getElementById(dealTimeIDTd); if(oDivTime != null){ oDivTime.style.display = "none"; } var oDivTime = document.getElementById(dealTimeID); var oDivTimediv = document.getElementById(dealTimediv); if(oDivTime != null){ oDivTimediv.style.display = "block"; oDivTime.style.display = "block"; // jsp页面页显示的时间 oDivTime.innerHTML=new Date().format("yy-MM-dd hh:mm"); } //添加处理人 var odealertd = document.getElementById(dealerTd); if(odealertd != null){ odealertd.style.display = "none"; } var odealer = document.getElementById(dealer); var odealerdiv = document.getElementById(dealerdiv); if(odealerdiv!=null){ odealer.style.display="block"; odealerdiv.style.display="block"; odealerdiv.innerHTML=loginName; } // 判断是否已确认 var confirmerdivId = eval("'confirmerdiv'+rowcount"); var confirmerdiv = document.getElementById(confirmerdivId); // 如果没有确认,就将确认 全部设值 if(confirmerdiv.innerHTML == ""){ changeConfirmFlag(id,rowcount); } } ); } // 改变确认 function changeConfirmFlag(id,rowcount){ var now = new Date().format("yyyy-MM-dd hh:mm:ss"); var loginName = document.getElementById("analyseMessageForm_loginName").value; AnalyseMessageService.updateAnalyseMessageConfirmFlag(id,now,loginName,function(confirmFlag){ var updateID = eval("'confirmFlagTd'+rowcount"); var updateIDB = eval("'confirmFlag'+rowcount"); var confirmerTdId = eval("'confirmerTd'+rowcount"); var confirmerId = eval("'confirmer'+rowcount"); var confirmerdivId = eval("'confirmerdiv'+rowcount"); var confirmTimedivId = eval("'confirmTimediv'+rowcount"); var confirmTimeId = eval("'confirmTime'+rowcount"); var confirmTimeTdId = eval("'confirmTimeTd'+rowcount"); //修改确认标识 var oDivId = document.getElementById(updateID); if(oDivId != null){ oDivId.style.display = "none"; } var oDivId = document.getElementById(updateIDB); if (oDivId!=null){ oDivId.style.display = "block"; } //添加确认人 var confirmertd = document.getElementById(confirmerTdId); var confirmer = document.getElementById(confirmerId); var confirmerdiv = document.getElementById(confirmerdivId); if(confirmertd != null){ confirmertd.style.display="none"; } if(confirmer != null){ confirmer.style.display="block"; } if(confirmerdiv != null){ confirmerdiv.style.display="block"; confirmerdiv.innerHTML=loginName; } //添加确认时间 var confirmTimeTd = document.getElementById(confirmTimeTdId); var confirmTime = document.getElementById(confirmTimeId); var confirmTimediv = document.getElementById(confirmTimedivId); if(confirmTimeTd != null ){ confirmTimeTd.style.display="none"; } if(confirmTime!= null){ confirmTime.style.display="block"; } if(confirmTimediv != null){ confirmTimediv.style.display="block"; confirmTimediv.innerHTML=new Date().format("yy-MM-dd hh:mm"); } } ); } function doQuery(){ fnTrimForm(analyseMessageForm); analyseMessageForm.action = "${path}/analyseMessage/listAnalyseMessage.action"; analyseMessageForm.submit(); } function goDetail(id){ fnTrimForm(analyseMessageForm); var btsNumber = document.getElementById('analyseMessageForm_analyseMessage_btsNumber').value; var regionName = document.getElementById('analyseMessageForm_regionName').value; window.location="${path}/analyseMessage/viewAnalyseMessage.action?id="+id+"&analyseMessage.btsNumber="+btsNumber+"&analyseMessage.regionName="+regionName; } function doExcel(){ fnTrimForm(analyseMessageForm); analyseMessageForm.action = "${path}/analyseMessage/createExportAnalyseMessage.action"; analyseMessageForm.submit(); } function showReginTree(){ var url = "${path}/analyseMessage/setRegionTree.action"; window.open(url,'',"width=220, height=270,top=200,left=430,scrollbars=no,menubar=no,toolbar=no"); } window.onload = function() { var tab = document.getElementById("coolGrid1"); if(tab) fixupFirstRow(tab); } </script> <s:form name="analyseMessageForm" method="post" theme="simple" id="analyseMessageForm"> <s:hidden name="analyseMessage.btsNumber"/> <div class="title">对比分析</div> <div class="search"> <table class="table"> <tr> <td width="4%" rowspan="2"><img src="${path}/page/wrm/image/search.gif" width="40" height="39"></td> <td nowrap="nowrap">消息类型</td> <td> <s:select name="analyseMessage.type" list="analyseMsgList" listKey="number" listValue="name" headerKey="" headerValue="--全部--" emptyOption="false" theme="simple" cssClass="select"/> </td> <td nowrap="nowrap">是否考核</td> <td> <s:select name="analyseMessage.check" list='msgCheckMap' listKey="key" listValue="value" value="analyseMessage.check" headerKey="" headerValue="--全部--" emptyOption="false" theme="simple" cssClass="select"/> </td> <td nowrap="nowrap">所属区域</td> <td nowrap="nowrap"> <s:if test="region.number=='001'"> <s:textfield name="regionName" onfocus="this.blur()" cssClass="text"/> <s:hidden name="regionNumber"/> <img src="${path}/etc/img/analyse/search.png" style="cursor:hand;" onclick="showReginTree()"> </s:if> <s:else> <s:select name="regionName" list='regionList' listKey="name" listValue="name" emptyOption="false" theme="simple" cssClass="select"/> <s:hidden name="regionNumber" value="${region.number}"/> </s:else> </td> <td rowspan="2" align="center"> <input type='button' onclick="doQuery();" class="button" value="查 询" /> </td> </tr> <tr> <td nowrap="nowrap">基站类型</td> <td><s:select name="analyseMessage.btsType" list="btsTypeList" listKey="nameEn" listValue="nameEn" headerKey="" headerValue="--全部--" emptyOption="false" theme="simple" cssClass="select"/> </td> <td nowrap="nowrap">处理状态</td> <td> <s:select name="analyseMessage.dealFlag" list='msgDealMap' listKey="key" listValue="value" value="analyseMessage.dealFlag" headerKey="" headerValue="--全部--" emptyOption="false" theme="simple" cssClass="select"/> </td> <td nowrap="nowrap"> 消息体 </td> <td> <s:textfield name="analyseMessage.content" cssClass="text" onchange="getTrimString(this)" /> </td> </tr> </table> </div> <div class="history-item-title">对比分析消息列表</div> <div style="overflow: auto; width: 100%; height: 300px"> <div class="history-item-content"> <div class=datagrid style="width: 100%; height: 280; overflow: auto;"> <table id=coolGrid1 class="listtable" onclick='fnSelectTR()' cellSpacing=0 cellPadding=2 > <s:hidden name="loginName"/> <tr align="center" class="header"> <td nowrap>序号</td> <td nowrap> </td> <td nowrap>消息类型</td> <td nowrap>消息体</td> <td nowrap>所属区域</td> <td nowrap>基站类型</td> <td nowrap>板件规格</td> <td nowrap>板件序列号</td> <td nowrap>是否考核</td> <td nowrap>处理状态</td> <td nowrap="nowrap">处理人</td> <td nowrap="nowrap">处理时间</td> <td nowrap="nowrap">确认状态</td> <td nowrap="nowrap">确认人</td> <td nowrap="nowrap">确认时间</td> <td nowrap>创建时间</td> <td nowrap="nowrap">采集时间</td> </tr> <s:iterator value="analyseMessageList" status="rowstatus" id="it"> <tr> <td nowrap><s:property value="#rowstatus.count" /></td> <s:if test="readFlag==1"> <td valign="middle" class="common_td_text" title="查看消息" > <a href="#" onclick="goDetail('<s:property value="id" />')"><img src="${path}/etc/img/analyse/readed.gif" style="height:14;width:18" border=0 /></a> </td> </s:if> <s:else> <td valign="middle" class="common_td_text" title="查看消息" > <a href="#" onclick="goDetail('<s:property value="id" />')"><img src="${path}/etc/img/analyse/unread.gif" style="height:14;width:18" border=0 /></a> </td> </s:else> <td nowrap><s:property value="type" /></td> <td nowrap title='<s:property value="content" /> '><s:property value="content" /></td> <td nowrap><s:property value='regionName' /></td> <td nowrap><s:property value="btsType" /></td> <td nowrap><s:property value="equipmentSpec" /></td> <td nowrap><s:property value="serialNumber" /></td> <td nowrap> <s:if test="check==0">否</s:if> <s:else>是</s:else> </td> <td valign="middle" class="common_td_text" id="dealFlagTd<s:property value="#rowstatus.count" />"> <s:if test="dealFlag==0"><a href="#" onclick="changeFlag('${id }','<s:property value="#rowstatus.count" />','<s:property value="confirmFlag" />');" >否</a></s:if> <s:else>是</s:else> </td> <td valign="middle" class="common_td_text" id="dealFlagTd1<s:property value="#rowstatus.count" />"> 是 </td> <script> var oDivId = document.getElementById('dealFlagTd1<s:property value="#rowstatus.count" />'); if (oDivId!=null){ oDivId.style.display = "none"; } </script> <td nowrap="nowrap" id="dealerTd<s:property value="#rowstatus.count" />" > <s:property value="dealer" /> </td> <td nowrap="nowrap" id="dealer<s:property value="#rowstatus.count" />"> <s:if test="dealer != null"> <s:property value="dealer" /> </s:if> <s:else> <div id="dealerdiv<s:property value="#rowstatus.count" />" /> </s:else> </td> <script> var odealerDivId = document.getElementById('dealer<s:property value="#rowstatus.count" />'); var odealerDiv = document.getElementById('dealerdiv<s:property value="#rowstatus.count" />'); if (odealerDivId!=null){ odealerDivId.style.display = "none"; } if (odealerDiv!=null){ odealerDiv.style.display = "none"; } </script> <td nowrap id="dealTimeTd<s:property value="#rowstatus.count" />"> <s:date name="dealTime" format="yy-MM-dd HH:mm"/> </td> <td nowrap id="dealTimediv<s:property value="#rowstatus.count" />"> <s:if test="dealTime != null "> <s:date name="dealTime" format="yy-MM-dd HH:mm"/> </s:if> <s:else> <div id="dealTime<s:property value="#rowstatus.count" />" /> </s:else> </td> <script> var oDivTime = document.getElementById('dealTime<s:property value="#rowstatus.count" />'); var oDivTimediv = document.getElementById('dealTimediv<s:property value="#rowstatus.count" />'); if (oDivTime!=null){ oDivTime.style.display = "none"; } if (oDivTimediv!=null){ oDivTimediv.style.display = "none"; } </script> <td nowrap id="confirmFlagTd<s:property value="#rowstatus.count" />"> <s:if test="confirmFlag == 0 "> <a href="#" onclick="changeConfirmFlag('${id }','<s:property value="#rowstatus.count" />') ">否</a> </s:if> <s:else>是</s:else> </td> <td nowrap id="confirmFlag<s:property value="#rowstatus.count" />"> 是 </td> <script> var oconfirmFlagDivId = document.getElementById('confirmFlag<s:property value="#rowstatus.count" />'); if (oconfirmFlagDivId!=null){ oconfirmFlagDivId.style.display = "none"; } </script> <td nowrap="nowrap" id="confirmerTd<s:property value="#rowstatus.count" />" > <s:property value="confirmer" /> </td> <td nowrap id="confirmer<s:property value="#rowstatus.count" />"> <div id="confirmerdiv<s:property value="#rowstatus.count" />" /> </td> <script> var oconfirmerDivId = document.getElementById('confirmer<s:property value="#rowstatus.count" />'); var oconfirmerDivdiv = document.getElementById('confirmerdiv<s:property value="#rowstatus.count" />'); if (oconfirmerDivId!=null){ oconfirmerDivId.style.display = "none"; } if(oconfirmerDivdiv != null){ oconfirmerDivdiv.style.display = "none"; } </script> <td nowrap id="confirmTimeTd<s:property value="#rowstatus.count" />"> <s:date name="confirmTime" format="yy-MM-dd HH:mm"/> </td> <td nowrap id="confirmTime<s:property value="#rowstatus.count" />"> <div id="confirmTimediv<s:property value="#rowstatus.count" />" /> </td> <script> var oconfirmTimeid = document.getElementById('confirmTimediv<s:property value="#rowstatus.count" />') ; var oconfirmTimeiddiv = document.getElementById('confirmTime<s:property value="#rowstatus.count" />') ; if(oconfirmTimeid != null){ oconfirmTimeid.style.display="none"; } if(oconfirmTimeiddiv != null){ oconfirmTimeiddiv.style.display="none"; } </script> <td valign="middle" class="common_td_text" nowrap><s:date name="createTime" format="yy-MM-dd HH:mm"/></td> <td nowrap="nowrap"> <s:date name="gatherTime" format="yy-MM-dd HH:mm" /> </td> </tr> </s:iterator> </table> </div> </div> </div> <div class="history-item-title"></div> <table width="100%" height="30"> <tr> <td bgcolor="#FFFFFF"> <%@ include file="/WEB-INF/inc/page.inc"%> </td> </tr> </table> </s:form> <s:if test="btsNumber!=null && !btsNumber.equals('')"> <input type="button" class="button_tt" value="关 闭" onclick="window.close();"/> </s:if> <s:else> <div align="center"> <input type="image" src="${path}/page/wrm/image/export_excel.gif" onclick="doExcel();"> </div> </s:else> <%@ include file="/common/footer.jsp"%>
其中用到了dwr配置:
<convert converter="bean" match="com.iman.nrms.nrmwns.common.domain.BaseCode"/> <create creator="spring" javascript="AnalyseMessageService"> <param name="beanName" value="analyseMessageService"/> <include method="updateAnalyseMessageDealFlag"/> <include method="updateAnalyseMessageConfirmFlag"/> </create>
analyseMessageService:
package com.iman.nrms.nrmwns.wrm.analyse.domain.service; import java.util.List; import com.iman.nrms.nrmwns.wrm.analyse.domain.model.AnalyseMessage; import com.iman.nrms.nrmwns.wrm.analyse.domain.model.AnalyseMessageHistory; public interface AnalyseMessageService { /** * 更改消息处理状态 * * @param analyseMessage * @returnType: void * @author: 李斌 * @data: 2009-10-29 * @time: 下午03:57:20 */ public void updateAnalyseMessageDealFlag(String id,String nowdate,String loginName); /** * 对比分析消息报表 * * @param analyseMessage * @return * @returnType: List<AnalyseMessage> * @author: 李斌 * @data: Oct 16, 2009 * @time: 4:44:52 PM */ public List<AnalyseMessage> createExportAnalyseMessage(AnalyseMessage analyseMessage); /** * 更具 标识属性 修改 确认信息 * * @param id * @returnType: void * @author: * @data: Dec 14, 2009 * @time: 5:29:29 PM */ public void updateAnalyseMessageConfirmFlag(String id,String nowdate,String loginName); }
实现类:
就只在数据库中 更改 数据库中的数据!在Service中调用即可!
最后在啰嗦一点:
在这里:
可以用Action 请求直接实现:但这属于另一种方式 另当别论了!且用Action 刷新页面时 速度较慢(数据量较大时)!;
用这种方式,一共分两步实现:
1.在jsp页面显示出 你要显示的数据,及(处理/确认)状态、人、时间,(这些主要在js函数 那几个display完成这些只是显示并没有存到数据库中!)
2.通过dwr调用后台方法,在Manager中操作数据库(Manager中的数据全是由jsp页面在调用dwr是传给后台的所以数据肯定是一致的),是数据库中数据和页面数据相一致!这样就完成了,局部刷新!(治理的页面事实上欺骗了 浏览者,看到的数据只是暂存页面的数据,当每次翻页或重新请求Action时 才是从数据库中读出的数据)
相关推荐
通过DWR,我们可以使用JavaScript直接调用服务器端的Java方法,实现Ajax(Asynchronous JavaScript and XML)的功能,即在后台与服务器交互数据并局部更新网页。 **Ajax**的核心是利用JavaScript进行异步数据请求,...
DWR(Direct Web Remoting)是一种Java库,它允许JavaScript和Java在浏览器与服务器之间进行双向通信,而Ajax(Asynchronous JavaScript and XML)则是一种通过JavaScript实现异步数据交换和页面更新的技术,无需...
总的来说,DWR通过反向AJAX技术简化了服务器和客户端之间的通信,使得开发实时更新的应用变得更加便捷。通过学习和理解DWR的工作原理以及如何在项目中应用,你可以创建出更加动态、响应式的Web应用程序。
在标题中提到的"DWRtree DWR实现AJAX的一个树形",指的是使用DWR来创建一个基于AJAX的动态树形结构。这种树形结构通常用于网站导航、文件目录展示或者层级数据的交互操作。通过AJAX,用户可以在不刷新整个页面的情况...
2. **创建Java接口和实现**: 定义一个Java接口,包含要暴露给JavaScript的方法,然后实现该接口。 3. **配置DWR Engine**: 在`dwr.xml`配置文件中,声明要暴露的Java类或方法。 4. **生成JavaScript接口**: DWR会...
**Ajax 技术详解** Ajax(Asynchronous JavaScript and XML...而DWR框架则进一步简化了Ajax应用的开发,提供了更便捷的Java和JavaScript交互方式。理解并掌握这些技术,对于提升Java应用的交互性和响应速度至关重要。
DWR(Direct Web Remoting)是一种在Web应用程序中实现异步JavaScript和XML(Ajax)的方法,它简化了客户端和服务器之间的通信,使得动态更新网页变得更加简单。DWR允许JavaScript直接调用Java方法,就像它们在同一...
通过这个实例,我们可以学习到如何利用DWR和AJAX技术实现实时的数据验证,提升Web应用的交互体验。同时,Eclipse作为强大的Java开发工具,能够帮助我们更高效地完成项目开发和调试。理解并掌握这些知识点对于构建...
在“dwr.rar_dwr_dwr ajax_dwr 实现 联动 标签”这个项目中,我们将探讨如何利用DWR和AJAX技术来创建一个动态的、具有联动效果的标签系统。 1. **DWR基础**: DWR的核心组件包括一个服务器端的Servlet(DWR Engine...
### DWR实现Ajax的配置过程 #### 一、概述 Direct Web Remoting (DWR) 是一种简化Ajax应用开发的框架。它允许JavaScript代码直接调用服务器端的Java方法,并处理返回的结果。本文将详细介绍如何在Struts2项目中...
DWR(Direct Web Remoting)是一个开源JavaScript库,它使得在浏览器端可以直接调用服务器端的Java方法,实现了JavaScript与服务器端的双向通信,简化了Ajax应用的开发。 在DWR中,有三个主要的组件: 1. **DWR ...
最后,文章通过一个简单的例子来说明DWR的配置和实现机制。这个例子展示了如何使用DWR来实现无刷新的页面更新。文章为广大Java开发者提供了一种解决AJAX技术应用的方案。 知识点: 1. AJAX技术的核心是JavaScript...
DWR (Direct Web Remoting) 是一个开源Java库,它允许Web应用程序在客户端JavaScript和服务器端Java之间进行异步通信,实现了类似Ajax的功能。在这个小实例中,我们将探讨如何使用DWR来实现实时的文件上传功能,这...
**DWR(Direct Web Remoting)**是一种Java技术,它允许Web应用程序在客户端JavaScript和服务器端Java之间进行直接的远程方法调用(RPC)。DWR简化了Ajax(Asynchronous JavaScript and XML)应用的开发,使得前端...
- **Ajax基础**:DWR是基于Ajax技术的,它提供了一种更简单的方式来实现Ajax功能。 - **扩展Ajax**:DWR不仅支持简单的Ajax请求,还支持复杂的交互模式,如回调、定时更新等。 6. **DWR的社区和资源** - **开源...
这些都离不开DWR、AJAX这样的技术来实现平滑、高效的用户体验。 **压缩包文件内容** "操作步骤.txt"可能包含使用DWR和AJAX实现无刷新技术的详细教程或步骤。"lib"目录可能包含了DWR库和其他必要的依赖文件。"MyDwr...
DWR(Direct Web Remoting)是一种JavaScript库,它允许Web应用程序实现服务器端与客户端之间的实时、双向通信,无需使用复杂的Ajax技术。DWR使得开发者能够像调用本地JavaScript函数一样轻松地调用服务器上的Java...
标题中的“dwr结合jQuery实现Ajax技术”是指在Web开发中使用Direct Web Remoting (DWR) 和 jQuery库来创建异步JavaScript(Ajax)应用程序。DWR是一种Java库,允许JavaScript与服务器端的Java对象进行交互,实现了...
### Ajax技术及其DWR框架实现 #### 一、引言 随着互联网技术的快速发展,Web应用的需求日益增加,用户体验成为了衡量Web应用优劣的重要标准之一。传统的Web应用往往过于注重后端逻辑处理,忽视了前端体验的重要性...
DWR(Direct Web Remoting)是一种Java库,它允许JavaScript在客户端与服务器端进行直接的交互,从而实现Ajax(Asynchronous JavaScript and XML)技术。在本例题中,你将学习如何利用DWR来实现在网页上无刷新的数据...