CN105205040A - 一种基于Flex的表格显示方法及装置 - Google Patents

Abstract

本发明公开了一种基于Flex的表格显示方法及装置，其中，方法包括：获取表格的所有第一组件、与各第一组件对应的第一标记，及表格各列的最大列宽；按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线；根据表格各列的最大列宽设置表格的垂直分割线。本发明能够使表格显示复杂内容并减少显示表格的响应时间。

Description

一种基于Flex的表格显示方法及装置

技术领域

本发明涉及计算机技术领域，尤指一种基于Flex的表格显示方法及装置。

背景技术

目前，在互联网(WEB)客户端越来越多的使用表格来显示数据。传统的利用表格显示数据的方法是通过Flex技术实现的，其中，Flex技术是一种基于Flash的客户端技术，可用于构建具有表现力的Wed应用程序。

然而，Flex中的数据表组件(DataGrid)与高级数据表组件(AdvancedDataGrid)只支持对表格中的整列单元格做渲染，在进行数据显示时必须根据数据的格式来展示数据，这就提高了对数据格式的依赖性，从而使得表格无法显示复杂内容；同时，由于只能对表格中整列单元格做渲染，导致对整列单元格中不需要做渲染的单元格也做了渲染，这样增加了表格的响应时间，降低了用户体验。

发明内容

为了解决上述技术问题，本发明提供了一种基于Flex的表格显示方法及装置，能够使表格显示复杂内容并减少显示表格的响应时间。

第一方面，本发明实施例提供一种基于Flex的表格显示方法，包括：获取表格的所有第一组件、与各第一组件对应的第一标记，及表格各列的最大列宽；按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线；根据表格各列的最大列宽设置表格的垂直分割线。

进一步地，根据第一组件的类型更新表格当前总行高并设置水平分割线，具体包括：若第一组件是Group容器，则获取第一组件中的所有第二组件以及与各第二组件对应的第二标记，并根据第二标记设置第二组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线；若第一组件不是Group容器，则根据第一组件中Group容器的个数和第一标记设置第一组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线。

进一步地，根据第二标记设置第二组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线，具体包括：若第二标记为偶数，则设置第二组件的横坐标值为预设坐标值；若第二标记为奇数，则设置第二组件的横坐标值为第一列的最大列宽与预设坐标值的和，更新当前总行高并根据当前总行高设置水平分割线。

进一步地，根据第一组件中Group容器的个数和第一标记设置第一组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线，具体包括：若(i-n)为偶数，则设置第一组件的横坐标值为预设坐标值；若(i-n)为奇数，则设置第一组件的横坐标值为第一列的最大列宽与预设坐标值的和，更新当前总行高并根据当前总行高设置水平分割线；其中，n为所有第一组件中Group容器的个数，i为与第一组件对应的第一标记。

进一步地，在按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线之后，还包括：预先设置表格各列的自定义列宽以及与各自定义列宽对应的各列标记；根据表格各列的自定义列宽和各列标记设置表格的垂直分割线。

第二方面，本发明实施例提供一种基于Flex的表格显示装置，包括：获取单元，水平设置单元和垂直设置单元，其中：获取单元，用于获取表格的所有第一组件、与各第一组件对应的第一标记，及表格各列的最大列宽；水平设置单元，用于按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线；垂直设置单元，用于根据获取单元获取的表格各列的最大列宽设置表格的垂直分割线。

进一步地，水平设置单元具体用于：在判断出第一组件的类型是Group容器时，获取第一组件中的所有第二组件以及与各第二组件对应的第二标记，并根据第二标记设置第二组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线；在判断出第一组件的类型不是Group容器时，根据第一组件中Group容器的个数和第一标记设置第一组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线。

进一步地，水平设置单元具体用于：在第二标记为偶数时，设置第二组件的横坐标值为预设坐标值；在第二标记为奇数时，设置第二组件的横坐标值为第一列的最大列宽与预设坐标值的和，更新当前总行高并根据当前总行高设置水平分割线。

