穿梭框构建方法、装置、设备及介质与流程

1.本技术涉及计算机技术领域，尤其涉及一种穿梭框构建方法、装置、设备及介质。


背景技术：

2.随着互联网的普及，网站的数量越来越多。在网页内处理数据时，用户经常会有这样的需求，即用户需要在一个数据清单中选择出需要的数据项，并需要将已选择的数据项与未选择的数据项进行区分显示。
3.相关技术中，穿梭框是能够满足该需求的页面显示组件，使用穿梭框用户能够实时看到自己选中了哪些数据，体验较好。然而相关技术中的穿梭框具有的功能较为单一，难以满足用户多样化的需求。


技术实现要素：

4.本技术提供一种穿梭框构建方法、装置、设备及介质，提供了数据刷新功能，能够较好的满足用户的需求，实用性较强。
5.第一方面，本技术提供一种穿梭框构建方法，包括：
6.获取用户输入的穿梭框配置参数，并对所述穿梭框配置参数进行解析以获得穿梭框对应的数据源接口及目标组件，所述数据源接口用于获取在所述穿梭框中显示的数据项，所述目标组件包括刷新组件，所述刷新组件用于刷新在所述穿梭框中显示的数据项；
7.调用所述数据源接口以获得多个数据项，并将所述多个数据项映射至所述穿梭框对应的候选区，所述候选区用于对待选择数据项进行显示，所述穿梭框还包括已选区，所述已选区用于对已选择数据项进行显示；
8.将所述刷新组件在所述候选区中进行配置，以在所述候选区中显示刷新按钮，所述刷新按钮用于在被触发时调用所述数据源接口以获得最新的数据项。
9.可选地，所述将所述刷新组件在所述候选区中进行配置，以在所述候选区中显示刷新按钮之后，所述方法还包括：
10.响应于所述刷新按钮被触发，将所述候选区中的数据项清空；
11.调用所述数据源接口以获得最新的多个数据项；
12.将所述最新的多个数据项映射至所述候选区。
13.可选地，若确定在所述刷新按钮被触发之前所述候选区中存在已选择的数据项，则所述将所述最新的多个数据项映射至所述候选区之后，所述方法还包括：
14.若确定所述最新的多个数据项中包括所述已选择的数据项，则将对应数据项设置为选中状态。
15.可选地，所述候选区显示在所述穿梭框的左侧区域，所述已选区显示在所述穿梭框的右侧区域，所述穿梭框还包括穿梭按钮，所述穿梭按钮包括向右穿梭按钮，所述方法还包括：
16.响应于所述向右穿梭按钮被触发，在所述已选区中显示所述候选区中已选择的数
据项；
17.在所述候选区中保留对所述已选择的数据项的显示，且将所述候选区中所述已选择的数据项设置为禁用状态，所述禁用状态表示所述数据项不能被选择。
18.可选地，所述穿梭框为树形穿梭框，所述在所述已选区中显示所述候选区中已选择的数据项，包括：
19.若确定所述已选择的数据项属于至少一个层级，则按照所述至少一个层级，在所述已选区中显示所述已选择的数据项。
20.可选地，所述目标组件还包括全选组件，所述方法还包括：
21.分别将所述全选组件在所述候选区和所述已选区中进行配置，以在所述候选区和所述已选区中显示全选按钮，所述全选按钮用于在被触发时将对应区域中所显示的数据项选中；
22.响应于任一区域中的所述全选按钮被触发，在确定所述全选按钮当前对应的按钮标识为全选标识的情况下，将所述区域中显示的数据项设置为选中状态，将所述区域对应的可选数组设置为空，将所述按钮标识设置为取消全选标识，所述可选数组包含能够被选择的数据项；
23.在确定所述全选按钮当前对应的按钮标识为取消全选标识的情况下，将所述区域中已全选的数据项设置为待选状态，将已全选的数据项放到所述区域对应的可选数组中，将所述按钮标识设置为全选标识。
24.可选地，所述目标组件还包括搜索组件，所述方法还包括：
25.分别将所述搜索组件在所述候选区和所述已选区中进行配置，以在所述候选区和所述已选区中显示搜索框，所述搜索框用于基于所输入的关键字在对应区域内进行搜索；
26.响应于获取到在任一区域中的所述搜索框中输入的关键字，则从所述区域中所显示的数据项中搜索与所述关键字匹配的数据项；
27.显示搜索到的与所述关键字匹配的数据项。
28.第二方面，本技术提供一种穿梭框构建装置，包括：
29.获取模块，用于获取用户输入的穿梭框配置参数，并对所述穿梭框配置参数进行解析以获得穿梭框对应的数据源接口及目标组件，所述数据源接口用于获取在所述穿梭框中显示的数据项，所述目标组件包括刷新组件，所述刷新组件用于刷新在所述穿梭框中显示的数据项；
30.映射模块，用于调用所述数据源接口以获得多个数据项，并将所述多个数据项映射至所述穿梭框对应的候选区，所述候选区用于对待选择数据项进行显示，所述穿梭框还包括已选区，所述已选区用于对已选择数据项进行显示；
31.配置模块，用于将所述刷新组件在所述候选区中进行配置，以在所述候选区中显示刷新按钮，所述刷新按钮用于在被触发时调用所述数据源接口以获得最新的数据项。
32.第三方面，本技术提供一种电子设备，包括：处理器以及与所述处理器通信连接的存储器；
33.所述存储器存储计算机执行指令；
34.所述处理器执行所述存储器存储的计算机执行指令，以实现如第一方面任一项所述的穿梭框构建方法。
35.第四方面，本技术提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现第一方面任一项所述的穿梭框构建方法。
36.第五方面，本技术提供一种计算机程序产品，包括计算机执行指令，所述计算机执行指令被处理器执行时实现第一方面任一项所述的穿梭框构建方法。
37.本技术提供的穿梭框构建方法、装置、设备及介质，在构建穿梭框时，由于能够从用户输入的穿梭框配置参数中解析出数据源接口以及目标组件，这样通过调用数据源接口得到多个数据项，从而将多个数据项映射至穿梭框对应的候选区中，使得用户可以查看数据项，考虑到在后续操作过程中，数据源中的数据项可能存在更新，通过在候选区中配置刷新组件，便于用户在想要查看最新的数据项时，能够触发刷新按钮，从而调用数据源接以获得最新的数据项，实现了数据项的刷新，可见本技术提供的穿梭框构建方法提供了数据刷新功能，能够较好的满足用户的需求，实用性较强。
附图说明
38.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本技术的实施例，并与说明书一起用于解释本技术的原理。
39.图1是根据一示例性实施例示出的一种应用场景的示意图；
40.图2是根据一示例性实施例示出的一种穿梭框构建方法的流程示意图；
41.图3是根据一示例性实施例示出的一种向右穿梭流程的示意图；
42.图4是根据一示例性实施例示出的一种向左穿梭流程的示意图；
43.图5是根据一示例性实施例示出的一种全选流程的示意图；
44.图6是根据一示例性实施例示出的一种搜索流程的示意图；
45.图7是根据一示例性实施例示出的一种穿梭框的示意图；
46.图8是根据一示例性实施例示出的一种穿梭框构建装置的结构示意图；
47.图9是根据一示例性实施例示出的一种电子设备的结构示意图。
48.通过上述附图，已示出本技术明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本技术构思的范围，而是通过参考特定实施例为本领域技术人员说明本技术的概念。
具体实施方式
49.这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本技术相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本技术的一些方面相一致的装置和方法的例子。
50.在以下各实施例的描述中，“多个”的含义是两个以上，除非另有明确具体的限定。
51.为了清楚理解本技术的技术方案，首先对现有技术的方案进行详细介绍。
52.随着互联网的普及，网站的数量越来越多。在网页内处理数据时，用户经常会有这样的需求，即用户需要在一个数据清单中选择出需要的数据项，并需要将已选择的数据项与未选择的数据项进行区分显示。
53.相关技术中，穿梭框是能够满足该需求的页面显示组件，使用穿梭框用户能够实时看到自己选中了哪些数据，体验较好。目前穿梭框构建方案主要是利用现有antd组件库的穿梭框(transfer)实现。其中，antd是基于ant design设计体系的用户界面(user interface，ui)组件库。然而相关技术中的穿梭框具有的功能较为单一，难以满足用户多样化的需求。
54.针对现有技术中的穿梭框具有的功能较为单一，难以满足用户多样化的需求的技术问题，发明人在研究中发现，为了解决该问题，可以考虑用户的需求，为穿梭框设置更多的功能。发明人在使用穿梭框的过程中，发现穿梭框中所显示的数据项存在无法刷新的技术问题，因此可以为穿梭框提供数据刷新功能，以使技术人员在使用穿梭框时，能够及时获取到最新的数据项。具体地，在构建穿梭框时，由于能够从用户输入的穿梭框配置参数中解析出数据源接口以及目标组件，这样通过调用数据源接口得到多个数据项，从而将多个数据项映射至穿梭框对应的候选区中，使得用户可以查看数据项，考虑到在后续操作过程中，数据源中的数据项可能存在更新，通过在候选区中配置刷新组件，便于用户在想要查看最新的数据项时，能够触发刷新按钮，从而调用数据源接以获得最新的数据项，实现了数据项的刷新，可见本技术提供的穿梭框构建方法提供了数据刷新功能，能够较好的满足用户的需求，实用性较强。
55.下面对本技术实施例提供的穿梭框构建方法的应用场景进行介绍。
56.图1是根据一示例性实施例示出的一种应用场景的示意图。如图1所示，该应用场景中包括：电子设备1和服务器2。各个设备之间通过网络连接。
57.其中，电子设备1为用户使用的设备，且电子设备1用于构建穿梭框。服务器2用于存储多个数据项，电子设备1通过调用数据源接口以从服务器2中获取多个数据项。在本实施例中，用户通过电子设备1输入穿梭框配置参数，电子设备1获取该穿梭框配置参数，并对穿梭框配置参数进行解析以获得穿梭框对应的数据源接口及目标组件，目标组件包括刷新组件，然后调用数据源接口以获得多个数据项，并将多个数据项映射至穿梭框对应的候选区，然后将刷新组件在候选区中进行配置，以在候选区中显示刷新按钮。从而用户后续可以通过电子设备1选择候选区中的数据项，并将数据项移动到已选区中，用户还可以通过电子设备1触发刷新按钮，从而电子设备1调用数据源接口以获得最新的数据项。
58.下面以具体的实施例对本技术的技术方案以及本技术的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本技术的实施例进行描述。
59.图2是根据一示例性实施例示出的一种穿梭框构建方法的流程示意图。本技术提供的穿梭框构建方法的执行主体为穿梭框构建装置，该穿梭框构建装置集成在电子设备中。如图2所示，本实施例提供的穿梭框构建方法包括以下步骤：
60.步骤s101，获取用户输入的穿梭框配置参数，并对穿梭框配置参数进行解析以获得穿梭框对应的数据源接口及目标组件，数据源接口用于获取在穿梭框中显示的数据项，目标组件包括刷新组件，刷新组件用于刷新在穿梭框中显示的数据项。
61.其中，穿梭框配置参数是用户通过电子设备输入的。在本实施例中，用户先触发电子设备安装并引入antd组件库，在组件(component)文件下，引入穿梭框组件和目标组件，并编写组件逻辑，然后导出组件。当用户存在构建穿梭框的需求时，通过电子设备在需要使
用的页面位置引入该组件并输入穿梭框配置参数，根据所输入的配置参数配置穿梭框，从而完成穿梭框的构建过程。例如，穿梭框为树形穿梭框，则可以构建双侧树组件(bilateraltreetransfer)。
62.其中，数据源接口为服务器提供的接口，服务器中存储有多个数据项，相应地，数据源接口用于获取在穿梭框中显示的数据项。目标组件包括刷新组件，刷新组件用于刷新在穿梭框中显示的数据项。需要说明的是，目标组件还包括一些必要组件，例如候选框组件、已选框组件、选择组件和穿梭组件。其中，候选框组件用于显示候选区，已选框组件用于显示已选区，选择组件用于对所显示的各数据项进行选择，可以分别针对各数据项进行配置。穿梭组件用于将候选区中已选择的数据项移动到已选区中。
63.步骤s102，调用数据源接口以获得多个数据项，并将多个数据项映射至穿梭框对应的候选区，候选区用于对待选择数据项进行显示，穿梭框还包括已选区，已选区用于对已选择数据项进行显示。
64.在本实施例中，电子设备通过调用数据源接口从服务器中获取多个数据项，然后将多个数据项映射至候选区，以使候选区对多个数据项进行显示。例如多个数据项依次排列显示。
65.步骤s103，将刷新组件在候选区中进行配置，以在候选区中显示刷新按钮，刷新按钮用于在被触发时调用数据源接口以获得最新的数据项。
66.其中，刷新按钮在候选区中的显示位置和显示样式可以根据需要设置，本实施例对此不加以限定。例如，刷新按钮显示在候选区中的左上角、右上角等位置。
67.在本实施例中，在构建穿梭框时，由于能够从用户输入的穿梭框配置参数中解析出数据源接口以及目标组件，这样通过调用数据源接口得到多个数据项，从而将多个数据项映射至穿梭框对应的候选区中，使得用户可以查看数据项，考虑到在后续操作过程中，数据源中的数据项可能存在更新，通过在候选区中配置刷新组件，便于用户在想要查看最新的数据项时，能够触发刷新按钮，从而调用数据源接以获得最新的数据项，实现了数据项的刷新，可见本技术提供的穿梭框构建方法提供了数据刷新功能，能够较好的满足用户的需求，实用性较强。
68.在上述图2所示实施例的基础上，在一种可选实施例中，用户在通过电子设备配置好穿梭框之后，还可以通过电子设备对穿梭框中的数据项进行操作。当用户存在数据刷新需求时，能够通过电子设备触发候选区中显示的刷新按钮。相应地，在步骤s103之后，本技术提供的穿梭框构建方法还包括：响应于刷新按钮被触发，将候选区中的数据项清空；调用数据源接口以获得最新的多个数据项；将最新的多个数据项映射至候选区。其中，触发刷新按钮的方式可以根据需要设置，本实施例对此不加以限定，例如触发方式可以为单击、双击或者长按等方式。可选地，将候选区中的数据项清空的实现方式包括：将候选区对应的候选区数组清空，其中，电子设备针对候选区设置有候选区数组，该候选区数组用于存储候选区中所显示的多个数据项。相应地，将最新的多个数据项映射至候选区的实现方式包括：将获取到的最新的多个数据项存储到候选区数组中，将候选区数组中的各数据项映射至候选区。
69.在上述可选实施例中，穿梭框具有数据刷新功能，在检测到刷新按钮被触发之后，将候选区中所显示的数据项清空，并再次调用数据源接口以获取最新的多个数据项，然后
将最新的多个数据项映射至候选区，从而实现了数据项的刷新，提高了数据项的实时性。
70.在上述可选实施例的基础上，可选地，若确定在刷新按钮被触发之前候选区中存在已选择的数据项，则将最新的多个数据项映射至候选区之后，穿梭框构建方法还包括：若确定最新的多个数据项中包括已选择的数据项，则将对应数据项设置为选中状态。其中，在刷新按钮被触发之前，候选区中可能存在已选择的数据项，而已选择的数据项处于选中状态。若确定在刷新按钮被触发之前候选区中存在已选择的数据项，则需要确定刷新之后得到的最新的多个数据项是否包括已选择的数据项，若包括，则可以将对应数据项设置未选中状态，无须用户从最新的多个数据项中重新选择。若不包括，则显示提示信息，提示信息用于提示用户当前候选区未包括先前已选择的数据项，这样用户可以通过查看提示信息了解到先前已选择的数据项已不存在，无需额外从最新的多个数据项中查找，使得用户体验较好。
71.其中，已选择的数据项处于选中状态，未被选择的数据项处于可选状态。电子设备针对候选区还设置有候选区可选数组(leftselectkey)，该候选区可选数组用于存储候选区中处于可选状态的数据项，也即除已选择的数据项以外的其他数据项。相应地，电子设备在将候选区中的数据项清空之前，将候选区数组与候选区可选数组进行过滤匹配，得到候选区中已选择的数据项。则将最新的多个数据项映射至候选区之后，将已选择的数据项与候选区数组所包括的最新的多个数据项进行过滤匹配，从而确定最新的多个数据项中是否包括已选择的数据项。
72.在上述可选实现方式中，若存在数据项已经被选择成为了选中状态，那么数据刷新之后，仍然保留该数据项处于选中状态，减少了对用户操作的影响，用户体验较好。
73.在上述图2所示实施例的基础上，在一种可选实施例中，候选区显示在穿梭框的左侧区域，已选区显示在穿梭框的右侧区域，穿梭框还包括穿梭按钮，穿梭按钮包括向右穿梭按钮，在步骤s103之后，本技术提供的穿梭框构建方法还包括向右穿梭流程。图3是根据一示例性实施例示出的一种向右穿梭流程的示意图，如图3所示，该向右穿梭流程包括以下步骤：
74.步骤s201，监测向右穿梭按钮是否被触发。
75.其中，当用户在候选区中已选择部分数据项，且存在将已选择的数据项移动至已选区中的需求时，能够通过电子设备触发向右穿梭按钮。
76.步骤s202，响应于向右穿梭按钮被触发，在已选区中显示候选区中已选择的数据项。
77.需要说明的是，若在向右穿梭按钮被触发之前，已选区已显示有数据项，则在将已选区中显示候选区中已选择的数据项时，将候选区中已选择的数据项与已选区中已显示的数据项进行合并，然后将合并后的数据项映射至已选区中。
78.步骤s203，在候选区中保留对已选择的数据项的显示，且将候选区中已选择的数据项设置为禁用状态，禁用状态表示数据项不能被选择。
79.其中，在将数据项从候选区中移动至已选区中之后，电子设备将候选区中的对应数据项设置为禁用状态，便于用户查看。
80.在上述可选实施例中，当用户在候选区中已选择部分数据项，且存在将已选择的数据项移动至已选区中的需求时，能够通过电子设备触发向右穿梭按钮，以使电子设备在
已选区中显示已选择的数据项，并且还能够保留在候选区中显示已选择的数据项，这样用户能够对比两个区域中的数据项，便于查看，信息显示效果较好。
81.可选地，穿梭框为树形穿梭框，在已选区中显示候选区中已选择的数据项的实现方式包括：若确定已选择的数据项属于至少一个层级，则按照至少一个层级，在已选区中显示已选择的数据项。
82.其中，候选区提供了树形结构显示的功能，已选区也提供了树形结构显示的功能。其中，候选区数组中的数据项以树结构的形式存储，例如，一个层级对应的层级节点，属于这一层级的数据项与该层级节点对应存储，且电子设备针对候选区还设置有候选区已选数组(leftselectnode)，该候选区已选数组用于存储候选区中已选择的数据项。电子设备针对已选区还设置有已选区数组，该已选区数组用于存储已选区所显示的数据项，且该数据项是从候选区中移动得到的。且电子设备还针对已选区设置有已选区可选数组(rightselectkey)，该已选区可选数组用于存储已选区中能够被选择的数据项。且电子设备还针对已选区设置有已选区已选数组(rightselectnode)，该已选区已选数组用于存储已选区中已选择的数据项。
83.该可选实现方式在树形穿梭框的两侧，均以树结构对数据项进行显示，从而将数据项之间的层级关系完整的体现给用户，实现了数据的层级显示，直观性更好。
84.在上述可选实施例中，穿梭按钮还包括向左穿梭按钮，在已选区中显示有至少一个数据项且该至少一个数据项中存在已选择的数据项的情况下，本技术提供的穿梭框构建方法还包括向左穿梭流程。图4是根据一示例性实施例示出的一种向左穿梭流程的示意图，如图4所示，该向左穿梭流程包括以下步骤：
85.步骤s301，监测向左穿梭按钮是否被触发。
86.步骤s302，响应于向左穿梭按钮被触发，将已选区中已选择的数据项清空，并取消对候选区中对应数据项的禁用状态的设置。
87.具体地，电子设备针对已选区设置有已选区可选数组，该已选区可选数组用于存储已选区中能够被选择的数据项，则电子设备响应于向左穿梭按钮被触发，将已选区可选数组映射至已选区。
88.在上述图2所示实施例的基础上，在一种可选实施例中，穿梭框还具有全选功能，则目标组件还包括全选组件，穿梭框构建方法还包括：分别将全选组件在候选区和已选区中进行配置，以在候选区和已选区中显示全选按钮，全选按钮用于在被触发时将对应区域中所显示的数据项选中；响应于任一区域中的全选按钮被触发，在确定全选按钮当前对应的按钮标识为全选标识的情况下，将区域中显示的数据项设置为选中状态，将区域对应的可选数组设置为空，将按钮标识设置为取消全选标识，可选数组包含能够被选择的数据项；在确定全选按钮当前对应的按钮标识为取消全选标识的情况下，将区域中已全选的数据项设置为待选状态，将已全选的数据项放到区域对应的可选数组中，将按钮标识设置为全选标识。
89.其中，全选按钮在候选区以及已选区中的显示位置和显示样式可以根据需要设置，本实施例对此不加以限定。区域可以为候选区或已选区。
90.图5是根据一示例性实施例示出的一种全选流程的示意图，如图5所示，该全选流程包括以下步骤：
91.步骤s401，响应于任一区域中的全选按钮被触发，获取全选按钮当前对应的按钮标识。
92.步骤s402，确定全选按钮当前对应的按钮标识是否为全选标识。
93.若确定全选按钮当前对应的按钮标识为全选标识，则执行步骤s403；若全选按钮当前对应的按钮标识为取消全选标识，则执行步骤s406。例如，全选标识可以为true，取消全选标识可以为false。
94.步骤s403，确定全选按钮所属的区域。
95.若确定全选按钮所属的区域为候选区，则执行步骤s404；若确定全选按钮所属的区域为已选区，则执行步骤s405。
96.步骤s404，将候选区中显示的数据项设置为选中状态，将候选区可选数组设置为空，将按钮标识设置为取消全选标识。
97.步骤s405，将已选区中显示的数据项设置为选中状态，将已选区可选数组设置为空，将按钮标识设置为取消全选标识。
98.步骤s406，确定全选按钮所属的区域。
99.若确定全选按钮所属的区域为候选区，则执行步骤s407；若确定全选按钮所属的区域为已选区，则执行步骤s408。
100.步骤s407，将候选区中已全选的数据项设置为待选状态，将已全选的数据项放到候选区可选数组中，将按钮标识设置为全选标识。
101.步骤s408，将已选区中已全选的数据项设置为待选状态，将已全选的数据项放到已选区可选数组中，将按钮标识设置为全选标识。
102.在上述可选实施例中，在穿梭框的两侧，分别提供了全选功能，触发左侧的全选按钮，左侧的数据项被选中，通过触发向右穿梭按钮，一键将已选择的数据项转移到右侧，此时左侧全量的数据项仍可查看，只不过设置为禁用状态，实现了数据项的一键转移，相应地，在上述操作之后，触发右侧的全选按钮，右侧的数据项被选中，通过触发向左穿梭按钮，一键将已选择的数据项转移到左侧，此时将左侧此前设置为禁用状态的数据项设置为可选状态，且右侧所显示的数据项清空，提高了使用效率，同时给用户提供查看全量数据项的功能，保证了数据项的完整性。
103.在上述图2所示实施例的基础上，在一种可选实施例中，穿梭框还具有搜索功能，目标组件还包括搜索组件，穿梭框构建方法还包括：分别将搜索组件在候选区和已选区中进行配置，以在候选区和已选区中显示搜索框，搜索框用于基于所输入的关键字在对应区域内进行搜索；响应于获取到在任一区域中的搜索框中输入的关键字，则从区域中所显示的数据项中搜索与关键字匹配的数据项；显示搜索到的与关键字匹配的数据项。
104.其中，搜索框在候选区以及已选区中的显示位置和显示样式可以根据需要设置，本实施例对此不加以限定。区域可以为候选区或已选区。
105.图6是根据一示例性实施例示出的一种搜索流程的示意图，如图6所示，该搜索流程包括以下步骤：
106.步骤s501，获取在任一区域中的搜索框中输入的关键字。
107.步骤s502，确定该区域是否为候选区。
108.若该区域为候选区，则执行步骤s503，若该区域为已选区，则执行步骤s506。
109.步骤s503，从候选区中所显示的数据项中搜索与关键字匹配的数据项。
110.若搜索到与关键字匹配的数据项，则执行步骤s504；若未搜索到与关键字匹配的数据项，则执行步骤s505。
111.步骤s504，显示搜索到的与关键字匹配的数据项。
112.步骤s505，显示候选区数组所包括的数据项。
113.步骤s506，从已选区中所显示的数据项中搜索与关键字匹配的数据项。
114.若搜索到与关键字匹配的数据项，则执行步骤s507；若未搜索到与关键字匹配的数据项，则执行步骤s508。
115.步骤s507，显示搜索到的与关键字匹配的数据项。
116.步骤s508，显示已选区数组所包括的数据项。
117.在上述可选实施例中，在穿梭框的两侧，分别提供了搜索功能，通过检索关键字，筛选出符合要求的数据项，从而显示符合要求的数据项，便于用户观察快速定位所需要的数据项，实现了数据项的快速定位。
118.需要说明的是，若与关键字匹配的数据项处于选中状态或禁用状态，则在显示与关键字匹配的数据项时，保留该选中状态或禁用状态。
119.需要说明的是，本技术提供的穿梭框构建方法提供了全选功能、搜索功能和刷新功能，各功能可以根据用户需求进行配置，从而实现对应的功能。例如针对各功能分别设置三个标识参数，对应标识参数为true时提供相应的功能，对应标识参数为false时不提供相应的功能。
120.本技术中的全选按钮可以由antd中的复选框(checkbox)组件实现，树形结构可以由树(tree)组件实现，刷新按钮、穿梭按钮可以由按钮(button)组件实现，搜索框可以由输入(input)组件实现。例如，图7是根据一示例性实施例示出的一种穿梭框的示意图，如图7所示，树形穿梭框的左侧为候选区，候选区中的左上角显示有全选按钮，右上角显示有刷新按钮，全选按钮和刷新按钮的下方显示有搜索框，搜索框的下方区域用于以树形结构显示数据项，树形穿梭框的右侧为已选区，已选区中的左上角显示有全选按钮，全选按钮的下方显示有搜索框，搜索框的下方区域用于以树形结构显示数据项，候选区和已选区中间显示有向右穿梭按钮“转入”和向左穿梭按钮“转出”。
121.下面通过一个示例对本技术提供的穿梭框构建方法对应的应用场景进行举例说明。页面开发人员在遇到用户提出的需求时，例如，用户希望能够通过树形穿梭框实现区域授权的操作，要求：操作能全选实现全区域一键授权；支持搜索，能快速定位要授权的区域；支持刷新，对于用户新增的区域可以一键刷新快速同步数据；要求右侧树形展示，能直观的看到已授权区域的级联关系；要求定制显示样式，不同于原有组件库的颜色及大小。则页面开发人员需要编写用于解决该需求的程序代码。可以先通过电子设备事先绘制好穿梭框组件，然后在编写程序代码时，在需要显示的页面位置引入穿梭框组件，然后输入穿梭框配置参数，根据本技术提供的穿梭框构建方法构建穿梭框，并根据需求确定页面样式，例如字体、字号、按钮颜色、形状、大小等，然后根据需求编写样式文件，最后提交代码上传发版，从而完成了对功能需求的支持。
122.本技术针对相关技术中的穿梭框增加了全选功能、搜索功能和刷新功能，实现数据项的一键转移、快速定位、立即更新，能够更灵活的适配多种应用场景，和各种应用场景
之间的融合性更好，易于页面开发人员使用。并且候选区能够全量展示数据项，已经穿梭的数据项以禁用状态显示，保证直观显示数据的完整性。并且候选区还增加了刷新功能，保证了数据项的立即更新，并且，还可以借助于选择组件为层级节点设置对应的选择控件，从而提示用户可以选择层级节点，提示效果更佳。
123.图8是根据一示例性实施例示出的一种穿梭框构建装置的结构示意图，如图8所示，本实施例中，穿梭框构建装置600可以设置在电子设备中，穿梭框构建装置600包括：
124.获取模块601，用于获取用户输入的穿梭框配置参数，并对穿梭框配置参数进行解析以获得穿梭框对应的数据源接口及目标组件，数据源接口用于获取在穿梭框中显示的数据项，目标组件包括刷新组件，刷新组件用于刷新在穿梭框中显示的数据项；
125.映射模块602，用于调用数据源接口以获得多个数据项，并将多个数据项映射至穿梭框对应的候选区，候选区用于对待选择数据项进行显示，穿梭框还包括已选区，已选区用于对已选择数据项进行显示；
126.配置模块603，用于将刷新组件在候选区中进行配置，以在候选区中显示刷新按钮，刷新按钮用于在被触发时调用数据源接口以获得最新的数据项。
127.可选地，将刷新组件在候选区中进行配置，以在候选区中显示刷新按钮之后，装置600还包括刷新模块，刷新模块用于：
128.响应于刷新按钮被触发，将候选区中的数据项清空；
129.调用数据源接口以获得最新的多个数据项；
130.将最新的多个数据项映射至候选区。
131.可选地，若确定在刷新按钮被触发之前候选区中存在已选择的数据项，则装置600还包括：
132.设置模块，用于若确定最新的多个数据项中包括已选择的数据项，则将对应数据项设置为选中状态。
133.可选地，候选区显示在穿梭框的左侧区域，已选区显示在穿梭框的右侧区域，穿梭框还包括穿梭按钮，穿梭按钮包括向右穿梭按钮，装置600还包括：
134.显示模块，用于响应于向右穿梭按钮被触发，在已选区中显示候选区中已选择的数据项；
135.显示模块，用于在候选区中保留对已选择的数据项的显示，且将候选区中已选择的数据项设置为禁用状态，禁用状态表示数据项不能被选择。
136.可选地，穿梭框为树形穿梭框，显示模块，用于若确定已选择的数据项属于至少一个层级，则按照至少一个层级，在已选区中显示已选择的数据项。
137.可选地，目标组件还包括全选组件，装置600还包括：
138.配置模块603，还用于分别将全选组件在候选区和已选区中进行配置，以在候选区和已选区中显示全选按钮，全选按钮用于在被触发时将对应区域中所显示的数据项选中；
139.设置模块，用于响应于任一区域中的全选按钮被触发，在确定全选按钮当前对应的按钮标识为全选标识的情况下，将区域中显示的数据项设置为选中状态，将区域对应的可选数组设置为空，将按钮标识设置为取消全选标识，可选数组包含能够被选择的数据项；
140.设置模块，用于在确定全选按钮当前对应的按钮标识为取消全选标识的情况下，将区域中已全选的数据项设置为待选状态，将已全选的数据项放到区域对应的可选数组
中，将按钮标识设置为全选标识。
141.可选地，目标组件还包括搜索组件，装置600还包括：
142.配置模块603，还用于分别将搜索组件在候选区和已选区中进行配置，以在候选区和已选区中显示搜索框，搜索框用于基于所输入的关键字在对应区域内进行搜索；
143.搜索模块，用于响应于获取到在任一区域中的搜索框中输入的关键字，则从区域中所显示的数据项中搜索与关键字匹配的数据项；
144.显示模块，用于显示搜索到的与关键字匹配的数据项。
145.本实施例提供的穿梭框构建装置可以执行对应方法实施例的技术方案，其实现原理和技术效果与对应方法实施例类似，在此不再一一赘述。
146.本技术实施例还提供了一种电子设备。电子设备旨在各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、大型计算机和其它适合的计算机。
147.图9是根据一示例性实施例示出的一种电子设备的结构示意图。如图9所示，电子设备700包括：处理器701以及与处理器701通信连接的存储器702。
148.存储器702存储有计算机执行指令；处理器701执行存储器702存储的计算机执行指令，以实现本技术所提供的穿梭框构建方法。
149.其中，本技术实施例中，存储器702和处理器701通过总线连接。总线可以是工业标准体系结构(industry standard architecture，isa)总线、外部设备互连(peripheral component interconnect，pci)总线或扩展工业标准体系结构(extended industry standard architecture，eisa)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
150.本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本技术的实现。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。
151.在示例性实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有计算机执行指令，该计算机执行指令被处理器执行时用于实现本技术提供的穿梭框构建方法。
152.在示例性实施例中，还提供了一种计算机程序产品，包括计算机执行指令，当该计算机程序产品中的计算机执行指令被处理器执行时用于实现本技术提供的穿梭框构建方法。
153.需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本技术并不受所描述的动作顺序的限制，因为依据本技术，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于可选实施例，所涉及的动作和模块并不一定是本技术所必须的。
154.进一步需要说明的是，虽然流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次
进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
155.应该理解，上述的装置实施例仅是示意性的，本技术的装置还可通过其它的方式实现。例如，上述实施例中单元/模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如，多个单元、模块或组件可以结合，或者可以集成到另一个系统，或一些特征可以忽略或不执行。
156.另外，若无特别说明，在本技术各个实施例中的各功能单元/模块可以集成在一个单元/模块中，也可以是各个单元/模块单独物理存在，也可以两个或两个以上单元/模块集成在一起。上述集成的单元/模块既可以采用硬件的形式实现，也可以采用软件程序模块的形式实现。
157.集成的单元/模块如果以硬件的形式实现时，该硬件可以是数字电路，模拟电路等等。硬件结构的物理实现包括但不局限于晶体管，忆阻器等等。若无特别说明，处理器可以是任何适当的硬件处理器，比如中央处理器(central processing unit，cpu)、图形处理器(graphics processing unit，gpu)、专用集成电路(application specific integrated circuit，asic)、数字信号处理器(digital signal processor，dsp)、可编程逻辑器件(programmable logic device，pld)、现场可编程门阵列(field programmable gate array，fpga)、控制器、微控制器、微处理器或其他电子元件。若无特别说明，存储器可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如u盘、随机存取存储器(random-access memory，ram)、静态随机存取存储器(static random-access memory，sram)，动态随机存取存储器(dynamic random-access memory，dram)，增强动态随机存取存储器(enhanced dynamic random-access memory，edram)，电可擦除可编程只读存储器(electrically erasable programmable read-only memory，eeprom)，可擦除可编程只读存储器(erasable programmable read-only memory，eprom)，可编程只读存储器(programmable read-only memory，prom)，只读存储器(read-only memory，rom)，阻变式存储器(resistive random access memory，rram)，高带宽内存hbm(high-bandwidth memory)，混合存储立方hmc(hybrid memory cube)，磁存储器，快闪存储器，磁盘、光盘、移动硬盘或磁碟等各种可以存储程序代码的介质。
158.集成的单元/模块如果以软件程序模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储器中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储器中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本技术各个实施例方法的全部或部分步骤。
159.在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。上述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
160.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本技术的其它实施方案。本技术旨在涵盖本技术的任何变型、用途或者适应性变化，这些变型、用途或
者适应性变化遵循本技术的一般性原理并包括本技术未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本技术的真正范围和精神由下面的权利要求书指出。
161.应当理解的是，本技术并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本技术的范围仅由所附的权利要求书来限制。

