基于grid組件的列表數據展現方法及系統的制作方法【專利摘要】本發明提出了一種基于GRID組件的列表數據展現方法及系統，所述方法包括以下步驟：步驟S1：后臺對所述列表數據進行封裝其交互方式及格式，得到預設標準樣式的封裝數據；步驟S2：前臺將各類參數設置和業務控制抽取共性并封裝；步驟S3：后臺從數據庫中獲取所需的列表數據，轉換成GRID組件能識別的數據格式，然后將返回到前臺；步驟S4：前臺根據所述JSP自定義標簽將列表數據加載到所述GRID組件中，所述GRID組件按照所述預設標準樣式自動展示所述列表數據。本發明基于GRID組件的列表數據展現方法及系統實現了低代碼、低技術含量、高效率、高擴展行、較佳用戶體驗及擴展性強的列表數據展現方法及系統。【專利說明】基于GRID組件的列表數據展現方法及系統【
技術領域：
】[0001]本發明涉及計算機【
技術領域：
】，特別涉及一種基于GRID組件的列表數據展現方法及系統。【
背景技術：
】[0002]在軟件設計開發中，經常需要在前臺進行列表數據展示。現有技術中大多采用后臺封裝數據成List或其它數組類型數據傳入到前臺，再在前臺頁面中對數組類型數據進行遍歷，將數據填充到table、div等Html表格中展示出來。[0003]上述方法在實際應用中存在很多明顯不足的地方:[0004]1、代碼量大，數據層數處理過多，需要傳輸的數據量太大，造成顯示緩慢且容易出錯，不利于維護；[0005]2、開發效率低下，無法實現代碼的重用。后臺的查詢和頁面的遍歷都已經寫死，無法在其他模塊或項目中重復使用，增加了工作量；[0006]3、開發人員技術要求高，開發人員需要對MVC或系統設計有足夠的了解，需要關注的地方較多；[0007]4、風格樣式難以控制、用戶體驗不友好、擴展性太差。每個列表的開發，都需要開發人員單個處理，無法做到統一控制，而且用戶體驗及擴展性太差。【
發明內容】[0008]本發明的目的是提出一種基于GRID組件的列表數據展現方法，能解決列表數據展現的代碼量大、開發效率低下及用戶體驗及擴展性差的問題。[0009]為達到上述目的，本發明提出了一種基于GRID組件的列表數據展現方法，包括以下步驟:[0010]步驟S1:后臺接到前臺的列表數據展現命令后，通過JS及CSS模塊對所述列表數據進行封裝，并通過AJAX模塊對所述列表數據進一步封裝其交互方式及格式，得到預設標準樣式的封裝數據；[0011]步驟S2:前臺中設定JSP自定義標簽，通過該JSP自定義標簽將各類參數設置和業務控制抽取共性并封裝；[0012]步驟S3:后臺從數據庫中獲取所需的列表數據，通過OR-Mapping機制將所述需要展示的列表數據轉換成GRID組件能識別的數據格式，然后將轉換好的數據同樣通過AJAX方式返回到前臺；[0013]步驟S4:前臺根據所述JSP自定義標簽將列表數據加載到所述GRID組件中，所述GRID組件根據OR-Mapping數據對應關系，按照所述預設標準樣式自動展示所述列表數據。[0014]進一步，在上述基于GRID組件的列表數據展現方法中，所述步驟SI具體包括:[0015]后臺接到前臺的列表數據展現命令后，通過JS模塊對所述命令轉換成鍵值對格式的JSON數據并根據自定義和CSS模塊的樣式進行封裝，并通過AJAX模塊對所述命令進一步封裝其交互方式及格式，并將其提交到后臺。[0016]進一步，在上述基于GRID組件的列表數據展現方法中，所述步驟S2具體包括:[0017]前臺中在頁面上采用類似HTML語言的方式設定JSP自定義標簽，通過該JSP自定義標簽將各類參數設置和業務控制抽取包括樣式、寬度、字體大小、格式的數據共性特性并封裝成公用的JAVA和JS代碼，最終以HTML網頁格式展示。[0018]進一步，在上述基于GRID組件的列表數據展現方法中，所述步驟S3中后臺從數據庫中獲取所需的列表數據的步驟具體包括:[0019]后臺通過異步方式從數據庫中獲取所需的列表數據。[0020]進一步，在上述基于GRID組件的列表數據展現方法中，所述步驟S3中通過OR-Mapping機制將所述需要展示的列表數據轉換成GRID組件能識別的數據格式的步驟具體包括:[0021]后臺通過OR-Mapping機制將所述列表數據與實例對應起來，并通過調用公用類將轉換成GRID組件能識別的數據格式。[0022]進一步，在上述基于GRID組件的列表數據展現方法中，所述步驟S4之后還包括:通過異步CDUQ模塊對所述列表數據進行增、刪或改、查。[0023]本發明還提供一種基于GRID組件的列表數據展現系統，所述系統包括:后臺及前臺，所述后臺中設有JS及CSS模塊、AJAX模塊及GRID組件轉化模塊，所述前臺中設有JSP標簽模塊、GRID組件加載模塊及列表數據展示模塊；[0024]所述JS及CSS模塊用于對所述列表數據進行封裝，所述AJAX模塊連接于JS及CSS模塊，用于對所述列表數據進一步封裝其交互方式及格式，得到預設標準樣式的封裝數據。所述GRID組件轉化模塊用于通過OR-Mapping機制將從數據庫中獲取所需的列表數據轉換成所需數據格式的GRID組件。[0025]所述JSP標簽模塊用于設定JSP自定義標簽，通過該JSP自定義標簽將各類參數設置和業務控制抽取共性并封裝。[0026]所述GRID組件加載模塊連接于所述JSP標簽模塊，用于根據所述JSP自定義標簽將列表數據加載到所述GRID組件中；所述列表數據展示模塊連接于所述GRID組件加載模塊，用于根據OR-Mapping數據對應關系，按照所述預設標準樣式自動展示所述列表數據。[0027]進一步，在上述基于GRID組件的列表數據展現系統中，所述前臺還包括異步⑶UQ模塊，用于對所述列表數據進行增、刪或改、查。[0028]本發明基于GRID組件的列表數據展現方法及系統利用JS+CSS+AJAX封裝前臺數據顯示和交互方式，利用JSP標簽封裝業務邏輯和數據控制，通過靈活的各類參數設置實現各類基礎和高級應用，實現了異步刷新列表數據和頁面統一布局，實現了低代碼、低技術含量、高效率、高擴展行、較佳用戶體驗及擴展性強的列表數據展現方法及系統。【專利附圖】【附圖說明】[0029]圖1為本發明基于GRID組件的列表數據展現方法一實施例的結構示意圖；[0030]圖2為本發明基于GRID組件的列表數據展現方法另一實施例的結構示意圖。【具體實施方式】[0031]下面結合附圖詳細說明本發明的優選實施例。[0032]本發明基于GRID組件的列表數據展現方法通過JS+CSS+AJAX技術來處理數據展示和傳輸，實現了異步刷新列表數據和頁面統一布局，實現了代碼的重用性，減少和優化了代碼程序，使開發工作更加簡潔、快速和高效，提升了用戶體驗及列表數據展現的擴展性倉泛。[0033]請參閱圖1，本發明基于GRID組件的列表數據展現方法包括以下步驟:[0034]步驟S1:后臺接到前臺的列表數據展現命令后，通過JS及CSS模塊對所述列表數據進行封裝，并通過AJAX模塊對所述列表數據進一步封裝其交互方式及格式，得到預設標準樣式的封裝數據；[0035]步驟S2:前臺中設定JSP自定義標簽，通過該JSP自定義標簽將各類參數設置和業務控制抽取共性并封裝；[0036]步驟S3:后臺從數據庫中獲取所需的列表數據，通過OR-Mapping(對象關系映射)機制將所述需要展示的列表數據轉換成GRID組件能識別的數據格式(JS0N格式)，然后將轉換好的數據同樣通過AJAX方式返回到前臺；[0037]步驟S4:前臺根據所述JSP自定義標簽將列表數據加載到所述GRID組件中，所述GRID組件根據OR-Mapping(對象關系映射)數據對應關系，按照所述預設標準樣式自動展示所述列表數據。例如A行A列數據對應哪個單元格，樣式是如何等等。[0038]其中,所述步驟SI具體包括:[0039]后臺接到前臺的列表數據展現命令后，通過JS模塊對所述命令轉換成鍵值對格式的JSON數據并根據自定義和CSS模塊的樣式進行封裝，并通過AJAX模塊對所述命令進一步封裝其交互方式及格式，并將其提交到后臺。[0040]所述步驟S2具體包括:[0041]前臺中在頁面上采用類似HTML語言的方式設定JSP自定義標簽，通過該JSP自定義標簽將各類參數設置和業務控制抽取包括樣式、寬度、字體大小、格式的數據共性特性并封裝成公用的JAVA和JS代碼，最終以HTML網頁格式展示。[0042]所述步驟S3中后臺從數據庫中獲取所需的列表數據的步驟具體包括:[0043]后臺通過AJAX異步方式從數據庫中獲取所需的列表數據。所謂異步方式是指在不刷新頁面或局部刷新頁面的情況下，動態地向后臺傳輸和獲取數據，最終將新數據展示在頁面上的方式。[0044]所述步驟S3中通過OR-Mapping機制將所述需要展示的列表數據轉換成GRID能識別的數據格式的步驟具體包括:[0045]后臺通過OR-Mapping機制將所述列表數據與實例對應起來，并通過調用公用類將轉換成GRID組件能識別的數據格式。[0046]所述步驟S4之后還包括:通過異步CDUQ模塊對所述列表數據進行增、刪或改、查。所述異步⑶UQ包括:Create:增加、Delete:刪除、Update:修改及Query:查詢。[0047]請參閱圖2，本發明還提供一種基于GRID組件的列表數據展現系統，所述系統包括:后臺I及前臺2，所述后臺I中設有JS及CSS模塊10、AJAX模塊12及GRID組件轉化模塊14，所述前臺2中設有JSP標簽模塊20、GRID組件加載模塊22及列表數據展示模塊24；[0048]所述JS及CSS模塊10用于對所述列表數據進行封裝，所述AJAX模塊12連接于JS及CSS模塊10，用于對所述列表數據進一步封裝其交互方式及格式，得到預設標準樣式的封裝數據。所述GRID組件轉化模塊14用于通過OR-Mapping機制將從數據庫中獲取所需的列表數據轉換成所需數據格式的GRID組件。[0049]所述JSP標簽模塊20用于設定JSP自定義標簽，通過該JSP自定義標簽將各類參數設置和業務控制抽取共性并封裝。[0050]所述GRID組件加載模塊22連接于所述JSP標簽模塊20，用于根據所述JSP自定義標簽將列表數據加載到所述GRID組件中；所述列表數據展示模塊24連接于所述GRID組件加載模塊22，用于根據OR-Mapping數據對應關系，按照所述預設標準樣式自動展示所述列表數據。[0051]其中，所述前臺2還包括異步⑶UQ模塊26，用于對所述列表數據進行增、刪或改、查。[0052]相比于現有技術，本發明一種基于GRID組件的列表數據展現方法及系統具有如下有益效果:[0053](I)采用了JS+C2SS+AJAX技術來處理數據展示和傳輸，實現了異步刷新和頁面統一布局，完美解決系統樣式風格問題，最大程度地增強了用戶體驗效果，增加客戶滿意度。[0054](2)通過JSP標簽封裝業務邏輯處理，實現了代碼的重用性，減少和優化了代碼程序，使開發工作更加簡潔、快速和高效。[0055](3)組件化開發，可靈活調用，支持熱插拔式的調用模式。可自定義樣式風格，可動態添加導出、編輯、刪除等高級應用[0056](4)統一的開發模式、傻瓜式的復制粘貼，將開發的技術含量與工作量降至最低，為項目和公司節約成本。[0057]綜上，本發明基于GRID組件的列表數據展現方法及系統利用JS+CSS+AJAX封裝前臺數據顯示和交互方式，利用JSP標簽封裝業務邏輯和數據控制，通過靈活的各類參數設置實現各類基礎和高級應用，實現了異步刷新列表數據和頁面統一布局，解決了傳統技術列表數據展示中代碼量過大、數據分層過多、開發效率低下、技術要求高、擴展性差等問題，最終實現低代碼、低技術含量、高效率、高擴展行的目標。同時在此基礎上，增加異步CDUQ(增、刪、改、查)功能，真正做到無縫無跳轉的完美客戶體驗效果。[0058]這里本發明的描述和應用是說明性的，并非想將本發明的范圍限制在上述實施例中。這里所披露的實施例的變形和改變是可能的，對于那些本領域的普通技術人員來說實施例的替換和等效的各種部件是公知的。本領域技術人員應該清楚的是，在不脫離本發明的精神或本質特征的情況下，本發明可以以其它形式、結構、布置、比例，以及用其它組件、材料和部件來實現。在不脫離本發明范圍和精神的情況下，可以對這里所披露的實施例進行其它變形和改變。【權利要求】1.一種基于GRID組件的列表數據展現方法，其特征在于，所述方法包括以下步驟:步驟S1:后臺接到前臺的列表數據展現命令后，通過JS及CSS模塊對所述列表數據進行封裝，并通過AJAX模塊對所述列表數據進一步封裝其交互方式及格式，得到預設標準樣式的封裝數據；步驟S2:前臺中設定JSP自定義標簽，通過該JSP自定義標簽將各類參數設置和業務控制抽取共性并封裝；步驟S3:后臺從數據庫中獲取所需的列表數據，通過OR-Mapping機制將所述需要展示的列表數據轉換成GRID組件能識別的數據格式，然后將轉換好的數據同樣通過AJAX方式返回到前臺；步驟S4:前臺根據所述JSP自定義標簽將列表數據加載到所述GRID組件中，所述GRID組件根據OR-Mapping數據對應關系，按照所述預設標準樣式自動展示所述列表數據。2.根據權利要求1所述的基于GRID組件的列表數據展現方法，其特征在于，所述步驟SI具體包括:后臺接到前臺的列表數據展現命令后，通過JS模塊對所述命令轉換成鍵值對格式的JSON數據并根據自定義和CSS模塊的樣式進行封裝，并通過AJAX模塊對所述命令進一步封裝其交互方式及格式，并將其提交到后臺。3.根據權利要求1所述的基于GRID組件的列表數據展現方法，其特征在于，所述步驟S2具體包括:前臺中在頁面上采用類似HTML語言的方式設定JSP自定義標簽，通過該JSP自定義標簽將各類參數設置和業務控制抽取包括樣式、寬度、字體大小、格式的數據共性特性并封裝成公用的JAVA和JS代碼，最終以HTML網頁格式展示。4.根據權利要求1所述的基于GRID組件的列表數據展現方法，其特征在于，所述步驟S3中后臺從數據庫中獲取所需的列表數據的步驟具體包括:后臺通過異步方式從數據庫中獲取所需的列表數據。5.根據權利要求4所述的基于GRID組件的列表數據展現方法，其特征在于，所述步驟S3中通過OR-Mapping機制將所述需要展示的列表數據轉換成GRID組件能識別的數據格式的步驟具體包括:后臺通過OR-Mapping機制將所述列表數據與實例對應起來，并通過調用公用類將轉換成GRID組件能識別的數據格式。6.根據權利要求1所述的基于GRID組件的列表數據展現方法，其特征在于，所述步驟S4之后還包括:通過異步CDUQ模塊對所述列表數據進行增、刪或改、查。7.一種基于GRID組件的列表數據展現系統，其特征在于，所述系統包括:后臺及前臺，所述后臺中設有JS及CSS模塊、AJAX模塊及GRID組件轉化模塊，所述前臺中設有JSP標簽模塊、GRID組件加載模塊及列表數據展示模塊；所述JS及CSS模塊用于對所述列表數據進行封裝，所述AJAX模塊連接于JS及CSS模塊，用于對所述列表數據進一步封裝其交互方式及格式，得到預設標準樣式的封裝數據。所述GRID組件轉化模塊用于通過OR-Mapping機制將從數據庫中獲取所需的列表數據轉換成所需數據格式的GRID組件。所述JSP標簽模塊用于設定JSP自定義標簽，通過該JSP自定義標簽將各類參數設置和業務控制抽取共性并封裝。所述GRID組件加載模塊連接于所述JSP標簽模塊，用于根據所述JSP自定義標簽將列表數據加載到所述GRID組件中；所述列表數據展示模塊連接于所述GRID組件加載模塊，用于根據OR-Mapping數據對應關系，按照所述預設標準樣式自動展示所述列表數據。8.根據權利要求7所述的基于GRID組件的列表數據展現系統，其特征在于，所述前臺還包括異步CDUQ模塊，用于對所述列表數據進行增、刪或改、查。【文檔編號】G06F9/44GK103677789SQ201210361334【公開日】2014年3月26日申請日期:2012年9月25日優先權日:2012年9月25日【發明者】王琳,朱奎,李洪申請人:深圳市金正方科技有限公司