进一步地，水平设置单元具体用于：在(i-n)为偶数时，设置第一组件的横坐标值为预设坐标值；在(i-n)为奇数，设置第一组件的横坐标值为第一列的最大列宽与预设坐标值的和，更新当前总行高并根据当前总行高设置水平分割线；其中，n为所有第一组件中Group容器的个数，i为与第一组件对应的第一标记。

进一步地，垂直设置单元具体用于：在水平设置单元按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线之后，预先设置表格各列的自定义列宽以及与各自定义列宽对应的各列标记；根据表格各列的自定义列宽和各列标记设置表格的垂直分割线。

本发明提供了一种通过基于Flex的表格显示方法及装置，通过获取表格的所有第一组件、与各第一组件对应的第一标记，及表格各列的最大列宽；按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线；根据表格各列的最大列宽设置表格的垂直分割线，实现了在WEB客户端利用表格显示复杂内容，并减少显示表格的响应时间。

附图说明

附图用来提供对本发明技术方案的进一步理解，并且构成说明书的一部分，与本申请的实施例一起用于解释本发明的技术方案，并不构成对本发明技术方案的限制。

图1为本发明实施例提出的一种基于Flex的表格显示方法的流程图；

图2为本发明实施例提出的一种基于Flex的表格显示装置的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下文中将结合附图对本发明的实施例进行详细说明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。

在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1为本发明实施例提出的一种基于Flex的表格显示方法的流程图，该方法包括：

步骤101:获取表格的所有第一组件、与各第一组件对应的第一标记，及表格各列的最大列宽；

在实际应用中，表格可以根据数据内容的不同设置相应的行数和列数。举例来说，表格可以设置为两列，第一列为信息标题列，内容包括包含展开按钮、标题图片、标题文字；第二列为信息内容列，包括用于显示数据信息的组件。

其中，第一组件是Flex中任意的组件，用于显示表格中的单元格内容，包括高级数据表组件(AdvancedDataGrid)，按钮组件(Button)，下拉框组件(ComboBox)，数据表格组件(DataGrid)，标签组件(Label)，列表组件(List)，文本显示组件(Text)和自定义的Flex组件。

步骤102：按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线；

需要说明的是，第一组件包括Group容器和其他类型，第一组件可以用Flex中的布局容器(BorderContainer)来实现。其中，Group容器表示表格中的多行并且能够以Group容器中的第一行进行伸缩。

在实际应用中，Group容器是Flex提供的用于布局的基本容器类型，利用Flex可以判断第一组件的类型是Group容器还是非Group容器。

示例性地，根据第一组件的类型更新表格当前总行高并设置水平分割线，具体包括：若第一组件是Group容器，则获取第一组件中的所有第二组件以及与各第二组件对应的第二标记，并根据第二标记设置第二组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线；若第一组件不是Group容器，则根据第一组件中Group容器的个数和第一标记设置第一组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线。

需要说明的是，第二组件，即Group容器中的次级组件，用于显示每个单元格的内容。

需要补充的是，利用Flex设置表格的水平分割线和垂直分割线是本领域的一项惯用技术手段。例如，可以利用Flex中的表格组件(Grid)来绘制表格的水平分割线和垂直分割线。

优选地，根据第二标记设置第二组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线，具体包括：若第二标记为偶数，则设置第二组件的横坐标值为预设坐标值；若第二标记为奇数，则设置第二组件的横坐标值为第一列的最大列宽与预设坐标值的和，更新当前总行高并根据当前总行高设置水平分割线。

可理解地，第一组件及第二组件进行重新排列的规则是两个第二组件为一组即在表格的同一行。第二标记可以从0开始顺序计数，在第二标记为偶数时，为该行的第一个单元格；在第二标记为奇数时，为该行的第二个单元格。

