專利名稱：報表展現方法和裝置的制作方法
技術領域：
本發(fā)明涉及報表數據的展現，具體而言，涉及一種報表展現方法和裝置。
背景技術：
RIA(Rich Interface Applications，富界面應用)技術作為提升用戶體驗的利 器，大規(guī)模應用在SAAS(Software as a Service，軟件即服務)產品中。RIA主要有以下特點在消息確認和格式編排方面提供互動用戶界面；在無刷新 頁面之下提供快捷的界面響應時間；提供通用的用戶界面特性如拖放式(drag and drop) 以及在線和離線操作能力；立即部署、跨平臺、采用逐步下載來檢索內容和數據以及可以充 分利用被廣泛采納的互聯網標準；實時互動的聲音和圖像。目前主流 SAAS 產品主要采用基于 AJAX (AsynchronousJavaScript and XML, 一種 創(chuàng)建交互式網頁應用的網頁開發(fā)技術)和JS0N(JavaScript Object Notation，一種輕量 級的數據交換方式)機制的RIA技術來構建前端界面，AJAX通過XML HTTP Request (可擴 展標記語言超文本傳輸協(xié)議請求)對象發(fā)送請求，服務器返回JS0N格式的數據，通過解析 JS0N的方式生成HTML (HypertextMark-up Language,超文本標記語言)，其性能瓶頸不容 忽視。以財務類SAAS產品為例，用戶在查詢類似明細賬這類大數據量報表時，前臺響應 時間非常長，當數據達到一定規(guī)模后，瀏覽器會長時間停留在無響應狀態(tài)，對用戶來說這是 一個致命的缺陷。傳統(tǒng)分頁固然能解決該問題，但是對于報表這種格式固定的內容來說，分 頁會給用戶帶來糟糕的體驗，更是與Web2. 0所倡導的理念背道而馳，是不可取的。其中，主要問題原因如下1.JS0N解析效率如果后臺返回500行數據，則AJAX取回來的JS0N有600多k，解析起來大概需要 8s。2.布局渲染器渲染效率如果顯示的數據有10列，則前臺需要渲染500*10 = 5000個單元格，頁面的 DOM (Document Object Model，文檔對象模型)元素數量呈數量級上升。對瀏覽器是一個很 大的考驗。因此，需要一種新型的報表展現方式，能夠解決上述的響應時間過長的問題，不影 響用戶的使用。

發(fā)明內容
本發(fā)明所要解決的技術問題在于，提供一種新型的報表展現方式，解決JS0N解析 效率和布局渲染器渲染效率帶來的響應時間時間過長的問題，以滿足用戶的使用。有鑒于此，本發(fā)明公開了一種報表展現方法，包括步驟102，設置每次讀取的數 據行的緩存行數；步驟104，監(jiān)聽滾動條按鈕的移動；步驟106，在所述滾動條按鈕移動，使已讀取的數據行全部用于在視窗中顯示時，讀取數量為所述緩存行數的數據行以用于在所 述視窗中顯示，直至未讀取數據行的行數小于所述緩存行數時，則讀取所述未讀取數據行。在上述技術方案中，優(yōu)選地，在所述步驟106中當前位于所述視窗的第一行的數 據行的行索引值加上所述視窗的可視行數大于所述緩存行數時，讀取數量為所述緩存行數 的數據行并在所述視窗中顯示，其中，在每次讀取一定量的數據行時為每個數據行分配對 應其讀取順序的行索引值。在上述技術方案中，優(yōu)選地，還包括步驟108，在對所述表單查詢時，如果查詢得 到的數據行的數量大于或等于所述緩存行數時，讀取數量為所述緩存行數的數據行并在所 述視窗中顯示，如果所述查詢得到的數據行的數量小于所述緩存行數，則讀取所有所述查 詢得到的數據行。在上述技術方案中，優(yōu)選地，所述緩存行數大于或等于所述視窗的可視行數。在上述技術方案中，優(yōu)選地，所述步驟104包括監(jiān)聽所述滾動條按鈕的鼠標點擊 事件和鼠標滾軸事件。本發(fā)明還公開了一種報表展現裝置，包括設置單元，用于設置讀取單元每次讀取 的數據行的緩存行數；監(jiān)聽單元，用于監(jiān)聽滾動條按鈕的移動；所述讀取單元，用于在所述 監(jiān)聽模塊監(jiān)聽到所述滾動條按鈕移動，使已讀取的數據行全部用于在視窗中顯示時，讀取 數量為所述緩存行數的數據行以用于在所述視窗中顯示，直至未讀取數據行的行數小于所 述緩存行數時，則讀取所述未讀取數據行。在上述技術方案中，優(yōu)選地，所述讀取單元用于在所述監(jiān)聽模塊監(jiān)聽到當前位于 所述視窗的第一行的數據行的行索引值加上所述視窗的可視行數大于所述緩存行數時，讀 取數量為所述緩存行數的數據行并在所述視窗中顯示，其中，所述讀取單元在每次讀取一 定量的數據行時，為每個數據行分配對應其讀取順序的行索引值。在上述技術方案中，優(yōu)選地，所述讀取單元還用于在對所述表單查詢時，如果查詢 得到的數據行的數量大于或等于所述緩存行數時，讀取數量為所述緩存行數的數據行并在 所述視窗中顯示，如果所述查詢得到的數據行的數量小于所述緩存行數，所述讀取單元則 讀取所有所述查詢得到的數據行。在上述技術方案中，優(yōu)選地，所述緩存行數大于或等于所述視窗的可視行數。在上述技術方案中，優(yōu)選地，所述監(jiān)聽單元監(jiān)聽所述滾動條按鈕的鼠標點擊事件 和鼠標滾軸事件。通過上述技術方案，可以實現一種報表展現方法和裝置，能夠通過數據緩存的方 式進行分頁，且用戶察覺不到分頁的存在，并不影響其使用。