技术特征：
1.一种穿梭框构建方法，其特征在于，包括：获取用户输入的穿梭框配置参数，并对所述穿梭框配置参数进行解析以获得穿梭框对应的数据源接口及目标组件，所述数据源接口用于获取在所述穿梭框中显示的数据项，所述目标组件包括刷新组件，所述刷新组件用于刷新在所述穿梭框中显示的数据项；调用所述数据源接口以获得多个数据项，并将所述多个数据项映射至所述穿梭框对应的候选区，所述候选区用于对待选择数据项进行显示，所述穿梭框还包括已选区，所述已选区用于对已选择数据项进行显示；将所述刷新组件在所述候选区中进行配置，以在所述候选区中显示刷新按钮，所述刷新按钮用于在被触发时调用所述数据源接口以获得最新的数据项。2.根据权利要求1所述的方法，其特征在于，所述将所述刷新组件在所述候选区中进行配置，以在所述候选区中显示刷新按钮之后，所述方法还包括：响应于所述刷新按钮被触发，将所述候选区中的数据项清空；调用所述数据源接口以获得最新的多个数据项；将所述最新的多个数据项映射至所述候选区。3.根据权利要求2所述的方法，其特征在于，若确定在所述刷新按钮被触发之前所述候选区中存在已选择的数据项，则所述将所述最新的多个数据项映射至所述候选区之后，所述方法还包括：若确定所述最新的多个数据项中包括所述已选择的数据项，则将对应数据项设置为选中状态。4.根据权利要求1所述的方法，其特征在于，所述候选区显示在所述穿梭框的左侧区域，所述已选区显示在所述穿梭框的右侧区域，所述穿梭框还包括穿梭按钮，所述穿梭按钮包括向右穿梭按钮，所述方法还包括：响应于所述向右穿梭按钮被触发，在所述已选区中显示所述候选区中已选择的数据项；在所述候选区中保留对所述已选择的数据项的显示，且将所述候选区中所述已选择的数据项设置为禁用状态，所述禁用状态表示所述数据项不能被选择。5.根据权利要求4所述的方法，其特征在于，所述穿梭框为树形穿梭框，所述在所述已选区中显示所述候选区中已选择的数据项，包括：若确定所述已选择的数据项属于至少一个层级，则按照所述至少一个层级，在所述已选区中显示所述已选择的数据项。6.根据权利要求1-5任一项所述的方法，其特征在于，所述目标组件还包括全选组件，所述方法还包括：分别将所述全选组件在所述候选区和所述已选区中进行配置，以在所述候选区和所述已选区中显示全选按钮，所述全选按钮用于在被触发时将对应区域中所显示的数据项选中；响应于任一区域中的所述全选按钮被触发，在确定所述全选按钮当前对应的按钮标识为全选标识的情况下，将所述区域中显示的数据项设置为选中状态，将所述区域对应的可选数组设置为空，将所述按钮标识设置为取消全选标识，所述可选数组包含能够被选择的数据项；
在确定所述全选按钮当前对应的按钮标识为取消全选标识的情况下，将所述区域中已全选的数据项设置为待选状态，将已全选的数据项放到所述区域对应的可选数组中，将所述按钮标识设置为全选标识。7.根据权利要求1-5任一项所述的方法，其特征在于，所述目标组件还包括搜索组件，所述方法还包括：分别将所述搜索组件在所述候选区和所述已选区中进行配置，以在所述候选区和所述已选区中显示搜索框，所述搜索框用于基于所输入的关键字在对应区域内进行搜索；响应于获取到在任一区域中的所述搜索框中输入的关键字，则从所述区域中所显示的数据项中搜索与所述关键字匹配的数据项；显示搜索到的与所述关键字匹配的数据项。8.一种穿梭框构建装置，其特征在于，包括：获取模块，用于获取用户输入的穿梭框配置参数，并对所述穿梭框配置参数进行解析以获得穿梭框对应的数据源接口及目标组件，所述数据源接口用于获取在所述穿梭框中显示的数据项，所述目标组件包括刷新组件，所述刷新组件用于刷新在所述穿梭框中显示的数据项；映射模块，用于调用所述数据源接口以获得多个数据项，并将所述多个数据项映射至所述穿梭框对应的候选区，所述候选区用于对待选择数据项进行显示，所述穿梭框还包括已选区，所述已选区用于对已选择数据项进行显示；配置模块，用于将所述刷新组件在所述候选区中进行配置，以在所述候选区中显示刷新按钮，所述刷新按钮用于在被触发时调用所述数据源接口以获得最新的数据项。9.一种电子设备，其特征在于，包括：处理器以及与所述处理器通信连接的存储器；所述存储器存储计算机执行指令；所述处理器执行所述存储器存储的计算机执行指令，以实现如权利要求1至7任一项所述的穿梭框构建方法。10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如权利要求1至7任一项所述的穿梭框构建方法。

技术总结
本申请提供一种穿梭框构建方法、装置、设备及介质，可用于计算机技术领域。该方法包括：获取用户输入的穿梭框配置参数，并对所述穿梭框配置参数进行解析以获得穿梭框对应的数据源接口及目标组件；调用所述数据源接口以获得多个数据项，并将所述多个数据项映射至所述穿梭框对应的候选区；将所述刷新组件在所述候选区中进行配置，以在所述候选区中显示刷新按钮，所述刷新按钮用于在被触发时调用所述数据源接口以获得最新的数据项。可见本申请提供的穿梭框构建方法提供了刷新功能，能够较好的满足用户的需求，实用性较强。实用性较强。实用性较强。


技术研发人员：张琪
受保护的技术使用者：联通数字科技有限公司 联通云数据有限公司
技术研发日：2023.06.20
技术公布日：2023/9/20