[发明专利]一种更新组件列表数据的方法和系统

说明书

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

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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