CN107608686A - 一种更新组件列表数据的方法和系统 - Google Patents

Abstract

本发明提供一种更新组件列表数据的方法和系统，能够根据组件的配置数据更新组件列表数据，避免了因组件之间的级联关系导致的不必要的数据更新。本发明的系统包括：保存模块、父组件、以及子组件；保存模块用于保存组件级联数据；父组件用于与子组件建立关联关系，然后监听所述子组件所触发的事件，并在子组件触发事件后，接收该子组件的转发数据；再将所接收到的子组件的转发数据转发给有关联关系的子组件；子组件用于在接收到父组件的转发数据后，判断该转发数据中的事件是否为该子组件监听的事件，若是则根据该子组件的加载数据地址获取与转发数据中的数据标识对应的下拉列表数据，再根据该下拉列表数据更新该子组件的列表数据。

Description

一种更新组件列表数据的方法和系统

技术领域

本发明涉及计算机及其软件技术领域，特别涉及一种更新组件列表数据的方法和系统。

背景技术

随着互联网的发展，前端页面设计越来越受到人们的重视，web界面的友好、易操作给用户带来了良好的体验，也成为开发者一直致力于的目标。选择下拉框组件是web页面常用的显示元素，它为用户的页面操作提供了便利的同时也提升了操作效率，当用户需要选择的下拉框组件有多个，并且下拉框组件彼此之间具有依赖关系时，开发者往往使用下拉框组件级联的方式控制下拉列表的内容。

对于页面上多个下拉框组件级联的情况，现有技术一般都是根据组件标识进行绑定，在不同的页面复用，需要复制JavaScript代码，同时修改绑定的标示，过程繁琐。利用JavaScript绑定下拉框组件的内容改变事件，当该事件发生后，操作关联的目标下拉框组件，获取数据，之后改变下拉框组件中的数据，同时绑定当前下拉框的改变事件，多个下拉框级联则以此类推。

如图1所示，组件B根据A的标识监听其数据改变事件，组件C根据B的标识监听其数据改变事件；当组件A触发事件后，B组件会执行相应的动作，改变组件B中的数据，此时连带触发组件B的数据改变事件，组件C便会执行相应的动作，操作HTML代码，更改页面展现，同时改变组件C的数据内容。从这个例子可以看到，现有技术各个下拉框的级联关系无法灵活改变，而且级联JavaScript代码不容易复用，同时由于列表数据加载地址是固定的，无法灵活配置，而且也在一定程度上降低了开发人员的效率。

发明内容

有鉴于此，本发明提供一种更新组件列表数据的方法和系统，能够根据各个组件的配置数据更新组件的列表数据，避免了因组件之间的级联关系导致的不必要的数据更新；同时使级联组件复用更加容易，级联关系和列表数据加载地址可灵活配置，级联事件利用父组件拦截，将子组件之间的级联关系解耦，更灵活、更容易扩展，也在一定程度上提升了开发人员的开发效率。

为实现上述目的，根据本发明的一个方面，提供了一种更新组件列表数据的系统。

本发明的更新组件列表数据的系统包括：保存模块、父组件、以及子组件；所述保存模块用于，保存组件级联数据；所述组件级联数据包括：组件标识以及与该组件标识所对应的级联关系配置数据、事件配置数据、加载数据地址、以及下拉列表数据；所述父组件用于，与子组件建立关联关系，然后监听所述子组件所触发的事件，并在子组件触发事件后，接收该子组件的转发数据；所述转发数据包括组件标识、所述事件、以及数据标识，再将所接收到的子组件的转发数据转发给有关联关系的子组件；所述子组件用于，在接收到父组件的转发数据后，判断该转发数据中的事件是否为该子组件监听的事件，若是则根据该子组件的加载数据地址获取与转发数据中的数据标识对应的下拉列表数据，再根据该下拉列表数据更新该子组件的列表数据。

可选地，所述子组件还用于判断所述转发数据中的组件标识与该子组件的级联关系配置数据是否匹配，并且判断所述转发数据中的事件与该子组件的事件配置数据是否匹配，在上述两个判断结果皆为是的情况下，确定所述转发数据中的事件为子组件监听的事件。

可选地，子组件还用于生成该子组件的触发事件。

可选地，所述保存模块还用于保存组件模板；并且子组件还用于将更新后的组件列表数据按照所述组件模板呈现在人机界面上。

根据本发明的另一个方面，提供了一种更新组件列表数据的方法。

本发明的更新组件列表数据的方法包括：保存模块保存组件级联数据；所述组件级联数据包括：组件标识以及与该组件标识所对应的级联关系配置数据、事件配置数据、加载数据地址、以及下拉列表数据；父组件分别与子组件建立关联关系；父组件监听所述子组件所触发的事件，并在子组件触发事件后，接收该子组件的转发数据；所述转发数据包括组件标识、所述事件、以及数据标识；父组件将所接收到的子组件的转发数据转发给有关联关系的子组件；子组件接收到父组件的转发数据后，判断该转发数据中的事件是否为该子组件监听的事件，若是则根据该子组件的加载数据地址获取与转发数据中的数据标识对应的下拉列表数据，再根据该下拉列表数据更新该子组件的列表数据。

