CN109597954A - 数据项展示方法、装置、计算设备和介质 - Google Patents

Abstract

本申请公开了一种数据项展示方法、装置、计算设备和介质。其中，方法包括：页面布局生成步骤：响应于用户的选择操作，在页面区域内展示数据项以生成页面布局，其中，所述页面区域是基于超文本标记语言的表格标签对页面的单元格进行划分而形成的；绑定步骤：响应于用户的保存操作，将所述数据项的标识与所述页面区域绑定；和数据持久化步骤：对绑定后的页面布局进行数据持久化操作。该方法能够便于用户在对页面分区的基础上布置数据项目，从而使得数据得到更加集中的展示，有利于进行数据对比和分析，用户能够对页面按照需要划分成适合数据展示的区域，划分的形状能够灵活设计和调整，增加了产品的用户友好度。

Description

数据项展示方法、装置、计算设备和介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种数据项展示方法、装置、计算设备和介质。

背景技术

对于浏览器/服务器架构(B/S)的软件产品，尤其是信息安全领域的数据统计和分析服务软件产品，都需要一个大屏页面进行数据的可视化展示。在现有技术中通常使用定制开发的方式实现。定制开发的步骤一般为：编写重叠样式表(CSS)文件，设置元素定位相关样式类，然后在HTML页面文件中使用DIV元素设置CSS文件中已定义的样式类进行排版布局，最后加载数据内容到DIV元素内，可能是静态数据，例如，位置固定的图片、文字等，也可能是动态数据，例如，通过后台接口获取实时生成的各类折线图、柱状图、表格等数据。在实际应用时，当遇到产品面向的用户有特殊的数据展示需求时，现有技术方式只能重新定制开发页面以满足用户需求，事实上，很多用户都有特殊的页面布局要求，这无疑是增加了巨大的产品开发成本，不仅开发难度大，而且开发周期长，代码可维护性低。

通常，用户展现数据项时，一般将每个制作好的数据项通过调整大小、位置的方式进行摆放，以形成页面布局，但是该方法不能实现数据项布局的可重复利用性。在日后需要相同的数据项布局时，仍然需要基于新的数据重新调整数据项的位置和大小，费时费力，严重影响了工作效率。

发明内容

本申请的目的在于克服上述问题或者至少部分地解决或缓减解决上述问题。

根据本申请的一个方面，提供了一种数据项展示方法，包括：

页面布局生成步骤：响应于用户的选择操作，在页面区域内展示数据项以生成页面布局，其中，所述页面区域是基于超文本标记语言的表格标签对页面的单元格进行划分而形成的；

绑定步骤：响应于用户的保存操作，将所述数据项的标识与所述页面区域绑定；

数据持久化步骤：对绑定后的页面布局进行数据持久化操作。

该方法能够便于用户在对页面分区的基础上布置数据项目，从而使得数据得到更加集中的展示，有利于进行数据对比和分析。

可选地，所述页面布局生成步骤包括：

第三单元格选择步骤：监听单元格被选中的消息，在所述单元格的单元格标签中添加样式类，并调用所述样式类使得选中的单元格显示出区别于未选中的单元格的样式；

数据项列表显示步骤：响应于所述用户的编辑操作，缓存被选中的单元格的单元格标签，并且显示数据项列表；

数据项选择步骤：接收所述用户对所述数据项列表中的数据项的选择操作，将该数据项的标识添加到被选中的单元格的所述单元格标签中。

可选地，在所述数据项选择步骤中，所述将该数据项的标识添加到被选中的单元格的所述单元格标签中包括：在所述单元格标签添加隐藏的输入表单控件，其中，每一个数据项采用对应的输入表单控件进行保存，并且在被选中的单元格中显示用户所选择的数据项的名称。

可选地，在所述数据项选择步骤后，所述页面布局生成步骤还包括：数据项修改步骤：重复执行第三单元格选择步骤、数据项列表显示步骤和数据项选择步骤，在所述单元格中显示用户最新所选择的数据项的名称。

可选地，在所述绑定步骤中：所述将所述数据项的标识与所述页面区域绑定包括：序列化保存步骤：利用JSON对象将所述页面布局序列化保存，所述JSON对象中包括所述页面布局的标识和属性。

可选地，在所述序列化保存步骤之前，该方法还包括：空白单元格检验步骤：在所述页面布局中存在未被编辑的空白单元格的情况下，提示所述用户对该空白单元格进行编辑。

可选地，所述数据持久化步骤包括：基于AJAX异步请求，将所述页面布局传输给服务器进行数据持久化操作。

根据本申请的另一个方面，还提供了一种数据项展示装置，包括：

页面布局生成模块，其配置成用于响应于用户的选择操作，在页面区域内展示数据项以生成页面布局，其中，所述页面区域是基于超文本标记语言的表格标签对页面的单元格进行划分而形成的；

绑定模块，其配置成用于响应于用户的保存操作，将所述数据项的标识与所述页面区域绑定；

数据持久化模块，其配置成用于对绑定后的页面布局进行数据持久化操作。

该装置能够便于用户在对页面分区的基础上布置数据项目，从而使得数据得到更加集中的展示，有利于进行数据对比和分析。

根据本申请的另一个方面，还提供了一种计算设备，包括存储器、处理器和存储在所述存储器内并能由所述处理器运行的计算机程序，其中，所述处理器执行所述计算机程序时实现如上所述的方法的任一项。

根据本申请的另一个方面，还提供了一种计算机可读存储介质，优选为非易失性可读存储介质，其内存储有计算机程序，所述计算机程序在由处理器执行时实现如权上所述的方法的任一项。

根据本申请的另一个方面，还提供了一种计算机程序产品，包括计算机可读代码，当所述计算机可读代码由计算设备执行时，导致所述计算设备执行如上所述的方法的任一项。

