可搜索树形穿梭框实现方法、装置和电子设备与流程

1.本发明涉及计算机技术领域，具体而言，涉及一种可搜索树形穿梭框实现方法、装置和电子设备。


背景技术：

2.随着互联网的普及，网站的数量以及应用也越来越多。在网页应用中，用户经常会有这样的需求，即用户需要在一个列表清单中选择出需要的列表项，并需要将选择出的列表项与未选择的列表项进行区分展示。而穿梭框即可以满足用户的这类操作需求。
3.传统的穿梭框，例如ant design vue和elementui等主流组件库仅提供了普通树形穿梭框组件，在用户需要基于自身需求进行搜索精准定位时，这类传统的主流组件库难以满足用户的需求。而又如el-tree-transfer插件等可实现可搜索穿梭框，但是这类插件在用户搜索时，由于只能基于原有的树形组件结构进行展示，因此，会将搜索内容的每个对象的每个层级完全展示，存在数据量庞大，不利于查找的缺陷。


技术实现要素：

4.本发明的目的包括，例如，提供了一种可搜索树形穿梭框实现方法、装置和电子设备，其能够支持搜索功能的基础上，优化搜索穿梭框插件的局限性。
5.本发明的实施例可以这样实现：
6.第一方面，本发明提供一种可搜索树形穿梭框实现方法，所述方法包括：
7.在提供的树形穿梭框组件的基础上添加搜索框，并绑定用于实现搜索功能的搜索方法；
8.获取用于穿梭的树形组件数据，并对树形组件中的对象进行层层遍历，将所述树形组件数据中每个遍历到的对象的属性信息放置于构建的fulltreedict数组中，其中，在fulltreedict数组中每个对象处于相同层级；
9.在获取到搜索值时，根据所述搜索值对所述fulltreedict数组中的对象的属性信息进行搜索；
10.将搜索得到的对象按照层级关系进行拼接，将拼接结果放置于构建的searchtree数组中；
11.调用配置的展开方法，基于搜索得到的对象的属性信息得到一新的展开树形组件。
12.在可选的实施方式中，各所述对象的属性信息包括名称、值、父级属性以及子级属性；
13.所述将所述树形组件数据中每个遍历到的对象的属性信息放置于构建的fulltreedict数组中的步骤，包括：
14.根据所述树形组件数据提取每个遍历到的对象的属性信息中的名称、值以及父级属性；
15.将每个对象的名称、值以及父级属性放置于构建的fulltreedict数组中。
16.在可选的实施方式中，所述根据所述搜索值对所述fulltreedict数组中的对象的属性信息进行搜索的步骤，包括：
17.根据所述搜索值对所述fulltreedict数组中的对象的属性信息进行搜索，获得属性信息中名称包含所述搜索值的匹配对象。
18.在可选的实施方式中，所述调用配置的展开方法，基于搜索得到的对象的属性信息得到一新的展开树形组件的步骤，包括：
19.基于所述树形组件的树形结构，从所述匹配对象向上层进行层层遍历，直至遍历到树形结构的最高层时，得到所述匹配对象以及遍历到的各个对象的值；
20.调用配置的展开方法，将得到的值按照层级关系进行展开得到一新的展开树形组件。
21.在可选的实施方式中，所述基于所述树形组件的树形结构，从所述匹配对象向上层进行层层遍历，直至遍历到树形结构的最高层时，得到所述匹配对象以及遍历到的各个对象的值的步骤，包括：
22.基于所述树形组件的树形结构，判断所述匹配对象是否具有父级，若具有父级，则从所述匹配对象向上层进行层层遍历，直至遍历到树形结构的最高层时，将遍历到的各个对象以及匹配对象放置于构建的expandkeys数组中；
23.从所述fulltreedict数组中提取遍历到的各个对象以及匹配对象的值。
24.在可选的实施方式中，所述将搜索得到的对象按照层级关系进行拼接，将拼接结果放置于构建的searchtree数组中的步骤，包括：
25.从fulltreedict数组中提取搜索得到的对象的属性信息中的值；
26.将提取获得的各个对象的值按照层级结构关系进行拼接，并将拼接结果放置于构建的searchtree数组中。
27.在可选的实施方式中，所述树形穿梭框组件还包括候选框和选中框，所述方法还包括：
28.将所述新的展开树形组件展示于所述候选框，并将所述搜索值对应的匹配对象展示于所述选中框。
29.在可选的实施方式中，所述获取用于穿梭的树形组件数据的步骤，包括：
30.在所述树形穿梭框组件上绑定树形组件数据；
31.对所述树形组件数据进行复制，以获得用于穿梭的树形组件数据。
32.第二方面，本发明提供一种可搜索树形穿梭框实现装置，所述装置包括：
33.添加模块，用于在提供的树形穿梭框组件的基础上添加搜索框，并绑定用于实现搜索功能的搜索方法；
34.遍历模块，用于获取用于穿梭的树形组件数据，并对树形组件中的对象进行层层遍历，将所述树形组件数据中每个遍历到的对象的属性信息放置于构建的fulltreedict数组中，其中，在fulltreedict数组中每个对象处于相同层级；
35.搜索模块，用于在获取到搜索值时，根据所述搜索值对所述fulltreedict数组中的对象的属性信息进行搜索；
36.拼接模块，用于将搜索得到的对象按照层级关系进行拼接，将拼接结果放置于构
建的searchtree数组中；
37.展开模块，用于调用配置的展开方法，基于搜索得到的对象的属性信息得到一新的展开树形组件。
38.第三方面，本发明提供一种电子设备，所述电子设备包括处理器和存储器；其中所述存储器用于存储计算机程序，所述计算机程序由所述处理器加载并执行以实现如前述实施方式任一项所述的可搜索树形穿梭框实现方法。
39.本发明实施例的有益效果包括，例如：
40.本技术提供一种可搜索树形穿梭框实现方法、装置和电子设备，通过在提供的树形穿梭框组件的基础上添加搜索框，并绑定用于实现搜索功能的搜索方法，从而支持搜索功能。并且，通过对树形组件中的对象进行遍历，以将各对象的属性信息放置于数组中，在数组中每个对象处于相同层级。在获取到搜索值时，基于搜索值对数组中的属性信息进行搜索，将搜索的对象按照层级关系进行拼接，将拼接结果放置于构建的数组中。并且，通过展开方法得到一新的展开树形组件。本方案在支持搜索功能的基础上，通过构建新的展开树形组件，以避免按照原有的树形组件进行每个层级的完全展示，缩小了数据量，更便于查找。
附图说明
41.为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
42.图1为本技术实施例提供的可搜索树形穿梭框实现方法的流程图；
43.图2为图1中步骤s102包含的子步骤的流程图；
44.图3为图1中步骤s102包含的子步骤的另一流程图；
45.图4为图1中步骤s104包含的子步骤的流程图；
46.图5为图1中步骤s105包含的子步骤的流程图；
47.图6为本技术实施例提供的电子设备的结构框图；
48.图7为本技术实施例提供的可搜索树形穿梭框实现装置的功能模块框图。
49.图标：110-存储介质；120-处理器；130-可搜索树形穿梭框实现装置；131-添加模块；132-遍历模块；133-搜索模块；134-拼接模块；135-展开模块；140-通信接口。
具体实施方式
50.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。
51.因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范
围。
52.应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
53.需要说明的是，在不冲突的情况下，本发明的实施例中的特征可以相互结合。
54.请参阅图1，为本技术实施例提供的可搜索树形穿梭框实现方法的流程图，该可搜索树形穿梭框实现方法有关的流程所定义的方法步骤可以由具备数据、页面处理功能的电子设备，例如，个人计算机、服务器等予以实现。下面将对图1所示的具体流程进行详细阐述。
55.s101，在提供的树形穿梭框组件的基础上添加搜索框，并绑定用于实现搜索功能的搜索方法。
56.s102，获取用于穿梭的树形组件数据，并对树形组件中的对象进行层层遍历，将所述树形组件数据中每个遍历到的对象的属性信息放置于构建的fulltreedict数组中，其中，在fulltreedict数组中每个对象处于相同层级。
57.s103，在获取到搜索值时，根据所述搜索值对所述fulltreedict数组中的对象的属性信息进行搜索。
58.s104，将搜索得到的对象按照层级关系进行拼接，将拼接结果放置于构建的searchtree数组中。
59.s105，调用配置的展开方法，基于搜索得到的对象的属性信息得到一新的展开树形组件。
60.本实施例中，可以在现有的ant design vue或elementui等ui组件库的基础上进行改进优化。其中，ant design vue是一种组件的风格与ant design保持同步，组件的html结构和css样式也保持一致的vue版ui组件库。elementui是一种基于vue实现的一套不依赖业务的ui组件库，提供了丰富的pc端组件，减少用户对常用组件的封装，降低了开发的难易程度。
61.而穿梭框是常用的一种选取器，它使用直观方式在左右列表框移动数据，实现数据的多项选择。树形穿梭框则常用于多分组之间的筛选，能应对多分组中选择具体数据、名单的情况。
62.因此，所述的提供的树形穿梭框组件可以是ant design vue或elementui，以下以ant design vue为例进行说明。
63.本实施例中，可以在提供的树形穿梭组件基础上添加相关参数即可添加搜索框。例如可在ant design vue的a-transfer组件添加show-search参数，便可添加搜索框。然后，再绑定相关的搜索方法，以便后续只要具有搜索操作时，即可调用该搜索方法。例如，可以绑定@search方法onsearch，即只要具有搜索操作就会调用onsearch方法，以实现搜索功能。
64.获取用于穿梭的树形组件数据，树形组件数据为一构成树形结构的数组。也即，在树形组件中包含多个对象，该多个对象构成树形结构。为了解耦树形组件数据中对象之间的关联，例如，解耦对象与其下级对象之间的关联。本实施例中，可对树形组件中的对象进行遍历，并且获得每个对象的属性信息，将每个对象的属性信息放置于构建的fulltreedict数组。存放于fulltreedict数组中的各个对象之间将不再具有树形层级结构
关系，而是每个对象均处于相同层级。
65.基于添加的搜索框，用户可通过搜索框进行搜索，从而获得用户的搜索值。基于获得的搜索值，则可以在上述数组fulltreedict中存放的各个对象的属性信息中进行搜索查找，可以将搜索得到的对象按照层级关系拼接在一起，例如，将其名称进行拼接，最后将拼接结果存入构建的searchtree数组。
66.并且，可以基于搜索查找的结果构建一新的展开树形组件。
67.本实施例所提供的可搜索树形穿梭框实现方案，通过对现有ui组件库的改进，可以使得构建的树形穿梭框支持可搜索功能。并且通过构建新的展开树形组件，可避免按照原有的树形组件进行层级的完全展示，缩小了数据量，更便于查找。
68.请参阅图2，本实施例中，在上述步骤s102中获取用于穿梭的树形组件数据时，可以通过以下方式实现：
69.s1021，在所述树形穿梭框组件上绑定树形组件数据。
70.s1022，对所述树形组件数据进行复制，以获得用于穿梭的树形组件数据。
71.本实施例中，可在树形穿梭框组件ant design vue的a-transfer中的a-tree绑定treedata，也即树形组件数据。然后，通过javascript对treedata进行复制。其中，javascript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。具体地，可通过json.parse(json.stringify(treedata))复制得到fulltreedata，以作为用于穿梭的树形组件数据。
72.并且，可构建一新的数组searchtree，以用于后续搜索后展开的数据的存放展示。而在没有搜索操作的情况下，则展示的即为fulltreedata，在具有搜索操作的情况下，展示的即为数组searchtree中的数据。
73.本实施例中，通过复制原本的树形组件数据的方式，可以在不破坏原有的数据的前提后，对数据进行处理、搜索以及展开等。可以避免对源数据造成损害。
74.本实施例中，树形组件中具有多个对象，其中，每个对象具有多个属性，例如名称title、值key、父级属性parent和子级属性children。title即为对象所显示的名称。key为通过对象父级title用短横线连接生成的值，是唯一的。例如，第一层父级的key是“商品”，其子级的key则是“商品-日常用品”，如果还有子级则依次类推。parent为当前对象的父级的key值。children为当前对象的子级的完整数据，即同样包含了上述四个属性(如果是最后一个子级则没有children)。
75.请参阅图3，在上述步骤s102中对树形组件中的对象进行层层遍历时，则可以通过以下方式实现：
76.s1023，根据所述树形组件数据提取每个遍历到的对象的属性信息中的名称、值以及父级属性。
77.s1024，将每个对象的名称、值以及父级属性放置于构建的fulltreedict数组中。
78.本实施例中，先构建一新的fulltreedict数组。在对树形组件中每个对象进行遍历时，为了后续在对搜索结果进行展示时，避免将多余的子级进行展示。因此，本实施例中，可将每个对象的除去children以外的其他属性，如名称、值、父级属性放置于构建的fulltreedict数组。
79.而对于具有子级的对象，则对该对象的子级对象同样进行遍历，并且将遍历到的
子级对象的除其子级属性之外的其他属性放置于fulltreedict数组中。而在fulltreedict数组中所放置的多个对象，该多个对象不再像在树形组件中处于不同的层级关系，而是各个对象在数组中处于相同层级。在fulltreedict数组中只需要关注各个对象本身，而无需关注其处于的层级。
80.在上述基础上，用户在基于搜索框进行搜索时，可以通过以下方式实现：
81.根据所述搜索值对所述fulltreedict数组中的对象的属性信息进行搜索，获得属性信息中名称包含所述搜索值的匹配对象。
82.本实施例中，可在预先绑定的搜索方法onsearch中判断，如果有搜索值value，则对fulltreedict数组进行遍历。如果满足item.title.indexof(value)》-1，也即对象的属性信息中的名称包含这个搜索值时，则可以确定对应的对象为匹配对象。
83.在此基础上，在上述步骤s104中执行的拼接过程可以通过以下方式实现，请参阅图4：
84.s1041，从fulltreedict数组中提取搜索得到的对象的属性信息中的值。
85.s1042，将提取获得的各个对象的值按照层级结构关系进行拼接，并将拼接结果放置于构建的searchtree数组中。
86.本实施例中，在搜索过程中，对于搜索到对象，如果该对象具有parent字段，则可以将其进行拼接起来。通过fulltreedict数组映射出key值为item.parent的对象，并且，随着搜索进程的重复执行，直至搜索到最高层，也即第一层级父级时，此时可将搜索到的每个层级的对象的值按照层级结构关系拼接起来，并且将拼接结果放置于searchtree数组中。
87.并且，请参阅图5，本实施例中，在上述步骤s105中执行的展开过程可通过以下方式实现。
88.s1051，基于所述树形组件的树形结构，从所述匹配对象向上层进行层层遍历，直至遍历到树形结构的最高层时，得到所述匹配对象以及遍历到的各个对象的值。
89.s1052，调用配置的展开方法，将得到的值按照层级关系进行展开得到一新的展开树形组件。
90.基于确定出的匹配对象，基于树形组件的树形结构，往上层进行层层遍历，并且基于遍历的对象的值按照层级关系展开得到新的展开树形组件。
91.具体地，本实施例中，可以基于树形组件的树形结构，判断匹配对象是否具有父级，若具有父级，则从所述匹配对象向上层进行层层遍历，直至遍历到树形结构的最高层时，将遍历到的各个对象以及匹配对象放置于构建的expandkeys数组中。
92.从所述fulltreedict数组中提取遍历到的各个对象以及匹配对象的值。也即，对fulltreedict进行遍历，如果dictitem.key＝＝＝item.parent，就返回dictitem的数据，如此重复进行直至到树形结构的最高层，即没有parent参数为止。
93.而预先绑定的展开方法@expand方法onexpand，可控制所搜索的对象的值的自动展开，得到新的展开树形组件。
94.本实施例中，树形穿梭框组件还包括候选框和选中框，基于本实施例上述提供的实现流程，最终，可将新的展开树形组件展示于候选框，并将搜索值对应的匹配对象展示于选中框内。
95.如此，此时展示出来的即全部是满足搜索条件并且不包含多余子级的树形数据。
并且，搜索对象的名称也无需像现有技术中按每个层级完全展示出来，只需要展示搜索对象的名称即可。可以避免数据量庞大，并且影响美观的问题。
96.本实施例所提供的可搜索树形穿梭框实现方案，利用数据映射实现了每个层级数据的提取和拼接。利用遍历自身的方法，实现了获取每个层级的数据并且对其进行判断和数据处理。实现了可搜索穿梭框的优化，解决了如ant design vue和elementui等主流组件库没有提供搜索穿梭框的问题，同时优化了现有搜索穿梭框插件的局限性，以达到让可搜索树形穿梭框适用于更多的场景并让用户有更好的视觉体验。
97.请参阅图6，为本技术实施例提供的电子设备的示例性组件示意图，该电子设备可以是如个人计算机、服务器等。该电子设备中可具备信息数据、页面处理等功能，该电子设备可包括存储介质110、处理器120、可搜索树形穿梭框实现装置130及通信接口140。本实施例中，存储介质110与处理器120均位于电子设备中且二者分离设置。然而，应当理解的是，存储介质110也可以是独立于电子设备之外，且可以由处理器120通过总线接口来访问。可替换地，存储介质110也可以集成到处理器120中，例如，可以是高速缓存和/或通用寄存器。
98.可搜索树形穿梭框实现装置130可以理解为上述电子设备，或电子设备的处理器120，也可以理解为独立于上述电子设备或处理器120之外的在电子设备控制下实现上述可搜索树形穿梭框实现方法的软件功能模块。
99.如图7所示，上述可搜索树形穿梭框实现装置130可以包括添加模块131、遍历模块132、搜索模块133、拼接模块134和展开模块135。下面分别对该可搜索树形穿梭框实现装置130的各个功能模块的功能进行详细阐述。
100.添加模块131，用于在提供的树形穿梭框组件的基础上添加搜索框，并绑定用于实现搜索功能的搜索方法；
101.可以理解，该添加模块131可以用于执行上述步骤s101，关于该添加模块131的详细实现方式可以参照上述对步骤s101有关的内容。
102.遍历模块132，用于获取用于穿梭的树形组件数据，并对树形组件中的对象进行层层遍历，将所述树形组件数据中每个遍历到的对象的属性信息放置于构建的fulltreedict数组中，其中，在fulltreedict数组中每个对象处于相同层级；
103.可以理解，该遍历模块132可以用于执行上述步骤s102，关于该遍历模块132的详细实现方式可以参照上述对步骤s102有关的内容。
104.搜索模块133，用于在获取到搜索值时，根据所述搜索值对所述fulltreedict数组中的对象的属性信息进行搜索；
105.可以理解，该搜索模块133可以用于执行上述步骤s103，关于该搜索模块133的详细实现方式可以参照上述对步骤s103有关的内容。
106.拼接模块134，用于将搜索得到的对象按照层级关系进行拼接，将拼接结果放置于构建的searchtree数组中。
107.可以理解，该拼接模块134可以用于执行上述步骤s104，关于该拼接模块134的详细实现方式可以参照上述对步骤s104有关的内容。
108.展开模块135，用于调用配置的展开方法，基于搜索得到的对象的属性信息得到一新的展开树形组件。
109.可以理解，该展开模块135可以用于执行上述步骤s105，关于该展开模块135的详
细实现方式可以参照上述对步骤s105有关的内容。
110.在一种可能的实施方式中，各所述对象的属性信息包括名称、值、父级属性以及子级属性，所述遍历模块132可以用于：
111.根据所述树形组件数据提取每个遍历到的对象的属性信息中的名称、值以及父级属性；
112.将每个对象的名称、值以及父级属性放置于构建的fulltreedict数组中。
113.在一种可能的实施方式中，所述搜索模块133可以用于：
114.根据所述搜索值对所述fulltreedict数组中的对象的属性信息进行搜索，获得属性信息中名称包含所述搜索值的匹配对象。
115.在一种可能的实施方式中，所述展开模块135可以用于：
116.基于所述树形组件的树形结构，从所述匹配对象向上层进行层层遍历，直至遍历到树形结构的最高层时，得到所述匹配对象以及遍历到的各个对象的值；
117.调用配置的展开方法，将得到的值按照层级关系进行展开得到一新的展开树形组件。
118.在一种可能的实施方式中，所述展开模块135可以用于：
119.基于所述树形组件的树形结构，判断所述匹配对象是否具有父级，若具有父级，则从所述匹配对象向上层进行层层遍历，直至遍历到树形结构的最高层时，将遍历到的各个对象以及匹配对象放置于构建的expandkeys数组中；
120.从所述fulltreedict数组中提取遍历到的各个对象以及匹配对象的值。
121.在一种可能的实施方式中，所述拼接模块134可以用于：
122.从fulltreedict数组中提取搜索得到的对象的属性信息中的值；
123.将提取获得的各个对象的值按照层级结构关系进行拼接，并将拼接结果放置于构建的searchtree数组中。
124.在一种可能的实施方式中，所述树形穿梭框组件还包括候选框和选中框，所述可搜索树形穿梭框实现装置还包括展示模块，该展示模块可以用于：
125.将所述新的展开树形组件展示于所述候选框，并将所述搜索值对应的匹配对象展示于所述选中框。
126.在一种可能的实施方式中，上述添加模块131可以用于：
127.在所述树形穿梭框组件上绑定树形组件数据；
128.对所述树形组件数据进行复制，以获得用于穿梭的树形组件数据。
129.关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。
130.进一步地，本技术实施例还提供一种计算机可读存储介质，计算机可读存储介质存储有机器可执行指令，机器可执行指令被执行时实现上述实施例提供的可搜索树形穿梭框实现方法。
131.具体地，该计算机可读存储介质能够为通用的存储介质，如移动磁盘、硬盘等，该计算机可读存储介质上的计算机程序被运行时，能够执行上述可搜索树形穿梭框实现方法。关于计算机可读存储介质中的及其可执行指令被运行时，所涉及的过程，可以参照上述方法实施例中的相关说明，这里不再详述。
132.综上所述，本技术实施例提供的可搜索树形穿梭框实现方法、装置和电子设备，通过在提供的树形穿梭框组件的基础上添加搜索框，并绑定用于实现搜索功能的搜索方法，从而支持搜索功能。并且，通过对树形组件中的对象进行遍历，以将各对象的属性信息放置于数组中，在数组中每个对象处于相同层级。在获取到搜索值时，基于搜索值对数组中的属性信息进行搜索，将搜索的对象按照层级关系进行拼接，将拼接结果放置于构建的数组中。并通过展开方法得到一新的展开树形组件本方案在支持搜索功能的基础上，通过构建新的展开树形组件，以避免按照原有的树形组件进行每个层级的完全展示，缩小了数据量，更便于查找。
133.以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。