CN104933019A - 一种列表生成的方法及装置 - Google Patents

Abstract

本发明公开一种列表生成的方法及装置，涉及计算机技术领域，可以解决生成列表时工作量大的问题。本发明实施例通过使用JavaScript以标签的形式在后台封装列表对象；在前端页面设置标签，将标签与后台的列表对象相关联；在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表。本发明实施例提供的方案适于生成列表时采用。

Description

一种列表生成的方法及装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种列表生成的方法及装置。

背景技术

随着网络的发展，浏览器的应用越来越广泛，在浏览器的应用过程中，经常需要以列表的形式展示一些信息。目前，在生成列表时开发人员需要编写大量的代码，具体而言，需要编写用于调用每个单元格样式的代码，还需要为每个单元格编写用于加载数据的代码，每次使用列表还需要编写大量代码以支持列表的正常显示和使用，此外，随着浏览器种类越来越多，不同内核的浏览器所支持的DOM(Document Object Model，文档对象模型)存在差异，还需要编写大量用于兼容浏览器之间差异的代码。

然而，代码量非常庞大会导致代码出现错误的概率变大，在维护列表时，还需从大量的代码中查找并修改存在问题的代码，使得生成列表的所需的工作量非常大。

发明内容

本发明的实施例提供一种页面列表生成的方法及装置，可以解决由于代码量庞大而导致的生成列表工作量大的问题。

为达到上述目的，本发明的实施例采用如下技术方案：

一方面，本发明的实施例提供一种列表生成的方法，包括：

使用脚本语言JavaScript以标签的形式在后台封装列表对象；

在前端页面设置标签，将所述标签与后台的列表对象相关联；

在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表。

在本发明的另一实施例中，所述使用JavaScript以标签的形式在后台封装列表对象，包括：

提取不同列表中相同的功能以标签的形式封装成方法；

分别为每个列表生成一个唯一的标识符；

根据每个列表的差异部分，分别以标签的形式生成每个标识符对应的属性及方法。

在本发明的另一实施例中，所述在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表，包括：

在前端页面上调用标签；

为被调用的标签添加属性；

通过所述被调用的标签加载从后台接收到的脚本语言对象表示法JSON数据；

根据所述JSON数据以及所述被调用的标签的属性自动生成列表。

在本发明的另一实施例中，所述列表中的每个元素分别与各自对应的事件绑定。

在本发明的另一实施例中，所述标签为tag标签。

另一方面，本发明的实施例提供一种列表生成的装置，包括：

封装单元，用于使用JavaScript以标签的形式在后台封装列表对象；

设置单元，用于在前端页面设置标签，将所述标签与后台的列表对象相关联；

调用单元，用于在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表。

在本发明的另一实施例中，所述封装单元，还用于提取不同列表中相同的功能以标签的形式封装成方法；分别为每个列表生成一个唯一的标识符；根据每个列表的差异部分，分别以标签的形式生成每个标识符对应的属性及方法。

在本发明的另一实施例中，所述调用单元，还用于在前端页面上调用标签；为被调用的标签添加属性；通过所述被调用的标签加载从后台接收到的JSON数据；根据所述JSON数据以及所述被调用的标签的属性自动生成列表。

在本发明的另一实施例中，所述列表中的每个元素分别与各自对应的事件绑定。

在本发明的另一实施例中，所述标签为tag标签。

本发明实施例提供的列表生成的方法及装置，使用JavaScript以标签的形式在后台封装列表对象，然后在前端页面设置标签，将标签与后台的列表对象相关联；在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表。与现有技术中由于生成列表时需要编写并维护大量代码而导致生成列表工作量的相比，本发明使用JavaScript以标签的形式在后台封装列表对象，使用标签的形式封装列表对象提高了代码的复用率，可以减少代码量，且在前端页面上调用标签就能够加载后台数据并自动生成列表，无需开发人员手动编写代码生成列表对象，减小了生成列表的工作量。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种列表生成的方法流程图；

图2为本发明实施例提供的另一种列表生成的方法流程图；

图3为本发明实施例提供的另一种列表生成的方法流程图；

图4为本发明实施例提供的列表生成的方法中列表初始化的方法流程图；

图5为本发明实施例提供的一种列表生成的装置的逻辑结构示意图。

具体实施方式

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

为了减小生成列表时的工作量，本发明实施例提供一种列表生成的方法，如图1所示，该方法包括：

101、使用JavaScript(脚本语言)以标签的形式在后台封装列表对象。

在本发明实施例中，标签可以为tag标签。

102、在前端页面设置标签，将标签与后台的列表对象相关联。

需要说明的是，将标签与后台的列表对象相关联以使得通过调用某个标签就可以接收该标签对应的列表对象，其中，接收到的该标签对应的列表对象是以数据的形式表示的。

103、在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表。

值得说明的是，列表中的每个元素分别与各自对应的事件绑定，例如，列表对象为每个行和单元格的选中及取消选中都绑定了事件，每次执行选中或者取消选中的动作都会触发相关事件，并将需要的操作对象的信息更新到相关的属性中，当需要获取选中的行和单元格的信息时，只需要读取对应属性的值就可以获取到所需要的信息。

