筆者在最近的項目中采用的是Jsf(myfaces+richfaces+Ajax4Jsf)+Spring+Hibernate技術,由于數據量大,系統反應時間為1.5~2秒,此時需要有提示的標記比如"正在理..."等。Ajax4Jsf中的"onsubmit"為提交表單時發生的動作,"oncomplete"為提交到服務器端處理完返回到客戶端時執行的動作,這兩者的時間差就是我們等待的時間。我們也就是要在這個時間段內顯示標記。對于<t:commandButton/>或<t:commandLink /> 等可以用"onclick""ondblclick"等與"oncomplete"組合靈活應用。以下是簡例片段:
1 <!-- 執行的js方法 -->
2 <script type="text/javascript">
3 function beforeChange() {
4 var obj = document.getElementById('myForm:waitingGif');
5 obj.style.display='block';
6 }
7 function afterChange() {
8 var obj = document.getElementById('myForm:waitingGif');
9 obj.style.display='none';
10 }
11 </script>
12 <!-- 應用 -->
13 <t:panelGrid columns="3" id="listGrid" forceId="true">
14 <t:selectOneRadio value="#{myBean.selectItem}">
15 <a4j:support event="onclick"
16 actionListener="#{myBean.selectItemChange}"
17 reRender="listGrid" onsubmit="beforeChange()"
18 oncomplete="afterChange()" />
19 <f:selectItem itemLabel="上月" itemValue="4" />
20 <f:selectItem itemLabel="本月" itemValue="3" />
21 <f:selectItem itemLabel="上周" itemValue="2" />
22 <f:selectItem itemLabel="本周" itemValue="1" />
23 </t:selectOneRadio>
24 <h:graphicImage id="waitingGif" value="/images/waiting.gif" style="display:none" />
25 </t:panelGrid>
運行時的顯示效果:

其實Ajax4Jsf也有對此效果的支持:
1 <a4j:status startText="正在處理 " startStyle="font-size: 10pt;color:red;"/>
頁面上運用<a4j:status />后所有提交到后臺的動作都可以被跟蹤標記,但要保證<a4j:status />在此動作的刷新區域。
|