根据下文结合附图对本申请的具体实施例的详细描述，本领域技术人员将会更加明了本申请的上述以及其他目的、优点和特征。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。后文将参照附图以示例性而非限制性的方式详细描述本申请的一些具体实施例。附图中相同的附图标记标示了相同或类似的部件或部分。本领域技术人员应该理解的是，这些附图未必是按比例绘制的。在附图中：

图1是运行根据本申请一个实施例的数据项展示方法的计算机装置硬件结构示意图；

图2是根据本申请的一个实施例的数据项展示方法的示意性流程图；

图3是根据本申请的一个实施例的方法的页面布局生成步骤的示意性流程图；

图4是根据本申请的一个实施例的方法的绑定步骤的示意性流程图；

图5是根据本申请的一个实施例的方法的单元格生成步骤的示意性流程图；

图6是根据本申请的一个实施例的方法的区域划分步骤的示意性流程图；

图7是根据本申请的一个实施例的方法的单元格合并步骤的示意性流程图；

图8是根据本申请的一个实施例的方法的取消合并步骤的示意性流程图；

图9是根据本申请的另一个实施例的数据项展示方法的示意性流程图；

图10是根据本申请的一个实施例的数据项展示装置的示意性框图；

图11是根据本申请的一个实施例的装置的页面布局生成模块的示意性框图；

图12是根据本申请的一个实施例的装置的绑定模块的示意性框图；

图13是根据本申请的一个实施例的装置的单元格生成模块的示意性框图；

图14是根据本申请的一个实施例的装置的区域划分模块的示意性框图；

图15是根据本申请的一个实施例的装置的单元格合并模块的示意性框图；

图16是根据本申请的另一个实施例的数据项展示装置的示意性框图；

图17是本申请的计算设备的一个实施例的框图；

图18是本申请的计算机可读存储介质的一个实施例的框图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例1

