進行查詢的情況下,顯示友好的等待效果可以讓使用者更好的了解目前的狀态以及減少使用者消極的等待,例如下圖所示。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5iM0MDM1ITNzcTMtAzM0YDN2QjNxIDM2AjNxAjMtYjN5ATM58CX2AjNxAjMvwlN2kDMxkzLcd2bsJ2Lc12bj5ycn9Gbi52YuUTMwIzcldWYtl2Lc9CX6MHc0RHaiojIsJye.png)
VF提供了<apex:actionStatus>标簽,,此标簽用于顯示一個AJAX請求更新的狀态。一個AJAX請求狀态可以顯示為進展或完成。
實作上述效果的主要步驟如下:
1.建立一個Component:StatusSpinner.component
其中需要在salesforce中上傳一個靜态資源,顯示loading的gif圖檔,有需要的可以進行下載下傳:https://files.cnblogs.com/files/zero-zyq/loading.gif
1 <apex:component >
2
3 <apex:attribute name="Message"
4 type="String"
5 description="Messaging show in loading status spinner"
6 default="Loading..."/>
7
8 <apex:actionStatus id="LoadingStatusSpinner">
9 <apex:facet name="start">
10 <div id="loadingDiv" class="loadingDiv" >
11 <span id="loadingHolder" class="loadingHolder">
12 <img class="loadingImage" title="Loading..." alt="Loading..." src="/img/loading.gif"/>
13 <span class="loadingDescription">{!message}</span>
14 </span>
15 </div>
16 </apex:facet>
17 </apex:actionStatus>
18
19 <style>
20 .loadingImage { vertical-align:bottom; }.loadingDescription { padding:0 1.5em 0 0.5em; }
21 .loadingHolder {
22 background-color: #FFFFCC;
23 border: 1px solid #333333;
24 font-size: 1.2em;
25 font-weight: bold;
26 padding: 0.5em;
27 position: relative;
28 top: 45%;
29 white-space: nowrap;
30 }
31 .loadingDiv {
32 background-color: lightgrey;
33 opacity: .75;
34 filter: alpha(opacity=75); /* IE's opacity*/
35 text-align: center;
36 width: 100%;
37 height: 100%;
38 position: fixed;
39 z-index: 300;
40 top: 0;
41 left: 0;
42 }
43
44 </style>
45
46 </apex:component>
2.建立GoodsController
1 public with sharing class GoodsController {
2
3 public List<GOODS__c> goodsList{get;set;}
4
5 //public GOODS__c goods{get;set;}
6
7 public String goodsName{get;set;}
8 public Decimal goodsPriceStart{get;set;}
9 public Decimal goodsPriceEnd{get;set;}
10
11 public String goodsDescribe{get;set;}
12 public GoodsController() {
13 goodsList = new List<GOODS__c>();
14 refreshData();
15 }
16 //重新整理資料作用
17 public void refreshData() {
18 Boolean isStatus = true;
19 String goodsQueryString = 'SELECT GoodsBrand__c,'+
20 'GoodsDescribe__c,GoodsName__c, GoodsPrice__c,'+
21 ' Id FROM Goods__c where IsDeleted = false limit 100';
22 goodsList = Database.query(goodsQueryString);
23 }
24
25 public void query() {
26 String goodsSql = 'SELECT GoodsBrand__c,'+
27 'GoodsDescribe__c,GoodsName__c , GoodsPrice__c,'+
28 ' Id FROM GOODS__c where IsDeleted = false ';
29 if(goodsName.length() >0) {
30 goodsName = '%' + goodsName + '%';
31 goodsSql += ' and GoodsName__c like :goodsName ';
32 }
33 if(goodsDescribe.length() > 0) {
34 goodsDescribe = '%' + goodsDescribe + '%';
35 goodsSql += ' and GoodsDescribe__c like :goodsDescribe';
36 }
37
38 if(String.valueOf(goodsPriceStart).length()>0) {
39 goodsSql += ' and GoodsPrice__c >= :goodsPriceStart';
40 }
41 if(String.valueOf(goodsPriceEnd).length()>0) {
42 goodsSql += ' and GoodsPrice__c <= :goodsPriceEnd';
43 }
44 goodsSql += ' limit 100';
45 goodsList = Database.query(goodsSql);
46 goodsName = goodsName.remove('%');
47 goodsDescribe = goodsDescribe.remove('%');
48 }
49 }
3.建立GoodsListPage:頁面中将Component引入進來,然後在apex:commandButton标簽上綁定action,設定status值,status值為apex:actionStatus的Id,設定reRender為table的Id,以便查詢後重新渲染table清單。
1 <apex:page controller="GoodsController" showHeader="false">
2
3 <c:StatusSpinner />
4 <apex:messages />
5 <apex:form >
6 <apex:pageBlock title="GOODS" id="page">
7 <apex:pageBlockSection title="query goods">
8 <apex:inputText value="{!goodsName}" label="goodsName"
9 id="goodsName" />
10 <apex:inputText value="{!goodsPriceStart}"
11 label="goodsPriceStart" />
12 <apex:inputText value="{!goodsPriceEnd}"
13 label="goodsPriceEnd" />
14 <apex:inputText value="{!goodsDescribe}"
15 label="goodsDescribe" />
16 <apex:commandButton value="query" action="{!query}" status="LoadingStatusSpinner" reRender="resultGoods"/>
17 </apex:pageBlockSection>
18
19 <apex:pageBlockTable value="{!goodsList}" var="goods" id="resultGoods">
20 <apex:column headervalue="goodsName">
21 <apex:outputField value="{!goods.GoodsName__c}"/>
22 </apex:column>
23 <apex:column headervalue="goodsPrice">
24 <apex:outputField value="{!goods.GoodsPrice__c}" />
25 </apex:column>
26 <apex:column headervalue="goodsDescribe">
27 <apex:outputField value="{!goods.GoodsDescribe__c}" />
28 </apex:column>
29 </apex:pageBlockTable>
30 </apex:pageBlock>
31 </apex:form>
32 </apex:page>
通過以上三個步驟,便可以實作查詢顯示等待效果。
總結:apex:actionStatus可以相對較好的顯示等待(loading)效果,不過相關限制較多,需要相關commandButton等标簽提供reRender屬性。比如不能在inputFile中使用此标簽因為inputFile的頁面不能reRender,如果類似上面demo中簡單的查詢或者ajax請求進行查詢可以使用此種方式,如果存在inputFile的頁面,慎用。
作者:zero
部落格位址:http://www.cnblogs.com/zero-zyq/
本文歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接
個人下載下傳了一些相關學習的PDF檔案,如果需要下載下傳請通路百度雲 點選此處通路 密碼:jhuy
如果文章的内容對你有幫助,歡迎點贊~
為友善手機端檢視部落格,現正在将部落格遷移至微信公衆号:Salesforce零基礎學習,歡迎各位關注。