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