需要说明的是，第二组件的横坐标值，可以通过设置left属性来设置，第二组件的纵坐标值可以通过当前总行高来设置，根据第二组件的横坐标值和纵坐标值便可以确定出第二组件在显示页面上的尺寸和位置，以便做出表格的水平分割线和垂直分割线。其中，利用Flex设置表格的水平分割线和垂直分割线是本领域的一项惯用技术手段，因此，这里不再赘述。

其中，预设坐标值表示边界距离。举例来说，第二组件的横坐标值可以为5个像素，当然预设坐标值还可以设置成其它像素值，本发明实施例对预设坐标值的取值不做具体限定。

在实际应用中，当第一标记的取值为BorderContainer.numElements时，不设置水平分割线。

优选地，根据第一组件中Group容器的个数和第一标记设置第一组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线，具体包括：若(i-n)为偶数，则设置第一组件的横坐标值为预设坐标值；若(i-n)为奇数，则设置第一组件的横坐标值为第一列的最大列宽与预设坐标值的和，更新当前总行高并根据当前总行高设置水平分割线；其中，n为所有第一组件中Group容器的个数，i为与第一组件对应的第一标记。

步骤103:根据表格各列的最大列宽设置表格的垂直分割线。

可理解地，通过对第一组件及第二组件进行重新排列，避免了现有技术中只能对表格中整列单元格做渲染，实现了在WEB客户端利用表格显示复杂内容，并减少了显示表格的响应时间。

示例性地，在按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线之后，还包括：预先设置表格各列的自定义列宽以及与各自定义列宽对应的各列标记；根据所述表格各列的自定义列宽和各列标记设置表格的垂直分割线。

本发明实施例提供了一种基于Flex的表格显示方法，通过获取表格的所有第一组件、与各第一组件对应的第一标记，及表格各列的最大列宽；按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线；根据表格各列的最大列宽设置表格的垂直分割线，实现了在WEB客户端利用表格显示复杂内容，并减少显示表格的响应时间。

图2为本发明实施例提出的一种基于Flex的表格显示装置的结构示意图，该装置包括：获取单元201，水平设置单元202和垂直设置单元203，其中：

获取单元201，用于获取表格的所有第一组件、与各第一组件对应的第一标记，及表格各列的最大列宽；

水平设置单元202，用于按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线；

垂直设置单元203，用于根据所述获取单元201获取的表格各列的最大列宽设置表格的垂直分割线。

示例性地，水平设置单元202具体用于：在判断出所述第一组件的类型是Group容器时，获取第一组件中的所有第二组件以及与各第二组件对应的第二标记，并根据第二标记设置第二组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线；在判断出所述第一组件的类型不是Group容器时，根据第一组件中Group容器的个数和第一标记设置第一组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线。

示例性地，水平设置单元202具体用于：在第二标记为偶数时，设置第二组件的横坐标值为预设坐标值；在第二标记为奇数时，设置第二组件的横坐标值为第一列的最大列宽与预设坐标值的和，并更新当前总行高并根据当前总行高设置水平分割线。

示例性地，水平设置单元202具体用于：在(i-n)为偶数时，设置第一组件的横坐标值为预设坐标值；在(i-n)为奇数，设置第一组件的横坐标值为第一列的最大列宽与预设坐标值的和，更新当前总行高并根据当前总行高设置水平分割线；其中，n为所有第一组件中Group容器的个数，i为与第一组件对应的第一标记。

示例性地，垂直设置单元203具体用于：在所述水平设置单元202按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线之后，预先设置表格各列的自定义列宽以及与各自定义列宽对应的各列标记；根据所述表格各列的自定义列宽和各列标记设置表格的垂直分割线。

虽然本发明所揭露的实施方式如上，但的内容仅为便于理解本发明而采用的实施方式，并非用以限定本发明。任何本发明所属领域内的技术人员，在不脱离本发明所揭露的精神和范围的前提下，可以在实施的形式及细节上进行任何的修改与变化，但本发明的专利保护范围，仍须以所附的权利要求书所界定的范围为准。

