一种下拉框组件加载方法及相关装置与流程

1.本技术涉及计算机技术领域，具体涉及一种下拉框组件加载方法及相关装置。


背景技术：

2.对于银行来说，其内部的信息管理系统中往往存在大量的表单，而每张表单中又包括大量的表单项，表单项中的下拉框还存在大量的选项。每一次加载表单页面时，需要同时加载下拉框中的全部选项，这将导致所需加载的dom树结构非常庞大，加载表单页面时系统的资源消耗急剧上升，容易导致低版本的浏览器加载表单页面时出现卡顿的情况。


技术实现要素：

3.本技术实施例提供了一种下拉框组件加载方法及相关装置，能够降低加载表单页面时所需消耗的资源，避免出现加载表单页面时出现卡顿的情况。
4.有鉴于此，本技术第一方面提供了一种下拉框组件加载方法，所述方法包括：
5.加载表单页面时，针对所述表单页面包括的每个下拉框组件，加载所述下拉框组件下的前n条下拉选项；所述n为大于1的整数，并且所述n小于所述下拉框组件下的下拉选项的总数目；
6.检测到用户针对目标下拉框组件触发点击操作后，显示所述目标下拉框组件下的前n条下拉选项；
7.若检测到所述用户针对所述目标下拉框组件下的下拉选项触发目标滚动事件，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
8.可选的，所述若检测到所述用户针对所述目标下拉框组件下的下拉选项触发目标滚动事件，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项，包括：
9.若检测到所述用户将所述目标下拉框组件下的前n条下拉选项滚动至底部，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
10.可选的，所述加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项，包括：
11.在客户端从后台服务端获取到所述表单页面中各个下拉框组件下的全量下拉选项的情况下，从所述目标下拉框组件下的全量下拉选项中获取第n+1条下拉选项至第2n条下拉选项，加载所述第n+1条下拉选项至第2n条下拉选项；
12.在所述客户端从所述后台服务端获取到所述表单页面中各个下拉框组件下的前n条下拉选项的情况下，生成第一下拉选项获取请求发送给所述后台服务端，以使所述后台服务端获取所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项并反馈给所述客户端。
13.可选的，所述方法还包括：
14.当所述目标下拉框组件的输入框中包括初始选项时，在所述目标下拉框组件下的全量下拉选项中查找所述初始选项对应的下拉选项；
15.控制将所述初始选项对应的下拉选项，作为所述目标下拉框组件下的第一条下拉选项来显示。
16.可选的，所述在所述目标下拉框组件下的全量下拉选项中查找所述初始选项对应的下拉选项，包括：
17.在客户端从后台服务端获取到所述表单页面中各个下拉框组件下的全量下拉选项的情况下，基于所获取的所述目标下拉框组件下的全量下拉选项，查找所述初始选项对应的下拉选项；
18.在所述客户端从所述后台服务端获取到所述表单页面中各个下拉框组件下的前n条下拉选项的情况下，生成包括所述初始选项的第二下拉选项获取请求发送给所述后台服务端，以使所述后台服务端查找所述初始选项对应的下拉选项并反馈给所述客户端。
19.可选的，所述方法还包括：
20.响应于所述用户针对所述目标下拉框组件下的目标下拉选项触发的选择操作，在所述目标下拉框组件的输入框中显示所述目标下拉选项。
21.本技术第二方面提供了一种下拉框组件加载装置，所述装置包括：
22.选项加载模块，用于加载表单页面时，针对所述表单页面包括的每个下拉框组件，加载所述下拉框组件下的前n条下拉选项；所述n为大于1的整数，并且所述n小于所述下拉框组件下的下拉选项的总数目；
23.选项显示模块，用于检测到用户针对目标下拉框组件触发点击操作后，显示所述目标下拉框组件下的前n条下拉选项；
24.所述选项加载模块，还用于若检测到所述用户针对所述目标下拉框组件下的下拉选项触发目标滚动事件，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
25.可选的，所述选项加载模块具体用于：
26.若检测到所述用户将所述目标下拉框组件下的前n条下拉选项滚动至底部，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
27.可选的，所述选项加载模块具体用于：
28.在客户端从后台服务端获取到所述表单页面中各个下拉框组件下的全量下拉选项的情况下，从所述目标下拉框组件下的全量下拉选项中获取第n+1条下拉选项至第2n条下拉选项，加载所述第n+1条下拉选项至第2n条下拉选项；
29.在所述客户端从所述后台服务端获取到所述表单页面中各个下拉框组件下的前n条下拉选项的情况下，生成第一下拉选项获取请求发送给所述后台服务端，以使所述后台服务端获取所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项并反馈给所述客户端。
30.可选的，所述装置还包括：
31.回显模块，用于当所述目标下拉框组件的输入框中包括初始选项时，在所述目标下拉框组件下的全量下拉选项中查找所述初始选项对应的下拉选项；控制将所述初始选项对应的下拉选项，作为所述目标下拉框组件下的第一条下拉选项来显示。
32.可选的，所述回显模块还用于：
33.响应于所述用户针对所述目标下拉框组件下的目标下拉选项触发的选择操作，在
所述目标下拉框组件的输入框中显示所述目标下拉选项。
34.从以上技术方案可以看出，本技术实施例具有以下优点：
35.本技术实施例提供了一种下拉框组件加载方法，该方法包括：加载表单页面时，针对表单页面包括的每个下拉框组件，加载该下拉框组件下的前n条下拉选项，此处的n为大于1的整数，并且n小于该下拉框组件下的下拉选项的总数目；检测到用户针对目标下拉框组件触发点击操作后，显示该目标下拉框组件下的前n条下拉选项；若检测到该用户针对目标下拉框组件下的下拉选项触发目标滚动事件，则加载该目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。上述方法对表单页面中的下拉框进行了二次封装，懒加载下拉框组件中的下拉选项；限制了初次加载表单页面时针对每个下拉框组件所需加载的下拉选项的数目，从而有效地提高了表单页面的渲染速度，并且能够避免出现表单页面卡顿的情况；当检测到用户针对下拉框组件下的下拉选项触发滚动事件时，再加载后续的n条下拉选项，可以保证下拉选项的有效加载，即避免加载过多无效的下拉选项，进一步节约处理资源。
附图说明
36.图1为本技术实施例提供的一种下拉框组件加载方法的流程示意图；
37.图2为本技术实施例提供的一种下拉框组件加载装置的结构示意图。
具体实施方式
38.为了使本技术领域的人员更好地理解本技术方案，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
39.本技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本技术的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
40.本发明提供的下拉框组件加载方法可用于金融领域或其他领域，例如，可用于金融领域中的数据查询应用场景。其他领域为除金融领域之外的任意领域，例如，电力领域。上述仅为示例，并不对本发明提供的下拉框组件加载的应用领域进行限定。
41.下面通过方法实施例对本技术提供的下拉框组件加载方法进行介绍。
42.参见图1，图1为本技术实施例提供的下拉框组件加载方法的流程示意图。如图1所示，该下拉框组件加载方法包括以下步骤：
43.步骤101：加载表单页面时，针对所述表单页面包括的每个下拉框组件，加载所述下拉框组件下的前n条下拉选项；所述n为大于1的整数，并且所述n小于所述下拉框组件下的下拉选项的总数目。
44.对于表单页面中的下拉框组件，其通常由输入框和下拉选项两部分构成。其中，输入框负责支持用户输入过滤信息并回显对应的选项；下拉选项负责支持用户选择选项；输入框与下拉选项之间通过双向数据绑定实现互相连接。
45.本发明着眼于针对表单页面中每个下拉框组件的下拉选项采用懒加载的方式，限制每个下拉框组件初始加载的下拉选项数目，即每个下拉框组件初始加载时最多加载n条下拉选项，此处的n为大于1的整数，且小于下拉框组件下的下拉选项总数目，n例如可以为10。
46.所谓懒加载是一种独特而又强大的数据获取方法，其能够在检测到用户针对下拉框组件下的下拉选项触发滚动操作时自动获取更多的下拉选项，而新获取的下拉选项不会影响原有下拉选项的显示，同时能够最大程度上减少服务端的资源消耗。
47.步骤102：检测到用户针对目标下拉框组件触发点击操作后，显示所述目标下拉框组件下的前n条下拉选项。
48.客户端检测到用户针对目标下拉框组件触发点击操作后，可以相应地显示该目标下拉框组件下的前n条下拉选项，即显示加载表单页面时针对该目标下拉框组件加载的前n条下拉选项。
49.此外，客户端检测到用户针对目标下拉框组件触发点击操作后，还会为该目标下拉框组件添加一个滚动事件，该滚动事件用于监听用户是否针对该目标下拉框组件下的下拉选项触发目标滚动事件，以据此来决定是否继续加载前n条下拉选项之后的n条下拉选项。
50.步骤103：若检测到所述用户针对所述目标下拉框组件下的下拉选项触发目标滚动事件，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
51.此后，客户端若检测到用户针对该目标下拉框组件下的下拉选项触发了目标滚动事件，则可以继续加载该目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项，以n为10为例，若客户端检测到用户针对目标下拉框组件下的下拉选项触发了目标滚动事件，则可以继续加载该目标下拉框组件下的第11条至第20条下拉选项，实现对于该目标下拉框组件的懒加载。
52.作为一种示例，上述目标事件可以为将目标下拉框组件下的前n条下拉选项滚动至底部，即若客户端检测到用户将目标下拉框组件下的前n条下拉选项滚动至底部，则加载该目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
53.应理解，加载为目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项后，可以进一步添加目标滚动事件，该目标滚动事件用于监测用户是否将目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项滚动至底部，并在检测到该目标滚动事件后，进一步加载该目标下拉框组件下的第2n+1条下拉选项至第3n条下拉选项，以此类推。
54.在一种可能的实现方式中，若客户端此前已从后台服务端获取到表单页面中各个下拉框组件下的全量下拉选项，则客户端此时可以从目标下拉框组件下的全量下拉选项中获取第n+1条下拉选项至第2n条下拉选项，并加载该第n+1条下拉选项至第2n条下拉选项。若客户端此前仅从后台服务端获取到表单页面中各个下拉框组件下的前n条下拉选项的情况下，则客户端此时可以生成第一下拉选项获取请求发送给后台服务端，以使后台服务端获取目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项并反馈给客户端。
55.需要说明的是，在本技术实施例中，响应于用户针对目标下拉框组件下的目标下拉选项触发的选择操作，客户端还可以在目标下拉框组件的输入框中显示该目标下拉选项。即，如果客户端检测到用户针对目标下拉框组件下的某个目标下拉选项触发了选择操作，则客户端可以相应地控制在该目标下拉框组件的输入框中回显该目标下拉选项。同时，还可以动态地将该目标下拉选项作为第一个下拉选项显示。
56.可选的，本技术实施例还针对下拉框组件的输入框增加了数据回显的优化，具体的，考虑到如何只进行数据懒加载的话，如果所下载的下拉选项中没有输入框中已经选中的选项，则会导致数据回显失效的问题，为了避免该问题发生，在本技术实施例中，当目标下拉框组件的输入框中包括初始选项时，客户端可以在该目标下拉框组件下的全量下拉选项中查找该初始选项对应的下拉选项；进而控制将初始选项对应的下拉选项，作为目标下拉框组件下的第一条下拉选项来显示。
57.具体的，若目标下拉框组件的输入框中包括初始选项，为了保证该初始选项回显正常，客户端可以在该目标下拉框下的全量下拉选项中查找该初始选项对应的下拉选项，进而动态地将该初始选项对应的下拉选项作为目标下拉框组件下的第一条下拉选项来显示，如此保证输入框中的被选中项用于在已加载的下拉选项中。
58.在一种可能的实现方式中，若客户端此前从后台服务端获取到表单页面中各个下拉框组件下的全量下拉选项，则此时客户端可以基于所获取的目标下拉框组件下的全量下拉选项，查找该初始选项对应的下拉选项；若客户端此前仅从后台服务端获取到表单页面中各个下拉框组件下的前n条下拉选项的情况下，则此时客户端可以生成包括初始选项的第二下拉选项获取请求发送给后台服务端，以使后台服务端查找该初始选项对应的下拉选项并反馈给客户端。
59.本技术实施例提供的下拉框组件加载方法包括：加载表单页面时，针对表单页面包括的每个下拉框组件，加载该下拉框组件下的前n条下拉选项，此处的n为大于1的整数，并且n小于该下拉框组件下的下拉选项的总数目；检测到用户针对目标下拉框组件触发点击操作后，显示该目标下拉框组件下的前n条下拉选项；若检测到该用户针对目标下拉框组件下的下拉选项触发目标滚动事件，则加载该目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。上述方法对表单页面中的下拉框进行了二次封装，懒加载下拉框组件中的下拉选项；限制了初次加载表单页面时针对每个下拉框组件所需加载的下拉选项的数目，从而有效地提高了表单页面的渲染速度，并且能够避免出现表单页面卡顿的情况；当检测到用户针对下拉框组件下的下拉选项触发滚动事件时，再加载后续的n条下拉选项，可以保证下拉选项的有效加载，即避免加载过多无效的下拉选项，进一步节约处理资源。
60.本技术实施例还提供了一种下拉框组件加载装置。参见图2，图2为本技术实施例提供的下拉框组件加载装置的结构示意图，如图2所示，该下拉框组件加载装置包括：
61.选项加载模块201，用于加载表单页面时，针对所述表单页面包括的每个下拉框组件，加载所述下拉框组件下的前n条下拉选项；所述n为大于1的整数，并且所述n小于所述下拉框组件下的下拉选项的总数目；
62.选项显示模块202，用于检测到用户针对目标下拉框组件触发点击操作后，显示所述目标下拉框组件下的前n条下拉选项；
63.所述选项加载模块201，还用于若检测到所述用户针对所述目标下拉框组件下的
下拉选项触发目标滚动事件，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
64.可选的，所述选项加载模块201具体用于：
65.若检测到所述用户将所述目标下拉框组件下的前n条下拉选项滚动至底部，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
66.可选的，所述选项加载模块201具体用于：
67.在客户端从后台服务端获取到所述表单页面中各个下拉框组件下的全量下拉选项的情况下，从所述目标下拉框组件下的全量下拉选项中获取第n+1条下拉选项至第2n条下拉选项，加载所述第n+1条下拉选项至第2n条下拉选项；
68.在所述客户端从所述后台服务端获取到所述表单页面中各个下拉框组件下的前n条下拉选项的情况下，生成第一下拉选项获取请求发送给所述后台服务端，以使所述后台服务端获取所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项并反馈给所述客户端。
69.可选的，所述装置还包括：
70.回显模块，用于当所述目标下拉框组件的输入框中包括初始选项时，在所述目标下拉框组件下的全量下拉选项中查找所述初始选项对应的下拉选项；控制将所述初始选项对应的下拉选项，作为所述目标下拉框组件下的第一条下拉选项来显示。
71.可选的，所述回显模块具体用于：
72.在客户端从后台服务端获取到所述表单页面中各个下拉框组件下的全量下拉选项的情况下，基于所获取的所述目标下拉框组件下的全量下拉选项，查找所述初始选项对应的下拉选项；
73.在所述客户端从所述后台服务端获取到所述表单页面中各个下拉框组件下的前n条下拉选项的情况下，生成包括所述初始选项的第二下拉选项获取请求发送给所述后台服务端，以使所述后台服务端查找所述初始选项对应的下拉选项并反馈给所述客户端。
74.可选的，所述回显模块还用于：
75.响应于所述用户针对所述目标下拉框组件下的目标下拉选项触发的选择操作，在所述目标下拉框组件的输入框中显示所述目标下拉选项。
76.本技术实施例提供的下拉框组件加载装置，对表单页面中的下拉框进行了二次封装，懒加载下拉框组件中的下拉选项；限制了初次加载表单页面时针对每个下拉框组件所需加载的下拉选项的数目，从而有效地提高了表单页面的渲染速度，并且能够避免出现表单页面卡顿的情况；当检测到用户针对下拉框组件下的下拉选项触发滚动事件时，再加载后续的n条下拉选项，可以保证下拉选项的有效加载，即避免加载过多无效的下拉选项，进一步节约处理资源。
77.所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
78.在本技术所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或
讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
79.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
80.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
81.所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(英文全称：read-only memory，英文缩写：rom)、随机存取存储器(英文全称：random access memory，英文缩写：ram)、磁碟或者光盘等各种可以存储计算机程序的介质。
82.应当理解，在本技术中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“a和/或b”可以表示：只存在a，只存在b以及同时存在a和b三种情况，其中a，b可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。
83.以上所述，以上实施例仅用以说明本技术的技术方案，而非对其限制；尽管参照前述实施例对本技术进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本技术各实施例技术方案的精神和范围。