可选地，所述判断该转发数据中的事件是否为该子组件监听的事件的步骤包括：判断所述转发数据中的组件标识与该子组件的级联关系配置数据是否匹配，并且判断所述转发数据中的事件与该子组件的事件配置数据是否匹配，在上述两个判断结果皆为是的情况下，确定所述转发数据中的事件为子组件监听的事件。

可选地，所述根据该下拉列表数据更新该子组件的列表数据的步骤之后还包括：子组件生成该子组件的触发事件。

可选地，所述保存模块保存组件级联数据的步骤之前还包括：保存模块保存组件模板；并且根据该下拉列表数据更新该子组件的列表数据的步骤之后还包括：子组件将更新后的组件列表数据按照所述组件模板呈现在人机界面上。

根据本发明的技术方案，由于增加了父组件，因而将子组件的级联关系解耦，各子组件能够根据各个组件的配置数据更新组件的列表数据，避免了因组件之间的级联关系导致的不必要的数据更新；同时使级联组件复用更加容易，级联关系和列表数据加载地址可灵活配置，更灵活、更容易扩展，也在一定程度上提升了开发人员的开发效率。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是现有技术方案中更新组件数据的方法的示意图；

图2是根据本发明实施例的一种更新组件列表数据的系统的示意图；

图3是根据本发明实施例的一种更新组件列表数据的方法的示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图2是根据本发明实施例的一种更新组件列表数据的系统的示意图。本发明实施例的更新组件列表数据的系统20主要包括保存模块21、父组件22、以及子组件23；保存模块21用于保存组件级联数据；所述组件级联数据包括：组件标识以及与该组件标识所对应的级联关系配置数据、事件配置数据、加载数据地址、以及下拉列表数据；父组件22用于与子组件建立关联关系，然后监听所述子组件所触发的事件，并在子组件触发事件后，接收该子组件的转发数据；所述转发数据包括组件标识、所述事件、以及数据标识，再将所接收到的子组件的转发数据转发给有关联关系的子组件；子组件23用于在接收到父组件的转发数据后，判断该转发数据中的事件是否为该子组件监听的事件，若是则根据该子组件的加载数据地址获取与转发数据中的数据标识对应的下拉列表数据，再根据该下拉列表数据更新该子组件的列表数据。

子组件23还可用于判断所述转发数据中的组件标识与该子组件的级联关系配置数据是否匹配，并且判断所述转发数据中的事件与该子组件的事件配置数据是否匹配，在上述两个判断结果皆为是的情况下，确定所述转发数据中的事件为该组件监听的事件。

子组件23还可用于生成该子组件的触发事件。

保存模块21还可用于保存组件模板；子组件23还可用于将更新后的组件列表数据按照所述组件模板呈现在人机界面上。

图3是根据本发明实施例的一种更新组件列表数据的方法的示意图。本发明实施例的更新组件列表数据的方法的执行主体为图2中所提到的更新组件列表数据的系统20，该方法主要包括如下的步骤S30至S34。

步骤S30：保存模块保存组件级联数据。在该步骤中，所提到的组件级联数据包括但不仅限于：组件标识以及与该组件标识所对应的级联关系配置数据、事件配置数据、加载数据地址、以及下拉列表数据；该级联数据在级联关系不变的前提下是不用进行改变的；只有在级联关系发生变化的时候，才需要提前对其中的级联数据进行改变。

在步骤S30之前，保存模块保存组件模板，组件模板用于规定组件具体的样式，比如颜色，大小，以及间距等。

步骤S31：父组件分别与子组件建立关联关系。在该步骤中，父组件与需要实现级联关系的子组件建立关联关系，因而在子组件触发事件后，将该事件利用父组件拦截，从而实现子组件的数据更新，也实现了子组件之间的级联关系解耦，避免了因组件之间的级联关系导致的不必要的数据更新，使级联组件复用更加容易、更灵活、更容易扩展。

步骤S32：父组件监听所述子组件所触发的事件，并在子组件触发事件后，接收该子组件的转发数据。在步骤S32中，所提到的转发数据包括组件标识、所述事件、以及数据标识。在步骤S31父组件与子组件建立关联关系后，开始监听各个子组件，并在监听到有子组件触发事件后，接收子组件所发送来的转发数据。如果有多个子组件触发事件，则父组件按照各个子组件触发事件的时间顺序对所接收到的转发数据进行处理。

步骤S33：父组件将所接收到的子组件的转发数据转发给有关联关系的子组件。在该步骤中，父组件在接收到子组件的转发数据后，将该转发数据转发给与该父组件有关联关系的所有的子组件。