Claims (10)

1.一种基于Flex的表格显示方法，其特征在于，包括：

获取表格的所有第一组件、与各第一组件对应的第一标记，及表格各列的最大列宽；

按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线；

根据表格各列的最大列宽设置表格的垂直分割线。

2.根据权利要求1所述的表格显示方法，其特征在于，所述根据第一组件的类型更新表格当前总行高并设置水平分割线，具体包括：

若第一组件是Group容器，则获取第一组件中的所有第二组件以及与各第二组件对应的第二标记，并根据第二标记设置第二组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线；

若第一组件不是Group容器，则根据第一组件中Group容器的个数和第一标记设置第一组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线。

3.根据权利要求2所述的方法，其特征在于，所述根据第二标记设置第二组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线，具体包括：

若第二标记为偶数，则设置第二组件的横坐标值为预设坐标值；若第二标记为奇数，则设置第二组件的横坐标值为第一列的最大列宽与预设坐标值的和，更新当前总行高并根据当前总行高设置水平分割线。

4.根据权利要求2所述的方法，其特征在于，所述根据第一组件中Group容器的个数和第一标记设置第一组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线，具体包括：

若(i-n)为偶数，则设置第一组件的横坐标值为预设坐标值；若(i-n)为奇数，则设置第一组件的横坐标值为第一列的最大列宽与预设坐标值的和，更新当前总行高并根据当前总行高设置水平分割线；其中，n为所有第一组件中Group容器的个数，i为与第一组件对应的第一标记。

5.根据权利要求1所述的方法，其特征在于，在按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线之后，还包括：

预先设置表格各列的自定义列宽以及与各自定义列宽对应的各列标记；

根据所述表格各列的自定义列宽和各列标记设置表格的垂直分割线。

6.一种基于Flex的表格显示装置，其特征在于，包括：获取单元，水平设置单元和垂直设置单元，其中：

所述获取单元，用于获取表格的所有第一组件、与各第一组件对应的第一标记，及表格各列的最大列宽；

所述水平设置单元，用于按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线；

所述垂直设置单元，用于根据所述获取单元获取的表格各列的最大列宽设置表格的垂直分割线。

7.根据权利要求6所述的表格显示装置，其特征在于，所述水平设置单元具体用于：

在判断出所述第一组件的类型是Group容器时，获取第一组件中的所有第二组件以及与各第二组件对应的第二标记，并根据第二标记设置第二组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线；在判断出所述第一组件的类型不是Group容器时，根据第一组件中Group容器的个数和第一标记设置第一组件的横坐标值，更新当前总行高并根据当前总行高设置水平分割线。

8.根据权利要求7所述的装置，其特征在于，所述水平设置单元具体用于：

在第二标记为偶数时，设置第二组件的横坐标值为预设坐标值；在第二标记为奇数时，设置第二组件的横坐标值为第一列的最大列宽与预设坐标值的和，更新当前总行高并根据当前总行高设置水平分割线。

9.根据权利要求7所述的装置，其特征在于，所述水平设置单元具体用于：

在(i-n)为偶数时，设置第一组件的横坐标值为预设坐标值；在(i-n)为奇数，设置第一组件的横坐标值为第一列的最大列宽与预设坐标值的和，更新当前总行高并根据当前总行高设置水平分割线；其中，n为所有第一组件中Group容器的个数，i为与第一组件对应的第一标记。

10.根据权利要求6所述的装置，其特征在于，所述垂直设置单元具体用于：

在所述水平设置单元按照与各第一组件对应的第一标记依次递增的顺序，针对各第一组件分别判断第一组件的类型，根据第一组件的类型更新表格当前总行高并设置水平分割线之后，预先设置表格各列的自定义列宽以及与各自定义列宽对应的各列标记；根据所述表格各列的自定义列宽和各列标记设置表格的垂直分割线。