本发明实施例提供的列表生成的方法，使用JavaScript以标签的形式在后台封装列表对象，然后在前端页面设置标签，将标签与后台的列表对象相关联；在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表。与现有技术中由于生成列表时需要编写并维护大量代码而导致生成列表工作量的相比，本发明使用JavaScript以标签的形式在后台封装列表对象，使用标签的形式封装列表对象提高了代码的复用率，可以减少代码量，且在前端页面上调用标签就能够加载后台数据并自动生成列表，无需开发人员手动编写代码生成列表对象，减小了生成列表的工作量。

为了提高代码复用率，以减少生成列表时的工作量，在本发明实施例提供的另一种实现方式中，如图2所示，上述步骤101、使用JavaScript以标签的形式在后台封装列表对象具体可以实现为下述步骤1011至1013。

1011、提取不同列表中相同的功能以标签的形式封装成方法。

由于不同页面的列表的大部分功能是相同的，所以可以将相同的功能提取出来，使用标签的方式实现相同的列表功能的封装，这样就无需为每个列表编写重复的代码。

1012、分别为每个列表生成一个唯一的标识符。

值得说明的是，不同的列表之间存在差异，所以需要为每个列表分别生成一个标识符，用于标识列表的差异部分。

1013、根据每个列表的差异部分，分别以标签的形式生成每个标识符对应的属性及方法。

本发明实施例提供的列表生成的方法，提取不同列表中相同的功能以标签的形式封装成方法，再分别为每个列表生成一个唯一的标识符，然后根据每个列表的差异部分，分别以标签的形式生成每个标识符对应的属性及方法。与现有技术中由于生成列表时需要编写并维护大量代码而导致生成列表工作量的相比，将不同列表中的相同的功能封装成方法，每个列表都能调用相同功能的这一部分代码，就无需为每个列表编写重复的代码，提高了代码的复用率，每个列表差异的部分都有与标识符对应的属性和方法，在生成列表时，只需通过标签调用列表共同功能的数据以及根据标识符调用差异部分的数据就能够生成列表，减小了生成列表时的工作量。

为了减小生成列表的工作量，实现自动生成列表，在本发明实施例提供的另一种实现方式中，如图3所示，上述步骤103、在前端页面上调用标签，以使得被调用的标签加载后台数据并自动生成列表，具体可以实现为下述步骤1031至1034。

1031、在前端页面上调用标签。

1032、为被调用的标签添加属性。

1033、通过被调用的标签加载从后台接收到的JSON(JavaScript ObjectNotation,JavaScript对象表示法)数据。

1034、根据JSON数据以及被调用的标签的属性自动生成列表。

本发明实施例提供的列表生成的方法，在生成列表时，只需在前端页面上调用一个标签，并为该标签添加一些必须的属性，该标签就会自动加载从后台接收到的JSON数据，并根据接收到的JSON数据以及标签的属性，自动生成列表显示，免去了开发人员对于列表操作事件代码的编写，由于采用标签的形式实现了内容和显示的分离，使得开发人员即使不了解标签的具体实现也可以正常调用标签，减小了列表生成时的工作量。

为了实现列表标签，需要进行列表标签的初始化，所以本发明实施例还提供列表生成方法中的列表标签初始化的方法，如图4所示，该方法包括：

401、浏览器中的页面生成后，服务器加载标签配置信息。

其中，配置信息包括列表的表头、列表展示字段以及列表的排序字段等内容。

402、根据配置信息初始化列表对象。

403、判断是否使用分页，若使用分页，则执行步骤404；若不使用分页，则执行步骤405。

404、将分页模块配置作为加载参数，之后执行步骤406。

其中，加载参数至少包括总页数、当前页数以及每页条数。

405、将加载参数设置为空，之后执行步骤406。

406、使用加载参数向后台请求数据。

其中，向后台请求的数据为列表展示需要的数据。

407、判断请求数据是否成功，若成功，则执行下述步骤408-410；若失败，则执行下述步骤411。

408、使用数据封装HTML(Hyper Text Markup Language，超级文本标记语言)静态代码，并生成行标记为每一行操作提供接口。

409、以列头信息标记扩展列对象，为列操作提供接口。

其中，扩展列是指列的展示和列的隐藏可设置，在列头信息中标记需要隐藏的列以及需要展示的列。列头信息包括列表要展示的内容以及该列是否默认展示。

410、为封装的静态代码绑定事件，为监听列表事件提供接口。

411、展示错误信息。

值得说明的是，在列表生成之后，在获取用户输入的选中行指令之后，需要获取行信息，获取行信息的具体方法为：遍历整个列表，获取被以样式区别的选中后的行标记，通过行标记，获得该行对象，将获得的一个或多个对象封装成list返回，从而显示出用户选中的行的信息。

