一種不規則div動態布局方法
【專利摘要】一種不規則DIV動態布局方法，在一個空白的頁面上面，通過新增DIV單元的算法實現初步頁面布局，DIV單元用于設置微件，在所述初步頁面布局上拖拽DIV單元，同時保證頁面布局的有序性。本發明在報表這樣的元素布局比較任意，定制化層度高，非常多樣化的頁面上，實現頁面元素的模塊化改造，成為可替換、可拖動、可復用的組件，也就是頁面元素的動態布局，使其可初始化，可動態布局，可拖動。
【專利說明】—種不規則DIV動態布局方法
【技術領域】
[0001]本發明屬于計算機【技術領域】，為一種不規則DIV動態布局方法。
【背景技術】
[0002]一個頁面的區域布局，一般情況下使用DIV層實現。
[0003]如果要做一個報表頁面，報表頁面一般由查詢條件區域，表格區域，圖表區域，這些區域都是不規則的。可能頂部的查詢區域最寬，底下的表格和圖表是2:1的關系，表格較寬，圖表較窄。使用DIV層技術實現的時候一般就是固定位置的做法。通過DIV層的POSIT1N:ABSOLUTE屬性定位到具體的〈X，Y〉坐標后，再在DIV層里面繪制表格或者圖表。
[0004]如果要將報表中的這些區域獨立出來，實現動態布局，現有技術的實現方案例如《谷歌個人資訊中心》的方式:
[0005]I)個人資訊中心以DIV塊方式展示新聞，個人配置等信息模塊，但將這些DIV放在<UL>的〈LI〉元素中，造成頁面結構嵌套復雜，降低了頁面加載效率，且不能自定義頁面布局;
[0006]2)頁面總體固定為三列，每個DIV模塊大小均為同等寬度，這樣的寬度限制不符合報表頁面的布局特點。
[0007]根據現有的方式，要實現可動態布局，可拖動的頁面區域布局方式，一般都是將頁面分為寬度相等的幾列，比如3列列，由于寬度相同，每一列的內容都可自由在3列間拖動。但是這樣的實現方案不能滿足報表頁面布局多樣化的需求。個性化定制的能力非常差，動則就要重新開發報表頁面。
【發明內容】
[0008]本發明要解決的問題是:把報表頁面中各個區域獨立出來，使用布局算法動態計算這些不規則寬度的區域的定位，使這些頁面區域能動態展現在正確的位置上，并且在用戶拖動之后能重新自動布局定位。
[0009]本發明的技術方案為:一種不規則DIV動態布局方法,在一個空白的報表頁面上面，通過新增DIV單元的算法實現初步頁面布局，DIV單元用于設置微件，在所述初步頁面布局上拖拽DIV單元，同時保證頁面布局的有序性，完成DIV動態布局，包括以下步驟:
[0010]I)新增DIV單元算法:設置頁面布局的結構等分為N列，每列寬度自定義，每列的寬度權重為I，一行權重總和為N，新增DIV單元時，對DIV單元設定寬度權重以及所在列的位置，DIV單元的寬度權重不超過N，每新增一個DIV單元的步驟如下:
[0011]101)計算頁面布局結構中每一列的高度，根據新增DIV單元的寬度權重判斷插入列的位置，寬度權重為η的DIV單元，η = 1,2,…，N-1，計算第I?η列的高度，選擇最小值作為插入列，當新增DIV單元的寬度權重為N，默認選擇第一列作為插入列；
[0012]102)計算當前頁面布局總行數；
[0013]103)將當前頁面布局總行數加+1作為插入行，即每增加一個DIV單元，原總行數就+1 ；104)在頁面布局的數據結構中增加新增DIV單元的數據結構，設每一行數據結構為DIVtD11D2,…Dn] ,Di表示要設置的微件，i = 1，2…N，一行的某一列沒有微件，則Di =NULL,Di = -1表示前一列DIV單元的寬度權重延伸到當前列；
[0014]105)在頁面布局的數據結構中更新當前DIV單元的詳細信息，包括寬度、高度、上邊距、左邊距、以及新增DIV單元所在行的行信息和列信息；
[0015]106)計算新增 DIV 單元的 WIDTH，TOP 和 LEFT ；
[0016]107)創建新增DIV單元主體框架，包括上下左右邊框，以及框架的樣式，用以呈現具體化的界面展示設計；
[0017]108)給新增DIV單元添加拖拽事件，用于實現通過鼠標拖拽此DIV單元；
[0018]109)異步加載新增DIV單元內容，即設置的微件；
[0019]110)重新繪制全局DIV展現，得到初步頁面布局；
[0020]2)動態拖拽DIV單元:
[0021]201)鼠標點擊待移動DIV單元；
[0022]202)計算鼠標的 TOP，LEFT ；
[0023]203)計算待移動 DIV 單元的 WIDTH，HEIGHT, TOP 和 LEFT ；
[0024]204)判定模擬框是否存在，如果沒有則創建，有就顯示，所述模擬框為模擬結果響應區，模擬框對應于待移動DIV單元，用于拖拽過程中對拖拽目標位置的準確定位；
[0025]205)鼠標移動,此時待移動DIV單元也跟著鼠標移動；
[0026]206)實時計算鼠標的TOP，LEFT ；
[0027]207)循環遍歷DIV單元的數據結構數組；
[0028]208)根據步驟206)和207)的數據比對，判定鼠標當前在哪個目標DIV單元上，目標DIV單元的位置即為待移動DIV單元要拖拽到的位置；
[0029]209)判定鼠標是否到達頁面布局的展示邊際，如果是，將頁面布局展示最頂部或最底部的DIV單元上部分作為熱區，熱區部分用于與模擬框對應插入，如果否，則進行步驟210)；
[0030]210)判定在鼠標在目標DIV單元的上下左右哪個地方；
[0031]211)判斷待移動DIV單元的寬度權重與目標DIV單元的寬度權重是否匹配，在目標DIV單元周圍顯示熱區；
[0032]212)根據模擬框與熱區的對應，模擬顯示待移動DIV單元的移動效果，確定待移動DIV單元到達預定位置后，鼠標松開；
[0033]213)計算此時鼠標的TOP和LEFT ；
[0034]214)判定鼠標是否在待移動DIV單元自身范圍內；
[0035]215)待移動DIV單元移動到目標位置完成；
[0036]216)隱藏之前創建的模擬框；
[0037]217)修改DIV單元數組，保存最新的布局數據，完成動態布局。
[0038]進一步的，頁面布局展示異常時，進行容錯修復:如果某一行布局的微件寬度大于權重總和，則將這一行的微件拆分在新增行中顯示。
[0039]本發明所述不規則DIV單元指寬和高為用戶自定義的DIV單元，具有以下特點:
[0040]1、動態拖拽響應計算:使用者手動拖拽移動不規則DIV單元時,不確定最終落下的位置，在整個拖拽過程中根據拖拽算法對當前的操作位置動態出現模擬框，并且實時調整界面展示，虛擬出最終展現效果。
[0041]2、容錯修復:使用者在操作異常或有意操作致使數據結構異常，導致頁面布局展示異常，可以自動通過容錯修復機制處理這些異常，并且修復數據結構至使用者當時操作的狀態。
[0042]現有的新增DIV單元方法只能固定列寬實現，也就是在新增一個DIV單元時必須設置列寬，而頁面的每一列也被固定了列寬，這就導致后續移動DIV單元時會由于列寬不匹配而無法移動，即使采用不同列寬來設計頁面，在后期移動DIV單元時還是會受到列寬限制，導致沒有動態拖拽效果。本發明通過設計的寬度權重的方式，不再局限于DIV單元的實際列寬，而通過寬度權重的方式考慮其所占頁面的列，由于權重的設置，實現了不同列寬的DIV單元在頁面上的統一寬度度量，實現移動不規則DIV單元時可以克服不同列寬帶來的影響，不論是新增DIV單元或移動已有DIV單元，都無需考慮其實際列寬值，而只需計算其寬度權重，在報表這樣的元素布局比較任意、定制化層度高、非常多樣化的頁面上，實現頁面元素的模塊化改造，成為可替換、可拖動、可復用的組件，也就是頁面元素的動態布局，使其可初始化，可動態布局，可拖動。本發明由于頁面設置以及新增DIV單元時未限定列寬，因此實際使用時，頁面的列寬以及DIV單元的列寬都是可以自由定義的，新增和移動時只考慮寬度權重，方法簡便，靈活度高。
【專利附圖】
【附圖說明】
[0043]圖1為頁面布局展示效果示例。
[0044]圖2為在頁面上新增DIV單元的流程圖。
[0045]圖3為鼠標點擊生成模擬框操作的流程圖。
[0046]圖4為鼠標移動手動挪位操作的流程圖。
[0047]圖5為鼠標放開移動實現移動操作的流程圖。
[0048]圖6為容錯修復的流程圖。
【具體實施方式】
[0049]本發明中，在一個空白的報表頁面上面，通過新增DIV算法實現初步的頁面布局，這時的頁面布局是通過計算機系統計算得出的，可以保證頁面的有序性和合理性，但是缺少用戶主觀意愿的調整實現個性定制。如果用戶想要按照自己的意愿調整頁面的布局，可以用鼠標拖拽生成的DIV單元進行移動，通過拖拽算法達到用戶的調整目的，同時還保證頁面布局的有序性。如果用戶進行新增、刪除、替換等操作后，出現了頁面布局異常，本發明通過容錯修復算法對頁面進行兼容處理，保證頁面的有序性。通過以上機制，實現不規則DIV動態布局，達到個性化和有序化的合理兼容。
[0050]本發明頁面布局結構數據如下，其對應的展示效果如圖1:
[0051][
[0052][ffl, -1,W4],
[0053][W2, W3, NULL]，
[0054][NULL, W5, NULL]，
[0055][W6, -1, -1],
[0056][W7,W9, -1],
[0057][W8,ffl0,ffll]
[0058]]
[0059]設置頁面布局的結構等分為N列，每列寬度自定義，每列的寬度權重為1，一行權重總和為N，新增DIV單元時，對DIV單元設定寬度權重以及所在列的位置，DIV單元的寬度權重不超過N，上述頁面布局的結構數據表示3列6行的布局，Wl?Wll表示各個DIV單元，其中加載了對應的微件(WIDGET)，說明如下:
[0060]I)三列結構兼容當前主流顯示器，寬度自定義。
[0061]2)每一列的寬度權重為I, 一行的權重總和為3。
[0062]3) DIV單元不設定寬度，只設定寬度權重。
[0063]4)DIV單元權重可以為1，2或3，不能超過3。
[0064]5) NULL代表此列沒有微件(WIDGET)。
[0065]6)-1代表前一列DIV單元的寬度權重延伸到這一列。
[0066]下面通過具體實施例來說明本發明的實施。
[0067]1、新增和初始化
[0068]頁面最初進行布局初始化，根據初始默認的方式或者由用戶指定數目以及DIV單元的高度、寬度的方式，計算機程序初步自動生成初始頁面布局，每一個DIV單元通過新增算法一個一個添加到頁面上，每一個DIV位置均是通過新增算法指定的，這樣使加載出來的頁面布局整齊有序。同理，用戶想要在頁面上新增一個DIV單元，也通過新增算法算出DIV位置后在頁面添加，保證頁面布局的合理性。
[0069]新增算法流程如圖2所示，在空白頁面上通過新增算法加載頁面布局，主要完成頁面初始化和在頁面上新增DIV單元操作，展現預定的頁面布局。
[0070]對于一個新增DIV單元，其增加步驟如下:
[0071]101)計算頁面布局結構中每一列的高度，根據新增DIV單元的寬度權重判斷插入列的位置，寬度權重為η的DIV單元，η = 1,2,…，N-1，計算第I?η列的高度，選擇最小值作為插入列，當新增DIV單元的寬度權重為N，默認選擇第一列作為插入列。例如，對于三列的頁面布局，根據新增DIV單元寬度權重自動判斷，如果新增DIV單元寬度權重寬度權重為1，則計算三列的高度選出最小值作為插入列，如果寬度權重為2則計算第一列第二列的高度選出最小值作為插入列，如果寬度權重為3則默認選擇第一列作為插入列；
[0072]102)計算當前頁面布局總行數；
[0073]103)將當前頁面布局總行數加+1作為插入行，即每增加一個DIV單元，原總行數就+1 ;
[0074]104)在頁面布局的數據結構中增加新增DIV單元的數據結構，設每一行數據結構為DIVQ^D2,…Dn]，Di表示要設置的微件，i = 1，2…N，一行的某一列沒有微件，則Di =NULL, Di = -1表示前一列DIV單元的寬度權重延伸到當前列；
[0075]105)在頁面布局的數據結構中更新當前DIV單元的詳細信息，包括寬度、高度、上邊距、左邊距、以及新增DIV單元所在行的行信息和列信息；
[0076]106)計算新增 DIV 單元的 WIDTH，TOP 和 LEFT ；
[0077]107)創建新增DIV單元主體框架，包括上下左右邊框，以及框架的樣式，用以呈現具體化的界面展示設計；
[0078]108)給新增DIV單元添加拖拽事件，用于實現通過鼠標拖拽此DIV單元；
[0079]109)異步加載新增DIV單元內容，即設置的微件；
[0080]110)重新繪制全局DIV展現，得到初步頁面布局。
[0081]2、動態拖拽
[0082]動態拖拽的總體過程如下:1)點擊鼠標,選中某個DIV單元；2)創建同等大小的模擬框；3)鼠標移動，自動滾動內容展示區域；4)在目標位置展示模擬框；5)判斷寬度權重是否適合擺放DIV ；6)隱藏熱區和模擬框；7)修改保存數據。
[0083]動態拖拽由三個操作組合而成,分別是鼠標點擊生成模擬框、鼠標移動手動挪位、鼠標放開移動實現移動。具體實現為:
[0084]201)鼠標點擊待移動DIV單元；
[0085]202)計算鼠標的 TOP，LEFT ；
[0086]203)計算待移動 DIV 單元的 WIDTH，HEIGHT, TOP 和 LEFT ；
[0087]204)判定模擬框是否存在，如果沒有則創建，有就顯示，所述模擬框為模擬結果響應區，模擬框對應于待移動DIV單元，用于拖拽過程中對拖拽目標位置的準確定位；
[0088]205)鼠標移動,此時待移動DIV單元也跟著鼠標移動；
[0089]206)實時計算鼠標的TOP，LEFT ；
[0090]207)循環遍歷DIV單元的數據結構數組；
[0091]208)根據步驟206)和207)的數據比對，判定鼠標當前在哪個目標DIV單元上，目標DIV單元的位置即為待移動DIV單元要拖拽到的位置；
[0092]209)判定鼠標是否到達頁面布局的展示邊際，如果是，將頁面布局展示最頂部或最底部的DIV單元上部分作為熱區，熱區部分用于與模擬框對應插入，如果否，則進行步驟210)；
[0093]210)判定在鼠標在目標DIV單元的上下左右哪個地方；
[0094]211)判斷待移動DIV單元的寬度權重與目標DIV單元的寬度權重是否匹配，在目標DIV單元周圍顯示熱區；
[0095]212)根據模擬框與熱區的對應，模擬顯示待移動DIV單元的移動效果，確定待移動DIV單元到達預定位置后，鼠標松開；
[0096]213)計算此時鼠標的TOP和LEFT ；
[0097]214)判定鼠標是否在待移動DIV單元自身范圍內；
[0098]215)待移動DIV單元移動到目標位置完成；
[0099]216)隱藏之前創建的模擬框；
[0100]217)修改DIV單元數組，保存最新的布局數據，完成動態布局。
[0101]步驟201)-204)為鼠標點擊生成模擬框操作，如圖3，實現在拖拽過程中生成模擬結果響應區，主要幫助用戶實現拖拽過程中結果模擬準確定位，避免出現拖拽結果隨意性。模擬框和熱區的實現是程序語言的功能，為現有計算機技術，主要是動態布局中拖拽輔助手段，這里不再詳述其方法。
[0102]步驟205)-211)為鼠標移動手動挪位操作,如圖4,用于在用戶選中某個DIV進行移動的過程中，通過之前鼠標點擊生成模擬框進行移動位置判斷，在移動的過程不斷生成模擬框和響應熱區，實現DIV動態拖拽布局。以頁面分為3列為例，步驟211)具體為:判斷待移動DIV的寬度權重，如果待移動DIV寬度權重為I，對于目標DIV單元，寬度權重為3的目標DIV只顯示上下熱區、寬度權重為2的目標DIV在第一列顯示上下左右熱區，在第二列顯示上下左熱區、寬度權重為I的目標DIV在第一二列顯示上下左右熱區，在第三列顯示上下左熱區；如果待移動DIV權重為2，寬度權重為I的目標DIV顯示上下左右熱區，在第二列顯示上下左熱區、寬度權重為2的目標DIV在第一列顯示上下左右熱區，在第二列顯示上下左熱區、寬度為3的目標DIV只顯示上下熱區；如果待移動DIV權重為3，在所有目標DIV顯示上下熱區。
[0103]步驟212-217)為鼠標放開移動實現移動操作，如圖5，實現用戶確定拖拽位置后，松開鼠標時對整個頁面布局進行最終調整，同時修改數據結構，保存最新的布局數據。
[0104]3、容錯修復
[0105]使用者在操作異常或有意操作致使數據結構異常，導致頁面布局展示異常，需要容錯修復算法對數據結構進行糾錯處理，保證頁面布局不會出現異常情況。
[0106]容錯修復場景:原DIV—行布局為[1，I, I],現第三個DIV的寬度被修改為3，導致布局變成[1，1，3]，這樣頁面上DIV就展示異常。
[0107]容錯修復處理流程如圖6所示，如果某一行布局WIDGET寬度異常(總和 > 權重總和)，則將這一行的WIDGET (不為NULL或-1)在新增一行中展示。同樣以頁面分為3列為例，實施時，遍歷數據結構，判斷某一行的權重是否大于3，如果大于3，則將這一行的數據拆為新的3行，確保每一行的權重不大于3。
[0108]本發明在報表這樣的元素布局比較任意、定制化層度高、非常多樣化的頁面上，依賴寬度權重，實現移動不規則單元時可以克服不同列寬帶來的影響，讓使用者進行個性化拖拽頁面元素，且頁面元素能自動適配調整布局，達到個性化定制和頁面元素組件化的雙重目的，減少二次開發成本，提升用戶體驗。
【權利要求】
1.一種不規則Div動態布局方法，其特征是在一個空白的報表頁面上面，通過新增DIV單元的算法實現初步頁面布局，DIV單元用于設置微件，在所述初步頁面布局上拖拽DIV單元，同時保證頁面布局的有序性，完成DIV動態布局，包括以下步驟: 1)新增DIV單元算法:設置頁面布局的結構等分為N列，每列寬度自定義，每列的寬度權重為1，一行權重總和為N,新增DIV單元時,對DIV單元設定寬度權重以及所在列的位置，DIV單元的寬度權重不超過N，每新增一個DIV單元的步驟如下: 101)計算頁面布局結構中每一列的高度，根據新增DIV單元的寬度權重判斷插入列的位置，寬度權重為η的DIV單元，η = I, 2，…，N-1，計算第I?η列的高度，選擇最小值作為插入列，當新增DIV單元的寬度權重為N，默認選擇第一列作為插入列； 102)計算當前頁面布局總行數； 103)將當前頁面布局總行數加+1作為插入行，即每增加一個DIV單元，原總行數就+1 ; 104)在頁面布局的數據結構中增加新增DIV單元的數據結構，設每一行數據結構為DIVtD11D2,…Dn] ,Di表示要設置的微件，i = 1，2…N，一行的某一列沒有微件，則Di =NULL,Di = -1表示前一列DIV單元的寬度權重延伸到當前列； 105)在頁面布局的數據結構中更新當前DIV單元的詳細信息，包括寬度、高度、上邊距、左邊距、以及新增DIV單元所在行的行信息和列信息； 106)計算新增DIV單元的WIDTH,TOP和LEFT ； 107)創建新增DIV單元主體框架，包括上下左右邊框，以及框架的樣式，用以呈現具體化的界面展示設計； 108)給新增DIV單元添加拖拽事件,用于實現通過鼠標拖拽此DIV單元； 109)異步加載新增DIV單元內容，即設置的微件； 110)重新繪制全局DIV展現,得到初步頁面布局； 2)動態拖拽DIV單元: 201)鼠標點擊待移動DIV單元； 202)計算鼠標的TOP,LEFT ； 203)計算待移動DIV 單元的 WIDTH，HEIGHT, TOP 和 LEFT ； 204)判定模擬框是否存在，如果沒有則創建，有就顯示，所述模擬框為模擬結果響應區，模擬框對應于待移動DIV單元，用于拖拽過程中對拖拽目標位置的準確定位； 205)鼠標移動，此時待移動DIV單元也跟著鼠標移動； 206)實時計算鼠標的TOP，LEFT； 207)循環遍歷DIV單元的數據結構數組； 208)根據步驟206)和207)的數據比對，判定鼠標當前在哪個目標DIV單元上，目標DIV單元的位置即為待移動DIV單元要拖拽到的位置； 209)判定鼠標是否到達頁面布局的展示邊際，如果是，將頁面布局展示最頂部或最底部的DIV單元上部分作為熱區，熱區部分用于與模擬框對應插入，如果否，則進行步驟210)； 210)判定在鼠標在目標DIV單元的上下左右哪個地方； 211)判斷待移動DIV單元的寬度權重與目標DIV單元的寬度權重是否匹配，在目標DIV單元周圍顯示熱區； 212)根據模擬框與熱區的對應，模擬顯示待移動DIV單元的移動效果，確定待移動DIV單元到達預定位置后，鼠標松開； 213)計算此時鼠標的TOP和LEFT； 214)判定鼠標是否在待移動DIV單元自身范圍內； 215)待移動DIV單元移動到目標位置完成； 216)隱藏之前創建的模擬框； 217)修改DIV單元數組，保存最新的布局數據，完成動態布局。
2.根據權利要求1所述的一種不規則DIV動態布局方法，其特征是頁面布局展示異常時，進行容錯修復:如果某一行布局的微件寬度大于權重總和，則將這一行的微件拆分在新增行中顯示。
【文檔編號】G06F9/44GK104346172SQ201410607041
【公開日】2015年2月11日 申請日期:2014年10月31日 優先權日:2014年10月31日
【發明者】強健, 吳成明 申請人:亞信科技（南京）有限公司