根据本申请实施例，还提供了一种页面布局生成方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例一所提供的方法实施例可以在移动终端、计算机终端或者类似的运算装置中执行。图1示出了一种用于本申请方法的计算机装置(或移动设备)的硬件结构框图。如图1所示，计算机装置10(或移动设备10)可以包括一个或多个处理器(图中采用102a、102b，……，102n来示出，处理器可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器104、以及用于通信功能的传输模块。除此以外，还可以包括：显示器、输入/输出接口(I/O接口)、通用串行总线(USB)端口(可以作为I/O接口的端口中的一个端口被包括)、网络接口、电源和/或相机。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，计算机装置10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

应当注意到的是上述一个或多个处理器和/或其他数据处理电路在本文中通常可以被称为“数据处理电路”。该数据处理电路可以全部或部分的体现为软件、硬件、固件或其他任意组合。此外，数据处理电路可为单个独立的处理模块，或全部或部分的结合到计算机装置10(或移动设备)中的其他元件中的任意一个内。如本申请实施例中所涉及到的，该数据处理电路作为一种处理器控制(例如与接口连接的可变电阻终端路径的选择)。

存储器104可用于存储应用软件的软件程序以及模块，如本申请实施例中页面布局生成方法对应的程序指令/数据存储装置，处理器通过运行存储在存储器104内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的应用程序的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至计算机装置10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机装置10的通信供应商提供的无线网络。在一个实例中，传输装置包括一个网络适配器(Network Interface Controller,NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置可以为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

显示器可以例如触摸屏式的液晶显示器(LCD)，该液晶显示器可使得用户能够与计算机装置10(或移动设备)的用户界面进行交互。

在上述运行环境下，本申请提供了一种数据项展示方法。图2是根据本申请的一个实施例的数据项展示方法的示意性流程图。该方法可以包括以下步骤：

S300页面布局生成步骤：响应于用户的选择操作，在页面区域内展示数据项以生成页面布局，其中，所述页面区域是基于超文本标记语言的表格标签对页面的单元格进行划分而形成的；

S400绑定步骤：响应于用户的保存操作，将所述数据项的标识与所述页面区域绑定，以生成页面布局；

S500数据持久化步骤：对绑定后的页面布局进行数据持久化操作。

该方法能够将用户设计的页面布局进行保存，有利于后续重复利用，节省了用户的时间，加快了数据展现的速度。该方法解决了现有方法中仅使用DIV通过元素定位方式进行分割布局时，操作DIV定位方式复杂，布局方式不够灵活多样，以及产品面向的用户不能控制大屏展示页面布局方式和内容的问题，便于用户在对页面分区的基础上布置数据项目，从而使得数据得到更加集中的展示，有利于进行数据对比和分析。用户能够对页面按照需要划分成适合数据展示的区域，划分的形状能够自己设计和调整，增加了产品的用户友好度。

图3是根据本申请的一个实施例的方法的页面布局生成步骤的示意性流程图。可选地，所述S300页面布局生成步骤包括：

S310第三单元格选择步骤：监听单元格被选中的消息，在所述单元格的单元格标签中添加样式类，并调用所述样式类使得选中的单元格显示出区别于未选中的单元格的样式；

S320数据项列表显示步骤：响应于所述用户的编辑操作，缓存被选中的单元格的单元格标签，并且显示数据项列表；

S330数据项选择步骤：接收所述用户对所述数据项列表中的数据项的选择操作，将该数据项的标识添加到被选中的单元格的所述单元格标签中。

采用该方法，用户能够在不同单元格中设置不同的数据项，从而丰富页面布局所呈现的内容，能够将不同的数据项集中在一个页面布局中显示，更有利于数据的比较，大大提升了数据和信息集成显示的效果，更有利于分析人员、业内专家、领导等对于数据的分析和判断。现有技术中，对于一种数据比较结果往往通过一个独立的图形、表格或者页面进行显示，用户想要将多个图形、表格显示在一块区域的时候，往往需要调整每个图形、表格的大小和位置，对布局进行设计，往往需要耗费时间和精力才能实现预期的显示效果。和现有技术相比，该方法能够将不同形式的图形、表格集中在一个大的页面布局中进行显示，仅需要用户提前划分单元格的区域即可，无需后续调整，节省了大量的时间，提高了报表、显示文档等文件的制作效率。

例如，接收用户编辑单元格的操作，在单元格切换为选中样式，诸如，绿色边框绿色背景后，接收用户对“编辑”按钮的点击或者选择操作，触发编辑操作函数的执行，该编辑功能函数实现的功能包括：缓存此时选中的单元格<td>元素对象；弹出对话框，该对话框内包含所有可选的数据项的名称，数据项的名称以列表形式展示。每个数据项还需带有业务逻辑所需的其他数据信息，例如，数据项在数据库中的唯一标识ID，或者该数据项的数据类型等，这些属性可按需配置。

可选地，在所述S330数据项选择步骤中，所述将该数据项的标识添加到被选中的单元格的所述单元格标签中包括：在所述单元格标签添加隐藏的输入表单控件，其中，每一个数据项采用对应的输入表单控件进行保存，并且在被选中的单元格中显示用户所选择的数据项的名称。

在一个可选实施方案中，在被选中的单元格中显示用户所选择的数据项的名称。在另一个可选实施方案中，在被选中的单元格中显示用户所选择的数据项的样例，该数样例可以根据所在页面区域的大小自动调整尺寸。例如，可以设置成数据项填满全部页面区域，或者填满页面区域的一部分，或者设置距离页面区域的边界距离值或者边界距离值范围值。

可选地，在所述S330数据项选择步骤后，所述S300页面布局生成步骤还包括：

S340数据项修改步骤：重复S310第三单元格选择步骤、S320数据项列表显示步骤和S330数据项选择步骤，以便用户修改单元格内数据项，在所述单元格中显示用户最新所选择的数据项的名称。

例如，当某个数据项被用户选中时，则将这个数据项的属性信息，例如标识ID、名称等业务逻辑所需数据添加到所选的单元格标签td中，存储的方式是在单元格<td>元素内添加隐藏的input表单控件，即<input type＝”hidden”/>，每个数据项使用一个input表单控件保存，并且单元格td元素会打印出所选数据项的名称，表示此单元格已被编辑过，若要修改显示的数据项，只需再次点击单元格，选择其他数据项即可。依次重复操作，可以编辑全部单元格。

图4是根据本申请的一个实施例的方法的绑定步骤的示意性流程图。可选地，在所述S400绑定步骤中：所述将所述数据项的标识与所述页面区域绑定包括：

S420序列化保存步骤：利用JSON对象将所述页面布局序列化保存，所述JSON对象中包括所述页面布局的标识和属性。

该方法能够将用户设计的页面布局固定成模板，从而便于后续再次利用，提高了设计的效率，避免了重复性劳动。

例如，响应用户的保存操作，序列化保存数据，将所有配置信息使用一个JSON对象保存。该JSON对象中包含此布局结构的ID。如果此次为新增操作，则ID为空值。JSON对象还可以包括但不限于：该页面布局的名称name、备注信息remark、总行数totalRows、总列数totalCols以及布局结构信息layout属性，如果有其它需要可拓展添加。其中layout为关键属性，保存了本次操作的页面布局的结构，为单元格对象的数组；单元格对象的属性包括但不限于：数据项ID、数据项的名称name、合并的单元格行数值rowspan、合并的单元格列数值colspan、初始时单元格的行序号rowIndex、初始时单元格的列序号colIndex、以及合并的单元格的行列序号列表，并且每一行单元格保存为一个数组。例如，对于一组6行8列的单元格，layout属性中便有6个数组，每个数组中包含这一行所有的单元格，如果没有单元格，则用空数组占位。

参见图4，在所述S420序列化保存步骤之前，该S400绑定步骤还可以包括：

S410空白单元格检验步骤：在所述页面布局中存在未被编辑的空白单元格的情况下，提示所述用户对该空白单元格进行编辑。

例如，确保每个单元格都被编辑之后，可进行保存操作，接收用户的“保存”操作，触发S420序列化保存步骤。可以在S420序列化保存步骤之前，校验页面布局中是否存在未被编辑的空白单元格，如果存在，则提示完成空白单元格的编辑后再进行保存，如果不存在，则进入正式保存操作。

采用该方法能够确保每个单元格都包括数据项内容，便于利用该页面布局生成数据显示内容时显示的信息完整，避免由于漏选数据项而重新进行页面布局。

可选地，所述S500数据持久化步骤可以包括：基于AJAX异步请求，将所述绑定后的页面布局传输给服务器进行数据持久化操作。

其中，请求的URL地址和数据持久化方式根据所处系统不同而不同，可以理解的是，该方法不局限于特定的数据储存方式和后台实现方式。

图9是根据本申请的另一个实施例的数据项展示方法的示意性流程图。可选地，在S300页面布局生成步骤前，该方法还可以包括：

S200区域划分步骤：基于超文本标记语言(HTML)的表格标签对页面的单元格进行划分，以形成页面区域。

该方法根据用户能够将页面划分为不同大小区域，便于根据数据项进行数据展示。

参见图9，可选地，在所述S200区域划分步骤之前，该方法还可以包括：

S100单元格生成步骤：响应于用户的单元格生成请求，对初始化的单元格进行重置，生成符合所述单元格生成请求中的行数和列数的单元格。

采用该方法，能够根据用户需要生成不同数量的单元格，便于用户在单元格中设置数据项。

该步骤可以使用HTML表单input控件进行参数交互，获取配置参数后使用jQuery封装的JavaScript类库插件生成与用户的单元格生成请求中的输入参数相一致的二维表格，完成单元格布局。可以理解的是，该方法也可以在S200区域划分步骤之前，显示初始化的单元格，该单元格可以是固定数量，例如，2行2列的表格；用户也可以设置初始化单元格的数量，例如，3行4列，并保存该初始化设置，以便新建页面布局时，初始化的表格数量与用户设置一致，从而用户不必每次都调整单元格数量，节省了用户调整单元格的时间。

图5是根据本申请的一个实施例的方法的单元格生成步骤的示意性流程图。可选地，所述S100单元格生成步骤可以包括：

S110生成请求接收步骤：接收用户的单元格生成请求，所述单元格生成请求中包括请求生成的单元格的行数和列数；

S120列生成步骤：基于超文本标记语言的行标签(tr)，生成一个行元素，所述行元素包括所述列数数量的单元格标签(td)；

S130行生成步骤：重复执行S120列生成步骤，直到满足所述行数；

S140字符串添加步骤：将所述列生成步骤和所述行生成步骤中生成的字符串添加到表格主体标签(tbody)中；

S150渲染步骤：通过浏览器的重新渲染，显示符合所述单元格生成请求的单元格。

该方法能够快速生成用户所需的单元格数量，生成适用于浏览器显示的超文本标记语言，并且通过浏览器显示更新后的单元格数量，增加了单元格和页面布局设计的灵活性。

例如，系统默认的单元格的行数为2，列数为2，用户需要将预设参数调整为行数6，列数8。响应于用户对单元格是设置，弹出对话框，接收用户对单元格行数和列数的输入数值，以及用户点击“重置表格”按扭的操作，从而触发单元格的重置。重置单元格方法通过JavaScript函数Function实现，获取用户输入的行数值6和列数值8，基于行标签<tr>，使用循环语句生成6个行元素，即<tr>元素，每个行元素内包含8个单元格标签<td>，并且每个<td>元素设置的属性值可以包括：colspan、rowspan、data-colindex、data-rowindex属性，其中，colspan为单元格合并的列数值，初始状态下为1；rowspan为单元格合并的行数值，初始为1；data-colindex表示当前单元格所在的列序号，从0开始计数，；data-rowindex表示当前单元格所在的行序号，从0开始计数。例如，单元格第三行从左数第二个单元格的行列序号可以表示为：data-colindex＝“1”；data-rowindex＝“2”；data-colindex和data-rowindex在初始化操作后不会变更。将这些生成的HTML的DOM字符串添加到表格主体标签<table>的元素，即<tbody>元素内，通过HTML重新渲染即可以得到6行8列的表格。

图6是根据本申请的一个实施例的方法的区域划分步骤的示意性流程图。可选地，所述S200区域划分步骤可以包括：

S210第一单元格选择步骤：监听至少两个相邻的单元格被选中的消息，在所述至少两个相邻的单元格的单元格标签中添加样式类，并调用所述样式类使得选中的单元格显示出区别于未选中的单元格的样式；

S220单元格合并步骤：响应于所述用户的合并单元格操作，查找所有包括样式类的单元格标签，基于查找结果生成数组列表(tds)，所述数组列表的变量(mergeCells)包括行序号和列序号，计算合并的总行数和总列数，保留待合并的一个单元格的行序号和列序号，将该总行数和总列数分别保存到该单元格的横跨行数标签和横跨列数标签，将所述数组列表保存到该单元格的合并数据标签属性(data-merge)中，将其他单元格从页面布局中删除。

利用该方法，用户能够自主合并单元格，从而使得按照行列均匀分布的单元格变成不同区域大小的各种布局，以适应不用数据的展示，增加了页面布局设计的灵活性，不用每次都通过重新设计和编程实现，提高了数据处理和展示的效率。

例如，系统可以监听单元格的<td>元素是否被选中，可以理解的是，也可以监听其他元素。若被选中，则在此<td>元素的class属性中添加样式类，例如tcs-selected。用户可以通过如下方式中的一种或几种同时选中多个相邻的单元格：通过拖拽光标同时选中多个相邻的单元格；通过快捷方式和光标移动相互配合；通过一个或多个手指的滑动。在显示装置上能够呈现被选中的单元格样式的变化，样式包括但不限于：背景颜色、形状、显示效果。诸如，变成绿色边框绿色背景，或者形状略微扩大，或者呈现立体效果等。而未选择的单元格仍然保持原来颜色和样式，例如，黑色边框白色背景，或者平面效果。此功能可以使用tablecellsselection工具完成，该工具是一个基于jQuery的工具插件，可以理解的是，也使用其他可实现类似功能的插件实现。

图7是根据本申请的一个实施例的单元格合并步骤的示意性流程图。可选的，所述S220单元格合并步骤可以包括：

S221数组列表生成步骤：响应于所述用户的合并单元格操作，查找所有包括样式类的单元格标签(td)，基于查找结果生成数组列表(tds)，该数组列表的变量(mergeCells)用于缓存待合并的单元格的行序号和列序号，其中，所述行序号和所述列序号构成二维数组；

S222属性判断步骤：遍历所述数组列表中的变量，在所述待合并的单元格为已经合并后的单元格的情况下，读取该单元格的合并数据标签属性(data-merge)，其中，该合并数据标签中保存组成该单元格的单元格的行序号和列序号数组，将该行序号和列序号数组添加到所述数组列表的变量中；在所述待合并的单元格为未被合并的单元格的情况下，将该单元格的行序号和列序号组成二维数组添加到所述数组列表的变量中；

S223合并信息获取步骤：遍历所述数组列表的变量，获得待合并的单元格的总行数和总列数，最小行序号和最小列序号；

S224单元格删除步骤：遍历所述数组列表，在单元格的行序号等于所述最小行序号并且列序号等于最小行序号的情况下，保留该单元格，将该总行数和总列数分别保存到该单元格的横跨行数标签和横跨列数标签，将所述数组列表保存到该单元格的合并数据标签属性(data-merge)中；在单元格的行序号不等于所述最小行序号或者列序号不等于最小行序号的情况下，将该单元格从页面布局中删除。

该方法能够将较小的单元格合并成较大的单元格，便于显示不同类型的数据项，从而更有利于数据的显示，不用于以往利用表格工具实现的表格合并，该方法能够直接制作出能够通过浏览器显示的单元格区域，适合直接在大屏幕或者报表中使用，而无需借助其他表格制作软件制作图表后再通过复制粘贴或者调用接口的方式显示数据。

例如，监听到用户选择了第一行从左开始的前三个单元格和第二行前三个单元格，共计6个单元格，此时这6个单元格的class属性都含有tcs-selected样式类，显示装置所呈现的视觉表现为：这6个单元格的区域变成绿色，此时接收用户的点击“合并”按钮的操作，调用合并功能函数，将该6个单元格合并成1个较大单元格。该合并功能函数的操作可以包括，先查找单元格<table>元素内所有含有“tcs-selected”样式类的<td>元素，得到被选中单元格的数组列表，该数组列表包括mergeCells变量。初始化mergeCells为空数组，利用该变量缓存被合并的单元格的行序号和列序号，行列序号为包括两个数据的数组。数组中第一个数据表示行序号，第二个数据表格列序号。例如，第一行第二个单元格的行列序号则表示为：[0,1]。

遍历被选中单元格的数组列表，如果某个单元格是合并操作后的单元格，此单元格的data-merge属性会保存着被它合并掉的单元格的行列序号列表，例如，在前一次合并操作中，该单元格是由6个小单元格合并后的结果，此时该单元格的data-merge属性中会有6个单元格的行序号和列序号。读取该6个单元格的行序号和列序号，逐个添加到mergeCells数组中。

如果此单元格从未被合并过，则将该单元格的行序号data-rowindex属性值以及列序号data-colindex属性值，组成单元格行列序号数组。例如，该单元格data-rowindex＝“1”，data-colindex＝“2”，则行序号和列序号组成的数组为[1,2]；再将该数组添加到mergeCells数组中。

遍历mergeCells数组，通过比较行列大小获取此次操作要合并的单元格的行数rowspanValue，要合并的单元格的列数colspanValue，最小的行序号值rowIndex，以及最小的列序号值colIndex。再次遍历数组列表tds，如果某个单元格的data-rowindex属性值等于rowIndex并且data-colindex属性值等于colIndex，那这个单元格就是本次合并操作要留下的单元格，便将此单元格的colspan属性设置为colspanValue，rowspan属性设置为rowspanValue，data-merge属性设置为mergeCells数组的JSON字符串值；如果单元格的行序号和列序号与rowIndex和colIndex不匹配，则将该单元格从布局表格中删除。

可选地，所述S200区域划分步骤还可以包括：

S230取消合并步骤：监听至少一个单元格被选中的消息，响应于用户取消合并的操作，将被选中的单元格恢复为组成该单元格的若干单元格。

图8是根据本申请的一个实施例的取消合并步骤的示意性流程图。该S230取消合并步骤可以包括：

S231第二单元格选择步骤：监听至少一个单元格被选中的消息，调用在所述至少一个单元格的单元格标签(td)中的所述样式类(tcs-selected)，使得选中的单元格显示出区别于未选中的单元格的样式；

S232单元格取消合并步骤：响应于所述用户的取消合并操作，获取被选中所述至少一个单元格的所述单元格标签，其中，所述单元格标签的合并数据标签属性中包括组成该至少一个单元格的单元格的行序号和列序号，根据该行序号和列序号，将对应的单元格标签添加到超文本标记语言的相应位置，删除所述至少一个单元格，通过浏览器的重新渲染，显示取消合并后的单元格。

该方法允许用户对单元格的合并方式进行任意次数修改和调整，从而实现满足用户需求的最优页面布局，从而使得布局方式更加灵活。

例如，某个合并过的单元格不符合设计目标结构要求时，用户可以修改此前的合并方式。监听用户对单元格的选择操作，调用在所述至少一个单元格的单元格标签(td)中的所述样式类(tcs-selected)，使得选中的单元格显示出区别于未选中的单元格的样式；接收用户的“取消合并”操作，触发执行取消合并函数，该取消合并函数可以采用以下方法实现：获取选中的单元格的单元格标签<td>，由于是发生过合并操作的，所以此单元格的data-merge属性中含有合并过的单元格的行序号和列序号，遍历data-merge中的行列序号列表，根据行序号和列序号，将单元格属性添加到指定位置，例如，行列序号列中包括数组[2,1]，则在表征页面布局的超文本标记语言的第三行第一个单元格后面添加一个<td>单元格，并设置colspan为1，rowspan为1，data-rowindex为2，data-colindex为1。待行列序号列表的数组全部遍历结束后，删除当前选中的单元格，完成取消合并操作。

通过合并操作和取消合并操作的配合，即可得到用户所需的布局结构。

参见图9，在所述S500数据持久化步骤之后，该方法还可以包括：

S600页面布局加载步骤：基于用于对展示页面布局的选择，将绑定后的页面布局的标识发送给服务器，接收服务器传送的所述页面布局，并加载到浏览器工作内存中；

S700页面布局还原步骤：基于所述页面布局的属性生成单元格的单元格标签并且根据所述属性拼接DOM字符串，将所述字符串插入到表格主体标签(tbody)中，经过浏览器的渲染后显示所述页面布局。

该方法能够将用户设计好的页面布局重复显示，以达到一个页面布局重复多次利用的效果，其中，每次页面布局可以根据数据的不同呈现不同图案，但是页面布局的整体结构不会发生根本变化。

例如，用户可以设置一个或者多个页面布局并保存，在使用时，可以选择一个或者页面布局进行展示，进行展示工作前，系统读取之前已经经过持久化处理的数据，并加载到浏览器工作内存中。获取数据方式不固定，可以根据自身系统适配。读取出的数据应和保存操作格式化的数据一致。例如，以一组6行8列的单元格为例，根据totalRows和totalCols属性可知，初始时，布局表格为6行8列的表格，layout属性中有6个数组，每个数组代表一行单元格<tr>元素，若数组的长度不为0，则依次将数组中的对象作为一个单元格<td>元素添加。例如，layout属性数组中第一个数组的第一个对象，设置此<td>元素的colspan属性值为3，rowspan属性值为2，data-rowindex属性值为0，data-colindex属性值为0，data-merge属性值为字符串“[[0,0],[0,1],[0,2],[1,0],[1,1],[1,2]]”，再设置<td>元素内的文本节点为“趋势图”，并添加input隐藏表单控件存储id值“1101”，此时便完成一个单元格的还原。如果layout属性数组中的某个对象是空数组，例如layout属性中第4个对象，则此行单元格只有<tr>元素没有<td>元素。遍历layout属性中的所有对象后，即可将整个布局表格的配置数据解析还原为DOM字符串，将此DOM字符串插入到布局表格<table>元素的子元素<tbody>中，经过浏览器渲染后即可展现前阶段配置的页面布局。

本申请提供的方法可以实现各种各样的页面布局，当想要切换大屏页面布局时，添加一个页面布局就可以实现，不需要技术人员重新设计样式，编写DIV元素定位等代码，节省人力物力，更缩短了开发进程。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

实施例2

根据本申请实施例，还提供了一种数据项展示装置，该装置是与实施例1所述的方法对应的装置。图10是根据本申请的一个实施例的数据项展示装置的示意性框图。该装置可以包括：

页面布局生成模块300，其配置成用于响应于用户的选择操作，在页面区域内展示数据项以生成页面布局，其中，所述页面区域是基于超文本标记语言的表格标签对页面的单元格进行划分而形成的；

绑定模块400，其配置成用于响应于用户的保存操作，将所述数据项的标识与所述页面区域绑定；

数据持久化模块500，其配置成用于对绑定后的页面布局进行数据持久化操作。

该方法能够将用户设计的页面布局进行保存，有利于后续重复利用，节省了用户的时间，加快了数据展现的速度。该方法解决了现有方法中仅使用DIV通过元素定位方式进行分割布局时，操作DIV定位方式复杂，布局方式不够灵活多样，以及产品面向的用户不能控制大屏展示页面布局方式和内容的问题，便于用户在对页面分区的基础上布置数据项目，从而使得数据得到更加集中的展示，有利于进行数据对比和分析。用户能够对页面按照需要划分成适合数据展示的区域，划分的形状能够自己设计和调整，增加了产品的用户友好度，并且能够将用户设计的页面布局进行保存，有利于后续重复利用，节省了用户的时间，加快了数据展现的速度。

图11是根据本申请的一个实施例的装置的页面布局生成模块的示意性框图。可选地，所述页面布局生成模块300可以包括：

第三单元格选择模块310，其配置成用于监听单元格被选中的消息，在所述单元格的单元格标签中添加样式类，并调用所述样式类使得选中的单元格显示出区别于未选中的单元格的样式；

数据项列表显示模块320，其配置成用于响应于所述用户的编辑操作，缓存被选中的单元格的单元格标签，并且显示数据项列表；

数据项选择模块330，其配置成用于接收所述用户对所述数据项列表中的数据项的选择操作，将该数据项的标识添加到被选中的单元格的所述单元格标签中。

该装置在“编辑”按钮上绑定添加或修改单元格展示数据项功能的函数，在用户点击“编辑”按钮时，使用列表形式显示所有候选的数据项名称，在用户点击具体的数据项时，将此数据项名称以及预览图填充到选中的单元格中。数据项可以包括但不限于表现数据的样式图案，例如，饼状图、柱形图、折线图、曲线图、散点图等，这些图案可以是二维、三维或者更高维度。

可选地，在所述数据项选择模块330中，所述将该数据项的标识添加到被选中的单元格的所述单元格标签中包括：

在所述单元格标签添加隐藏的输入表单控件，其中，每一个数据项采用对应的输入表单控件进行保存，并且在被选中的单元格中显示用户所选择的数据项的名称。

可选地，所述页面布局生成模块300还可以包括：

数据项修改模块340，其配置成用于重复运行第三单元格选择模块310、数据项列表显示模块320和数据项选择模块330，在所述单元格中显示用户最新所选择的数据项的名称。

图12是根据本申请的一个实施例的装置的绑定模块的示意性框图。可选地，在所述绑定模块400还可以包括：

序列化保存模块420，其配置成用于利用JSON对象将所述页面布局序列化保存，所述JSON对象中包括所述页面布局的标识和属性。

可选地，该绑定模块400还可以包括：

空白单元格检验模块410，其配置成用于在所述页面布局中存在未被编辑的空白单元格的情况下，提示所述用户对该空白单元格进行编辑。

可选地，所述数据持久化模块500用于：基于AJAX异步请求，将绑定后的页面布局传输给服务器进行数据持久化操作。

图16是根据本申请的另一个实施例的数据项展示装置的示意性框图。可选地，该装置还可以包括：

区域划分模块200，其配置成用于基于超文本标记语言(HTML)的表格标签对页面的单元格进行划分，以形成页面区域。

该方法根据用户能够将页面划分为不同大小区域，便于根据数据项进行数据展示。

该装置可以使用HTML表单input控件进行参数交互，获取配置参数后使用jQuery封装的JavaScript类库插件生成与输入参数一致的二维表格，完成初始化布局表格；监听用户操作，并标记选中的单元格，用某个特定CSS样式的有无来区分单元格的选中与未选中状态。

参见图16，可选地，该装置还可以包括：

单元格生成模块100，与区域划分模块连接，其配置成用于响应于用户的单元格生成请求，对初始化的单元格进行重置，生成符合所述单元格生成请求中的行数和列数的单元格。

图13是根据本申请的一个实施例的装置的单元格生成模块的示意性框图。可选地，所述单元格生成模块100包括：

生成请求接收模块110，其配置成用于接收用户的单元格生成请求，所述单元格生成请求中包括请求生成的单元格的行数和列数；

列生成模块120，其配置成用于基于超文本标记语言的行标签，生成一个行元素，所述行元素包括所述列数数量的单元格标签；

行生成模块130，其配置成用于重复执行列生成模块，直到满足所述行数；

字符串添加模块140，其配置成用于将所述列生成模块和所述行生成模块中生成的字符串添加到表格主体标签中；

渲染模块150，其配置成用于通过浏览器的重新渲染，显示符合所述单元格生成请求的单元格。

该装置能够快速生成用户所需的单元格数量，生成适用于浏览器显示的超文本标记语言，并且通过浏览器显示更新后的单元格数量，增加了单元格和页面布局设计的灵活性。

可选地，所述单元格标签包括以下属性值：单元格合并的列数值，单元格合并的行数值，当前单元格所在的列序号和当前单元格所在的行序号。

图14是根据本申请的一个实施例的装置的区域划分模块的示意性框图。可选地，所述区域划分模块200可以包括：

第一单元格选择模块210，其配置成用于监听至少两个相邻的单元格被选中的消息，在所述至少两个相邻的单元格的单元格标签中添加样式类，并调用所述样式类使得选中的单元格显示出区别于未选中的单元格的样式；

单元格合并模块220，其配置成用于响应于所述用户的合并单元格操作，查找所有包括样式类的单元格标签，基于查找结果生成数组列表，所述数组列表的变量包括行序号和列序号，计算合并的总行数和总列数，保留待合并的一个单元格的行序号和列序号，将该总行数和总列数分别保存到该单元格的横跨行数标签和横跨列数标签，将所述数组列表保存到该单元格的合并数据标签属性中，将其他单元格从页面布局中删除。

该装置能够监听页面上发生的点击，选中单元格事件，在选中的单元格上追加特定的CSS样式，以此标记被选中的单元格；通过在“合并”按钮上绑定合并单元格功能函数，在页面布局上寻找含有特定标记样式的单元格，如果布局表格中含有两个及以上的相邻的单元格含有特定标记样式，则将这些单元格融合成一个单元格，其中，选中的单元格，即有标记样式的单元格的面积之和与合并后的单元格的面积相等，合并后的单元格的轮廓为所有选中的单元格的外围轮廓。

利用该装置，用户能够自主合并单元格，从而使得按照行列均匀分布的单元格变成不同区域大小的各种布局，以适应不用数据的展示，增加了页面布局设计的灵活性，不用每次都通过重新设计和编程实现，提高了数据处理和展示的效率。

图15是根据本申请的一个实施例的装置的单元格合并模块的示意性框图。可选地，所述单元格合并模块220可以包括：

数组列表生成模块221，其配置成用于响应于所述用户的合并单元格操作，查找所有包括样式类的单元格标签，基于查找结果生成数组列表，该数组列表的变量用于缓存待合并的单元格的行序号和列序号，其中，所述行序号和所述列序号构成二维数组；

属性判断模块222，其配置成用于遍历所述数组列表中的变量，在所述待合并的单元格为已经合并后的单元格的情况下，读取该单元格的合并数据标签属性，其中，该合并数据标签中保存组成该单元格的单元格的行序号和列序号数组，将该行序号和列序号数组添加到所述数组列表的变量中；在所述待合并的单元格为未被合并的单元格的情况下，将该单元格的行序号和列序号组成二维数组添加到所述数组列表的变量中；

合并信息获取模块223，其配置成用于遍历所述数组列表的变量，获得待合并的单元格的总行数和总列数，最小行序号和最小列序号；

单元格删除模块224，其配置成用于遍历所述数组列表，在单元格的行序号等于所述最小行序号并且列序号等于最小行序号的情况下，保留该单元格，将该总行数和总列数分别保存到该单元格的横跨行数标签和横跨列数标签，将所述数组列表保存到该单元格的合并数据标签属性中；在单元格的行序号不等于所述最小行序号或者列序号不等于最小行序号的情况下，将该单元格从页面布局中删除。

可选地，所述区域划分模块200还可以包括：取消合并模块230，该模块可以包括：

第二单元格选择模块231，其配置成用于监听至少一个单元格被选中的消息，调用在所述至少一个单元格的单元格标签(td)中的所述样式类(tcs-selected)，使得选中的单元格显示出区别于未选中的单元格的样式；

单元格取消合并模块232，其配置成用于响应于所述用户的取消合并操作，获取被选中所述至少一个单元格的所述单元格标签，其中，所述单元格标签的合并数据标签属性中包括组成该至少一个单元格的单元格的行序号和列序号，根据该行序号和列序号，将对应的单元格标签添加到超文本标记语言的相应位置，删除所述至少一个单元格，通过浏览器的重新渲染，显示取消合并后的单元格。

该装置在“取消合并”按钮上绑定取消合并单元格功能的函数，在按钮被用户点击“取消合并”按钮时，在布局表格上寻找第一个含有特定标记样式的单元格，并且此单元格曾发生过合并操作，便将此单元格恢复为合并操作之前若干个初始面积大小的单元格。

该装置允许用户对单元格的合并方式进行任意次数修改和调整，从而实现满足用户需求的最优页面布局，从而使得布局方式更加灵活。

参见图16，可选地，该装置还可以包括：

页面布局加载模块600，其配置成用于基于用于对展示页面布局的选择，将所述页面布局的标识发送给服务器，接收服务器传送的所述页面布局，并加载到浏览器工作内存中；

页面布局还原模块700，其配置成用于基于所述页面布局的属性生成单元格的单元格标签并且根据所述属性拼接DOM字符串，将所述字符串插入到表格主体标签中，经过浏览器的渲染后显示所述页面布局。

该装置能够为用户提供配置选择，基于用户的设计获得丰富多样而且清晰美观的大屏页面，可轻易应对各种应用场景，解决特殊需求带来的繁重复杂的工作量，减少开发成本，使产品代码更具有稳健性。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

实施例3

本申请的实施例的一个方面提供了一种计算设备，参照图17，该计算设备包括存储器1120、处理器1110和存储在所述存储器1120内并能由所述处理器1110运行的计算机程序，该计算机程序存储于存储器1120中的用于程序代码的空间1130，该计算机程序在由处理器1110执行时实现用于执行任一项根据本申请的方法步骤1131。

本申请的实施例的一个方面还提供了一种计算机可读存储介质。参照图18，该计算机可读存储介质包括用于程序代码的存储单元，该存储单元设置有用于执行根据本申请的方法步骤的程序1131’，该程序被处理器执行。

本申请实施例的一个方面还提供了一种包含指令的计算机程序产品，包括计算机可读代码，当所述计算机可读代码由计算设备执行时，导致所述计算设备执行如上所述的方法。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、获取其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

专业人员应该还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分步骤是可以通过程序来指令处理器完成，所述的程序可以存储于计算机可读存储介质中，所述存储介质是非短暂性(英文：non-transitory)介质，例如随机存取存储器，只读存储器，快闪存储器，硬盘，固态硬盘，磁带(英文：magnetic tape)，软盘(英文：floppy disk)，光盘(英文：optical disc)及其任意组合。

以上所述，仅为本申请较佳的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应该以权利要求的保护范围为准。

Claims (10)

1.一种数据项展示方法，包括：

页面布局生成步骤：响应于用户的选择操作，在页面区域内展示数据项以生成页面布局，其中，所述页面区域是基于超文本标记语言的表格标签对页面的单元格进行划分而形成的；

绑定步骤：响应于用户的保存操作，将所述数据项的标识与所述页面区域绑定；和

数据持久化步骤：对绑定后的页面布局进行数据持久化操作。

2.根据权利要求1所述的方法，其特征在于，所述页面布局生成步骤包括：

第三单元格选择步骤：监听单元格被选中的消息，在所述单元格的单元格标签中添加样式类，并调用所述样式类使得选中的单元格显示出区别于未选中的单元格的样式；

数据项列表显示步骤：响应于所述用户的编辑操作，缓存被选中的单元格的单元格标签，并且显示数据项列表；和

数据项选择步骤：接收所述用户对所述数据项列表中的数据项的选择操作，将该数据项的标识添加到被选中的单元格的所述单元格标签中。

3.根据权利要求2所述的方法，其特征在于，在所述数据项选择步骤中，所述将该数据项的标识添加到被选中的单元格的所述单元格标签中包括：

在所述单元格标签添加隐藏的输入表单控件，其中，每一个数据项采用对应的输入表单控件进行保存，并且在被选中的单元格中显示用户所选择的数据项的名称。

4.根据权利要求2所述的方法，其特征在于，在所述数据项选择步骤后，所述页面布局生成步骤还包括：

数据项修改步骤：重复执行第三单元格选择步骤、数据项列表显示步骤和数据项选择步骤，在所述单元格中显示用户最新所选择的数据项的名称。

5.根据权利要求1至4的任一项所述的方法，其特征在于，在所述绑定步骤中：所述将所述数据项的标识与所述页面区域绑定包括：

序列化保存步骤：利用JSON对象将所述页面布局序列化保存，所述JSON对象中包括所述页面布局的标识和属性。

6.根据权利要求5所述的方法，其特征在于，在所述序列化保存步骤之前，该方法还包括：

空白单元格检验步骤：在所述页面布局中存在未被编辑的空白单元格的情况下，提示所述用户对该空白单元格进行编辑。

7.根据权利要求1所述的方法，其特征在于，所述数据持久化步骤包括：

基于AJAX异步请求，将所述页面布局传输给服务器进行数据持久化操作。

8.一种数据项展示装置，包括：

页面布局生成模块，其配置成用于响应于用户的选择操作，在页面区域内展示数据项以生成页面布局，其中，所述页面区域是基于超文本标记语言的表格标签对页面的单元格进行划分而形成的；

绑定模块，其配置成用于响应于用户的保存操作，将所述数据项的标识与所述页面区域绑定；和

数据持久化模块，其配置成用于对绑定后的页面布局进行数据持久化操作。

9.一种计算设备，包括存储器、处理器和存储在所述存储器内并能由所述处理器运行的计算机程序，其中，所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述的方法。

10.一种计算机可读存储介质，优选为非易失性可读存储介质，其内存储有计算机程序，所述计算机程序在由处理器执行时实现如权利要求1至7中任一项所述的方法。