圖1是根據本發(fā)明的報表展現方法的流程圖；圖2是根據本發(fā)明的報表展現裝置的框圖；圖3是根據本發(fā)明的一個實施例的報表展現方法的流程示意圖；圖4是根據本發(fā)明的一個實施例的報表展現裝置的截屏示意圖。
具體實施例方式以下將參考附圖詳細描述根據本發(fā)明的實施例。圖1是根據本發(fā)明的報表展現方法的流程圖。如圖1所示，本發(fā)明提供了一種報表展現方法，包括步驟102，設置每次讀取的數 據行的緩存行數；步驟104，監(jiān)聽滾動條按鈕的移動；步驟106，在所述滾動條按鈕移動，使 已讀取的數據行全部用于在視窗中顯示時，讀取數量為所述緩存行數的數據行以用于在所 述視窗中顯示，直至未讀取數據行的行數小于所述緩存行數時，則讀取所述未讀取數據行。在上述技術方案中，在所述步驟106中當前位于所述視窗的第一行的數據行的 行索引值加上所述視窗的可視行數大于所述緩存行數時，讀取數量為所述緩存行數的數據 行并在所述視窗中顯示，其中，在每次讀取一定量的數據行時為每個數據行分配對應其讀 取順序的行索引值。在上述技術方案中，還包括步驟108，在對所述表單查詢時，如果查詢得到的數 據行的數量大于或等于所述緩存行數時，讀取數量為所述緩存行數的數據行并在所述視窗 中顯示，如果所述查詢得到的數據行的數量小于所述緩存行數，則讀取所有所述查詢得到 的數據行。在上述技術方案中，所述緩存行數大于或等于所述視窗的可視行數。在上述技術方案中，所述步驟104包括監(jiān)聽所述滾動條按鈕的鼠標點擊事件和 鼠標滾軸事件。圖2是根據本發(fā)明的報表展現裝置的框圖。如圖2所示，本發(fā)明還提供了一種報表展現裝置，包括設置單元202，用于設置讀 取單元206每次讀取的數據行的緩存行數；監(jiān)聽單元204，用于監(jiān)聽滾動條按鈕的移動；所 述讀取單元206，用于在所述監(jiān)聽模塊監(jiān)聽到所述滾動條按鈕移動，使已讀取的數據行全部 用于在視窗中顯示時，讀取數量為所述緩存行數的數據行以用于在所述視窗中顯示，直至 未讀取數據行的行數小于所述緩存行數時，則讀取所述未讀取數據行。在上述技術方案中，所述讀取單元206用于在所述監(jiān)聽模塊監(jiān)聽到當前位于所述 視窗的第一行的數據行的行索引值加上所述視窗的可視行數大于所述緩存行數時，讀取數 量為所述緩存行數的數據行并在所述視窗中顯示，其中，所述讀取單元206在每次讀取一 定量的數據行時，為每個數據行分配對應其讀取順序的行索引值。在上述技術方案中，所述讀取單元206還用于在對所述表單查詢時，如果查詢得 到的數據行的數量大于或等于所述緩存行數時，讀取數量為所述緩存行數的數據行并在所 述視窗中顯示，如果所述查詢得到的數據行的數量小于所述緩存行數，所述讀取單元206 則讀取所有所述查詢得到的數據行。在上述技術方案中，所述緩存行數大于或等于所述視窗的可視行數。在上述技術方案中，所述監(jiān)聽單元204監(jiān)聽所述滾動條按鈕的鼠標點擊事件和鼠 標滾軸事件。圖3是根據本發(fā)明的一個實施例的報表展現方法的流程示意圖。本實施例中采用的解決方案利用AJAX特性進行數據緩沖，分批從服務器獲取數 據。技術原理在傳統(tǒng)分頁方式中，需要用戶點擊頁面上的顯式分頁按鈕來進行分頁，這種 方式是用戶最能夠接受的分頁方式。但財務報表的數據行之間是有連續(xù)性和關聯性的，如
5果采用這種分頁方式，無疑會給用戶帶來糟糕的用戶體驗。而采用這種改進后的分頁方式 后會在用戶不察覺的情況下進行分頁，我們只需要捕捉用戶的鼠標滾動操作，最常見的方 式就是監(jiān)聽用戶的滾動條動作或是鼠標懸停動作。本解決方案中包含以下幾個重要概念bufferSize 每次緩沖的結果集數量，對應于傳統(tǒng)分頁里的每頁結果集數量； hdHeight 列表header的高度，用于計算滾動條滾動按鈕插入點所在高度；rowHeight 數 據行高度，必須保證這個高度是不變的，在計算何時觸發(fā)分頁操作時此高度非常重要，通 過其與hdHeight可以得到視窗中可視數據行的數量以及位置，即可得到visbleRows和 rowlndex ；visibleRows 當前瀏覽器視窗范圍內可見的數據行數；rowlndex 處于可視范 圍內第一行的數據的行索引值。如圖3所示，整個技術方案的流程如下步驟302，根據產品的實際需要和前端的展現方式，設置前端報表展現每次緩沖的 結果集大小(bufferSize)，這個數值不應該小于瀏覽器視窗能夠容納的結果集行數。例 如一個報表顯示列表每一行的顯示高度是16px，目前顯示器的主流分辨率應該是19’的 1240*1024，這時 bufferSize 合適的值應該是 10*1024/16 = 640。步驟304，用戶執(zhí)行查詢操作。步驟306，監(jiān)聽滾動條按鈕的鼠標事件及鼠標滾軸事件，要能精確判斷鼠標滾動的 方向(向上，向下)和當前可視范圍內結果集的狀態(tài)變化(visibleRows，rowlndex等值的 變化)。當用戶單擊查詢按鈕時，并不是查詢所有結果集，而是取得bufferSize數量的結果 集展現到前臺。這樣，前臺解析并渲染的數據集合數量大幅減少，給用戶的體驗是查詢的時 間明顯變少。在此本領域的技術人員應該理解，同樣可以監(jiān)聽鍵盤或其他滾輪之類的裝置 使?jié)L動條按鈕的上下滾動。步驟308，緩沖完畢后，用于展現的結果集在視窗中顯示。其后，當用戶拖動滾動條按鈕時，程序后臺調用事件處理方法來記錄和跟蹤前臺 頁面可視范圍內結果集的狀態(tài)變化，當rowIndex+visibleRows > bufferSize時，通過AJAX 請求服務器再次緩沖數據，前臺提示用戶進行等待。用戶繼續(xù)滾動滾動條進行報表的查看， 當出現上述情況時再次請求服務器進行數據緩沖。圖4是根據本發(fā)明的一個實施例的報表展現裝置的截屏示意圖。如圖4所示，明細賬查詢中，用戶往往有這樣的需求，就是在年底，需要將所有科 目的明細賬全部打印出來并裝訂成冊。保守估計假設用戶在一年里總共使用了 100個科 目，每個科目平均生成憑證50張，且每個科目每月需要生產本年期初，本月期初，本月合計 這3行額外的記錄，則此查詢界面總共需要展現100* (50+12*3) = 8600行數據。如果設置 此查詢的bufferSize為500，則每次查詢只需要展現500行數據，當用戶在拖動滾動條按鈕 時，前臺會記錄這500條數據的狀態(tài)，當剩余數據不足以進行連續(xù)顯示時，后臺便會請求服 務器重新進行緩沖，去加載接下來的500條數據，這樣不斷的循環(huán)，用戶查看完該報表的全 部數據總共需要緩沖的次數為8600/500 = 17. 2次。綜上所述，根據本發(fā)明的技術方案實現的報表展現方法和裝置，相比當前技術，使 得瀏覽器的響應時間更快，并且使用戶感覺不到分頁的存在，不影響用戶的使用。以上所述僅為本發(fā)明的優(yōu)選實施例而已，并不用于限制本發(fā)明，對于本領域的技術人員來說，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內，所作的任何修 改、等同替換、改進等，均應包含在本發(fā)明的保護范圍之內。
權利要求
一種報表展現方法，其特征在于，包括步驟102，設置每次讀取的數據行的緩存行數；步驟104，監(jiān)聽滾動條按鈕的移動；步驟106，在所述滾動條按鈕移動，使已讀取的數據行全部用于在視窗中顯示時，讀取數量為所述緩存行數的數據行以用于在所述視窗中顯示，直至未讀取數據行的行數小于所述緩存行數時，則讀取所述未讀取數據行。
2.根據權利要求1所述的報表展現方法，其特征在于，在所述步驟106中當前位于所述視窗的第一行的數據行的行索引值加上所述視窗的可視行數大于所述 緩存行數時，讀取數量為所述緩存行數的數據行并在所述視窗中顯示，其中，在每次讀取一定量的數據行時為每個數據行分配對應其讀取順序的行索引值。
3.根據權利要求1所述的報表展現方法，其特征在于，還包括步驟108，在對所述表單查詢時，如果查詢得到的數據行的數量大于或等于所述緩存行 數時，讀取數量為所述緩存行數的數據行并在所述視窗中顯示，如果所述查詢得到的數據 行的數量小于所述緩存行數，則讀取所有所述查詢得到的數據行。
4.根據權利要求1所述的報表展現方法，其特征在于，所述緩存行數大于或等于所述 視窗的可視行數。
5.根據權利要求1至4任一項所述的報表展現方法，其特征在于，所述步驟104包括監(jiān)聽所述滾動條按鈕的鼠標點擊事件和鼠標滾軸事件。
6.一種報表展現裝置，其特征在于，包括設置單元，用于設置讀取單元每次讀取的數據行的緩存行數；監(jiān)聽單元，用于監(jiān)聽滾動條按鈕的移動；所述讀取單元，用于在所述監(jiān)聽模塊監(jiān)聽到所述滾動條按鈕移動，使已讀取的數據行 全部用于在視窗中顯示時，讀取數量為所述緩存行數的數據行以用于在所述視窗中顯示， 直至未讀取數據行的行數小于所述緩存行數時，則讀取所述未讀取數據行。
7.根據權利要求6所述的報表展現裝置，其特征在于，所述讀取單元用于在所述監(jiān)聽 模塊監(jiān)聽到當前位于所述視窗的第一行的數據行的行索引值加上所述視窗的可視行數大 于所述緩存行數時，讀取數量為所述緩存行數的數據行并在所述視窗中顯示，其中，所述讀取單元在每次讀取一定量的數據行時，為每個數據行分配對應其讀取順 序的行索引值。
8.根據權利要求6所述的報表展現裝置，其特征在于，所述讀取單元還用于在對所述 表單查詢時，如果查詢得到的數據行的數量大于或等于所述緩存行數時，讀取數量為所述 緩存行數的數據行并在所述視窗中顯示，如果所述查詢得到的數據行的數量小于所述緩存 行數，所述讀取單元則讀取所有所述查詢得到的數據行。
9.根據權利要求6所述的報表展現裝置，其特征在于，所述緩存行數大于或等于所述 視窗的可視行數。
10.根據權利要求6至9中任一項所述的報表展現裝置，其特征在于，所述監(jiān)聽單元監(jiān) 聽所述滾動條按鈕的鼠標點擊事件和鼠標滾軸事件。
全文摘要
本發(fā)明公開了一種報表展現方法，包括步驟102，設置每次讀取的數據行的緩存行數；步驟104，監(jiān)聽滾動條按鈕的移動；步驟106，在滾動條按鈕移動，使已讀取的數據行全部用于在視窗中顯示時，讀取數量為緩存行數的數據行以用于在視窗中顯示，直至未讀取數據行的行數小于緩存行數時，則讀取未讀取數據行。本發(fā)明還提供了一種報表展現裝置。根據本發(fā)明的技術方案，可以在用戶不察覺的情況下實現分頁，緩解了瀏覽器視窗的壓力，同時不影響用戶的使用。
文檔編號G06F17/30GK101876971SQ201010215988
公開日2010年11月3日 申請日期2010年6月22日 優(yōu)先權日2010年6月22日
發(fā)明者李慶 申請人:北京偉庫電子商務科技有限公司