需求背景：為了介面的友好性，我們會希望在呼叫報表的時候能夠出現一個進度條，然後再展現報表，這樣在使用者等待的時候介面不至於空白，也使介面看起來互動性更好，下面就介紹一種進度條的實現方法。

實現思路：有一種比較好的已經被封裝成 js 控制元件的頁面進度條叫做 ShowProcessBar，在呼叫報表的時候先觸發這個 js，顯示進度條，然後呼叫展現報表的 jsp 去展報表。

實現方法：

在一張靜態的 html 中寫一個按鈕，點選這個按鈕時先去呼叫進度條的 js，然後再去呼叫展現報表的 jsp 檔案去展現報表。

Html 檔案的程式碼如下：

<HTML>
<HEAD>
<script language="javascript" src="ShowProcessBar.js"></script>
</HEAD>
<BODY>
<BR>
<form action="1.jsp">
<input type="submit" value="進度條" IsShowProcessBar="True">
</form>
  
</BODY>
</HTML>

上面的程式碼中 IsShowProcessBar="True" 用來控制進度條的展現。

點選按鈕後先顯示進度條然後呼叫 1.jsp，這張 jsp 就是一張展現報表的普通的 jsp，不需要特殊設定。

將 js 控制元件，上面的靜態 html 檔案和 1.jsp 檔案放到同一個資料夾下，這裡都放到了 jsp 資料夾下。

訪問上面靜態的 html 檔案，可以看到如下進度條的效果：

進度條展現完後就會出現展現報表的頁面，如下圖所示：

這樣就實現了在展現報表之前先用進度條提示，在進度條過後展現報表的需求了。

潤乾報表中進度條的一種實現方式

相關文章