当需要删除列表中的某一行时，首先获取选中的行对象，将页面内选中的行删除并提交给后台做删除操作，删除成功后重新加载列表，若删除失败则显示错误信息并重新加载列表。

重新加载列表时，首先获取更新的搜索条件，然后判断是否使用分页，如果使用分页，则清空页面中已存在的数据信息，并使用分页信息与新的搜索条件作为加载参数；如果不使用分页，则清空页面信息，使用新的搜索条件作为加载参数，然后调用加载列表的方法，即上述步骤408至410，生成HTML静态代码并插入页面。

此外，本发明实施例采用DIV+CSS统一并丰富了列表样式，使得在不同的浏览器下，列表的展示风格是一致的，且列表、行、列、单元格等DOM对象之间的联系更紧密，在调用列表中的其他DOM对象时，只需根据当前DOM对象与目标DOM对象之间的关系就可以找到目标DOM对象，无需编写大量查找操作的代码。

本发明实施例提供的列表生成的方法，在对列表初始化过程中就已经为各个元素绑定了事件，无需手动绑定，在操作相关元素时会自动触发对应的事件，并执行事件中的方法，提高了响应速度，且避免了在前端页面上编写大量构建列表的HTML代码，尽可能少的向用户暴露代码，增强了系统的安全性。

结合图1至图4所示的生成列表的方法，本发明实施例还提供一种列表生成的装置，如图5所示，该装置包括：封装单元501、设置单元502、调用单元503。

封装单元501，用于使用JavaScript以标签的形式在后台封装列表对象；

设置单元502，用于在前端页面设置标签，将标签与后台的列表对象相关联；

调用单元503，用于在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表。

其中，标签为tag标签。列表中的每个元素分别与各自对应的事件绑定。

在本发明另一实施例中，封装单元501，还用于提取不同列表中相同的功能以标签的形式封装成方法；分别为每个列表生成一个唯一的标识符；根据每个列表的差异部分，分别以标签的形式生成每个标识符对应的属性及方法。

在本发明另一实施例中，调用单元503，还用于在前端页面上调用标签；为被调用的标签添加属性；通过被调用的标签加载从后台接收到的JSON数据；根据JSON数据以及被调用的标签的属性自动生成列表。

本发明实施例提供的列表生成的装置，封装单元使用JavaScript以标签的形式在后台封装列表对象，然后设置单元在前端页面设置标签，将标签与后台的列表对象相关联；调用单元在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表。与现有技术中由于生成列表时需要编写并维护大量代码而导致生成列表工作量的相比，本发明使用JavaScript以标签的形式在后台封装列表对象，使用标签的形式封装列表对象提高了代码的复用率，可以减少代码量，且在前端页面上调用标签就能够加载后台数据并自动生成列表，无需开发人员手动编写代码生成列表对象，减小了生成列表的工作量。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

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

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

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

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

Claims (10)

1.一种列表生成的方法，其特征在于，包括：

使用脚本语言JavaScript以标签的形式在后台封装列表对象；

在前端页面设置标签，将所述标签与后台的列表对象相关联；

在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表。

2.根据权利要求1所述的列表生成的方法，其特征在于，所述使用JavaScript以标签的形式在后台封装列表对象，包括：

提取不同列表中相同的功能以标签的形式封装成方法；

分别为每个列表生成一个唯一的标识符；

根据每个列表的差异部分，分别以标签的形式生成每个标识符对应的属性及方法。

3.根据权利要求1或2所述的列表生成的方法，其特征在于，所述在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表，包括：

在前端页面上调用标签；

为被调用的标签添加属性；

通过所述被调用的标签加载从后台接收到的脚本语言对象表示法JSON数据；

根据所述JSON数据以及所述被调用的标签的属性自动生成列表。

4.根据权利要求3所述的列表生成的方法，其特征在于，所述列表中的每个元素分别与各自对应的事件绑定。

5.根据权利要求4所述的列表生成的方法，其特征在于，所述标签为tag标签。

6.一种列表生成的装置，其特征在于，包括：

封装单元，用于使用JavaScript以标签的形式在后台封装列表对象；

设置单元，用于在前端页面设置标签，将所述标签与后台的列表对象相关联；

调用单元，用于在前端页面上调用标签，通过被调用的标签加载后台数据并自动生成列表。

7.根据权利要求6所述的列表生成的装置，其特征在于，

所述封装单元，还用于提取不同列表中相同的功能以标签的形式封装成方法；分别为每个列表生成一个唯一的标识符；根据每个列表的差异部分，分别以标签的形式生成每个标识符对应的属性及方法。

8.根据权利要求6或7所述的列表生成的装置，其特征在于，

所述调用单元，还用于在前端页面上调用标签；为被调用的标签添加属性；通过所述被调用的标签加载从后台接收到的JSON数据；根据所述JSON数据以及所述被调用的标签的属性自动生成列表。

9.根据权利要求8所述的列表生成的装置，其特征在于，所述列表中的每个元素分别与各自对应的事件绑定。

10.根据权利要求9所述的列表生成的装置，其特征在于，所述标签为tag标签。