步骤S34：子组件接收到父组件的转发数据后，判断该转发数据中的事件是否为该子组件监听的事件，若是则根据该子组件的加载数据地址获取与转发数据中的数据标识对应的下拉列表数据，再根据该下拉列表数据更新该子组件的列表数据。在该步骤中，子组件在收到父组件所发送的转发数据后，将转发数据中组件标识与该子组件的级联关系配置数据进行匹配，判断该转发数据中的组件标识所对应的子组件是否为该子组件需要监听的子组件，以及将转发数据中的事件与该子组件的事件配置数据进行匹配，判断是否为该子组件需要监听的事件，如果两组数据同时匹配，则确定所述转发数据中的事件为该子组件所需监听的事件；从而根据该子组件的加载数据地址获取与转发数据中的数据标识所对应的下拉列表数据，再根据该下拉列表数据更新该子组件的列表数据。

在步骤S34子组件根据下拉列表数据更新完该子组件的列表数据后，生成该子组件的触发事件；同时，父组件继续监听，并实现与该子组件相关联的其他子组件的列表数据的更新；并且子组件也可以将更新后的组件列表数据按照预先所保存的组件模板呈现在人机界面(例如电脑终端屏幕上)。

根据本发明实施例的技术方案，由于增加了父组件，因而将子组件的级联关系解耦，各子组件能够根据各个组件的配置数据更新组件的列表数据，避免了因组件之间的级联关系导致的不必要的数据更新；同时使级联组件复用更加容易，级联关系和列表数据加载地址可灵活配置，更灵活、更容易扩展，也在一定程度上提升了开发人员的开发效率。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (8)

1.一种更新组件列表数据的系统，其特征在于，包括：保存模块、父组件、以及子组件；

所述保存模块用于，保存组件级联数据；所述组件级联数据包括：组件标识以及与该组件标识所对应的级联关系配置数据、事件配置数据、加载数据地址、以及下拉列表数据；

所述父组件用于，与子组件建立关联关系，然后监听所述子组件所触发的事件，并在子组件触发事件后，接收该子组件的转发数据；所述转发数据包括组件标识、所述事件、以及数据标识，再将所接收到的子组件的转发数据转发给有关联关系的子组件；

所述子组件用于，在接收到父组件的转发数据后，判断该转发数据中的事件是否为该子组件监听的事件，若是则根据该子组件的加载数据地址获取与转发数据中的数据标识对应的下拉列表数据，再根据该下拉列表数据更新该子组件的列表数据。

2.根据权利要求1所述的系统，其特征在于，所述子组件还用于判断所述转发数据中的组件标识与该子组件的级联关系配置数据是否匹配，并且判断所述转发数据中的事件与该子组件的事件配置数据是否匹配，在上述两个判断结果皆为是的情况下，确定所述转发数据中的事件为子组件监听的事件。

3.根据权利要求1所述的系统，其特征在于，子组件还用于生成该子组件的触发事件。

4.根据权利要求1所示的系统，其特征在于，所述保存模块还用于保存组件模板；

并且子组件还用于将更新后的组件列表数据按照所述组件模板呈现在人机界面上。

5.一种更新组件列表数据的方法，其特征在于，包括：

保存模块保存组件级联数据；所述组件级联数据包括：组件标识以及与该组件标识所对应的级联关系配置数据、事件配置数据、加载数据地址、以及下拉列表数据；

父组件分别与子组件建立关联关系；

父组件监听所述子组件所触发的事件，并在子组件触发事件后，接收该子组件的转发数据；所述转发数据包括组件标识、所述事件、以及数据标识；

父组件将所接收到的子组件的转发数据转发给有关联关系的子组件；

子组件接收到父组件的转发数据后，判断该转发数据中的事件是否为该子组件监听的事件，若是则根据该子组件的加载数据地址获取与转发数据中的数据标识对应的下拉列表数据，再根据该下拉列表数据更新该子组件的列表数据。

6.根据权利要求5所述的方法，其特征在于，所述判断该转发数据中的事件是否为该子组件监听的事件的步骤包括：

判断所述转发数据中的组件标识与该子组件的级联关系配置数据是否匹配，并且判断所述转发数据中的事件与该子组件的事件配置数据是否匹配，在上述两个判断结果皆为是的情况下，确定所述转发数据中的事件为子组件监听的事件。

7.根据权利要求5所述的方法，其特征在于，所述根据该下拉列表数据更新该子组件的列表数据的步骤之后还包括：子组件生成该子组件的触发事件。

8.根据权利要求5所述的方法，其特征在于，所述保存模块保存组件级联数据的步骤之前还包括：保存模块保存组件模板；

并且根据该下拉列表数据更新该子组件的列表数据的步骤之后还包括：子组件将更新后的组件列表数据按照所述组件模板呈现在人机界面上。