发明内容
本发明要解决的问题是:把报表页面中各个区域独立出来,使用布局算法动态计算这些不规则宽度的区域的定位,使这些页面区域能动态展现在正确的位置上,并且在用户拖动之后能重新自动布局定位。
本发明的技术方案为:一种不规则DIV动态布局方法,在一个空白的报表页面上面,通过新增DIV单元的算法实现初步页面布局,DIV单元用于设置微件,在所述初步页面布局上拖拽DIV单元,同时保证页面布局的有序性,完成DIV动态布局,包括以下步骤:
1)新增DIV单元算法:设置页面布局的结构等分为N列,每列宽度自定义,每列的宽度权重为1,一行权重总和为N,新增DIV单元时,对DIV单元设定宽度权重以及所在列的位置,DIV单元的宽度权重不超过N,每新增一个DIV单元的步骤如下:
101)计算页面布局结构中每一列的高度,根据新增DIV单元的宽度权重判断插入列的位置,宽度权重为n的DIV单元,n=1,2,…,N-1,计算第1~n列的高度,选择最小值作为插入列,当新增DIV单元的宽度权重为N,默认选择第一列作为插入列;
102)计算当前页面布局总行数;
103)将当前页面布局总行数加+1作为插入行,即每增加一个DIV单元,原总行数就+1;104)在页面布局的数据结构中增加新增DIV单元的数据结构,设每一行数据结构为DIV[D1,D2,…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单元数组,保存最新的布局数据,完成动态布局。
进一步的,页面布局展示异常时,进行容错修复:如果某一行布局的微件宽度大于权重总和,则将这一行的微件拆分在新增行中显示。
本发明所述不规则DIV单元指宽和高为用户自定义的DIV单元,具有以下特点:
1、动态拖拽响应计算:使用者手动拖拽移动不规则DIV单元时,不确定最终落下的位置,在整个拖拽过程中根据拖拽算法对当前的操作位置动态出现模拟框,并且实时调整界面展示,虚拟出最终展现效果。
2、容错修复:使用者在操作异常或有意操作致使数据结构异常,导致页面布局展示异常,可以自动通过容错修复机制处理这些异常,并且修复数据结构至使用者当时操作的状态。
现有的新增DIV单元方法只能固定列宽实现,也就是在新增一个DIV单元时必须设置列宽,而页面的每一列也被固定了列宽,这就导致后续移动DIV单元时会由于列宽不匹配而无法移动,即使采用不同列宽来设计页面,在后期移动DIV单元时还是会受到列宽限制,导致没有动态拖拽效果。本发明通过设计的宽度权重的方式,不再局限于DIV单元的实际列宽,而通过宽度权重的方式考虑其所占页面的列,由于权重的设置,实现了不同列宽的DIV单元在页面上的统一宽度度量,实现移动不规则DIV单元时可以克服不同列宽带来的影响,不论是新增DIV单元或移动已有DIV单元,都无需考虑其实际列宽值,而只需计算其宽度权重,在报表这样的元素布局比较任意、定制化层度高、非常多样化的页面上,实现页面元素的模块化改造,成为可替换、可拖动、可复用的组件,也就是页面元素的动态布局,使其可初始化,可动态布局,可拖动。本发明由于页面设置以及新增DIV单元时未限定列宽,因此实际使用时,页面的列宽以及DIV单元的列宽都是可以自由定义的,新增和移动时只考虑宽度权重,方法简便,灵活度高。
具体实施方式
本发明中,在一个空白的报表页面上面,通过新增DIV算法实现初步的页面布局,这时的页面布局是通过计算机系统计算得出的,可以保证页面的有序性和合理性,但是缺少用户主观意愿的调整实现个性定制。如果用户想要按照自己的意愿调整页面的布局,可以用鼠标拖拽生成的DIV单元进行移动,通过拖拽算法达到用户的调整目的,同时还保证页面布局的有序性。如果用户进行新增、删除、替换等操作后,出现了页面布局异常,本发明通过容错修复算法对页面进行兼容处理,保证页面的有序性。通过以上机制,实现不规则DIV动态布局,达到个性化和有序化的合理兼容。
本发明页面布局结构数据如下,其对应的展示效果如图1:
[
[W1,-1,W4],
[W2,W3,NULL],
[NULL,W5,NULL],
[W6,-1,-1],
[W7,W9,-1],
[W8,W10,W11]
]
设置页面布局的结构等分为N列,每列宽度自定义,每列的宽度权重为1,一行权重总和为N,新增DIV单元时,对DIV单元设定宽度权重以及所在列的位置,DIV单元的宽度权重不超过N,上述页面布局的结构数据表示3列6行的布局,W1~W11表示各个DIV单元,其中加载了对应的微件(WIDGET),说明如下:
1)三列结构兼容当前主流显示器,宽度自定义。
2)每一列的宽度权重为1,一行的权重总和为3。
3)DIV单元不设定宽度,只设定宽度权重。
4)DIV单元权重可以为1,2或3,不能超过3。
5)NULL代表此列没有微件(WIDGET)。
6)-1代表前一列DIV单元的宽度权重延伸到这一列。
下面通过具体实施例来说明本发明的实施。
1、新增和初始化
页面最初进行布局初始化,根据初始默认的方式或者由用户指定数目以及DIV单元的高度、宽度的方式,计算机程序初步自动生成初始页面布局,每一个DIV单元通过新增算法一个一个添加到页面上,每一个DIV位置均是通过新增算法指定的,这样使加载出来的页面布局整齐有序。同理,用户想要在页面上新增一个DIV单元,也通过新增算法算出DIV位置后在页面添加,保证页面布局的合理性。
新增算法流程如图2所示,在空白页面上通过新增算法加载页面布局,主要完成页面初始化和在页面上新增DIV单元操作,展现预定的页面布局。
对于一个新增DIV单元,其增加步骤如下:
101)计算页面布局结构中每一列的高度,根据新增DIV单元的宽度权重判断插入列的位置,宽度权重为n的DIV单元,n=1,2,…,N-1,计算第1~n列的高度,选择最小值作为插入列,当新增DIV单元的宽度权重为N,默认选择第一列作为插入列。例如,对于三列的页面布局,根据新增DIV单元宽度权重自动判断,如果新增DIV单元宽度权重宽度权重为1,则计算三列的高度选出最小值作为插入列,如果宽度权重为2则计算第一列第二列的高度选出最小值作为插入列,如果宽度权重为3则默认选择第一列作为插入列;
102)计算当前页面布局总行数;
103)将当前页面布局总行数加+1作为插入行,即每增加一个DIV单元,原总行数就+1;
104)在页面布局的数据结构中增加新增DIV单元的数据结构,设每一行数据结构为DIV[D1,D2,…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、动态拖拽
动态拖拽的总体过程如下:1)点击鼠标,选中某个DIV单元;2)创建同等大小的模拟框;3)鼠标移动,自动滚动内容展示区域;4)在目标位置展示模拟框;5)判断宽度权重是否适合摆放DIV;6)隐藏热区和模拟框;7)修改保存数据。
动态拖拽由三个操作组合而成,分别是鼠标点击生成模拟框、鼠标移动手动挪位、鼠标放开移动实现移动。具体实现为:
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单元数组,保存最新的布局数据,完成动态布局。
步骤201)-204)为鼠标点击生成模拟框操作,如图3,实现在拖拽过程中生成模拟结果响应区,主要帮助用户实现拖拽过程中结果模拟准确定位,避免出现拖拽结果随意性。模拟框和热区的实现是程序语言的功能,为现有计算机技术,主要是动态布局中拖拽辅助手段,这里不再详述其方法。
步骤205)-211)为鼠标移动手动挪位操作,如图4,用于在用户选中某个DIV进行移动的过程中,通过之前鼠标点击生成模拟框进行移动位置判断,在移动的过程不断生成模拟框和响应热区,实现DIV动态拖拽布局。以页面分为3列为例,步骤211)具体为:判断待移动DIV的宽度权重,如果待移动DIV宽度权重为1,对于目标DIV单元,宽度权重为3的目标DIV只显示上下热区、宽度权重为2的目标DIV在第一列显示上下左右热区,在第二列显示上下左热区、宽度权重为1的目标DIV在第一二列显示上下左右热区,在第三列显示上下左热区;如果待移动DIV权重为2,宽度权重为1的目标DIV显示上下左右热区,在第二列显示上下左热区、宽度权重为2的目标DIV在第一列显示上下左右热区,在第二列显示上下左热区、宽度为3的目标DIV只显示上下热区;如果待移动DIV权重为3,在所有目标DIV显示上下热区。
步骤212-217)为鼠标放开移动实现移动操作,如图5,实现用户确定拖拽位置后,松开鼠标时对整个页面布局进行最终调整,同时修改数据结构,保存最新的布局数据。
3、容错修复
使用者在操作异常或有意操作致使数据结构异常,导致页面布局展示异常,需要容错修复算法对数据结构进行纠错处理,保证页面布局不会出现异常情况。
容错修复场景:原DIV一行布局为[1,1,1],现第三个DIV的宽度被修改为3,导致布局变成[1,1,3],这样页面上DIV就展示异常。
容错修复处理流程如图6所示,如果某一行布局WIDGET宽度异常(总和>权重总和),则将这一行的WIDGET(不为NULL或-1)在新增一行中展示。同样以页面分为3列为例,实施时,遍历数据结构,判断某一行的权重是否大于3,如果大于3,则将这一行的数据拆为新的3行,确保每一行的权重不大于3。
本发明在报表这样的元素布局比较任意、定制化层度高、非常多样化的页面上,依赖宽度权重,实现移动不规则单元时可以克服不同列宽带来的影响,让使用者进行个性化拖拽页面元素,且页面元素能自动适配调整布局,达到个性化定制和页面元素组件化的双重目的,减少二次开发成本,提升用户体验。