CN112182310B - 一种内置实时搜索的通用树形组件实现方法 - Google Patents

Abstract

本发明公开了一种内置实时搜索的通用树形组件实现方法，所述实现方法包括：从具有复杂HTML结构的树节点中提取具有标准数据结构的数据源；设计一种展开键计算方法，以控制搜索中的相关树节点展开关闭功能内置；通过DOM控制方法修改展开后的树节点实现搜索高亮显隐内置。该内置实时搜索的通用树形组件实现方法将搜索框与树形组件统一封装，在保持原树形组件树节点高度可定制的基础上，通过输入内容计算展开键，实现内置相关树节点实时展开；结合DOM控制方法修改展开后的树节点，实现搜索内容的高亮、噪音节点的隐藏，从而实现内置搜索、交互风格统一、可自定义树节点、适用于不同场景的搜索树通用组件。

Description

一种内置实时搜索的通用树形组件实现方法

技术领域

本发明涉及计算机前端开发技术领域，具体为一种内置实时搜索的通用树形组件实现方法。

背景技术

在前端开发中，经常使用树形组件作为目录、文件夹、表格、模型的容器，目前的前端主流UI组件库为编程者提供了丰富的树形组件定制方案，让树节点可高度定制，业务场景中常出现搜索和树形组件配套使用的情况，然而已有的树形组件搜索实现方案难以支撑不同的复杂的应用场景、各场景分别实现搜索方案难以保障交互体验的一致性、重复地组合树与搜索带来了额外的研发开销，亟需一种可以适用不同场景的内置了实时搜索的通用树形组件实现方法。

当前的搜索树实现方案通常有两种：第一种搜索树实现方案在各场景分别组合树形组件和输入组件，搜索的实现由开发者各自编码，这样的解决方案不但难以统一交互风格，而且无法供多场景复用，增加了开发的时间成本和人力成本，第二种搜索树实现方案只支持最简单的树搜索，难以支持各场景自定义开发的特殊树节点，比如右键菜单、额外图标等。

所以我们提出了一种内置实时搜索的通用树形组件实现方法，以便于解决上述中提出的问题。

发明内容

本发明的目的在于提供一种内置实时搜索的通用树形组件实现方法，以解决上述背景技术提出的目前市场上搜索树无法供多场景复用，增加了开发的时间成本和人力成本，以及难以支持各场景自定义开发的特殊树节点的问题。

为实现上述目的，本发明提供如下技术方案：一种内置实时搜索的通用树形组件实现方法：所述实现方法包括：

从具有复杂HTML结构的树节点中提取具有标准数据结构的数据源；

设计一种展开键计算方法，以控制搜索中的相关树节点展开关闭功能内置；

通过DOM控制方法修改展开后的树节点实现搜索高亮显隐内置。

优选的，所述从具有复杂HTML结构的树节点中提取具有标准数据结构的数据源，是指从不同场景下传入的各种复杂树本体结构中归纳出一种数据分析模式，从而将不同的树本体转换为一种具备标准数据格式的原始树数据originTreeData。

优选的，所述设计一种展开键计算方法，以控制搜索中的相关树节点展开关闭功能内置，是指根据步骤一中得到的原始树数据originTreeData和用户输入值inputValue计算可能处于深层的目标节点的所有相关节点键值数组，并设置为展开键。

优选的，所述通过DOM控制方法修改展开后的树节点实现搜索高亮显隐内置，是指通过treeWalker遍历展开后的树DOM元素，根据用户输入值inputValue处理筛选到的元素实现搜索内容的高亮和显隐，从而进一步突出搜索结果；

treeWalker的起点定义为树外壳，并为不同的树外壳定义随机生成的类名；

treeWalker的节点类型定义为用于定义树节点的元素类型；

treeWalker的高亮筛选器条件定义为元素的第一个子节点是否为文本节点、元素的className是否为highlight；

treeWalker的显隐筛选器条件定义为所有树节点。

为了解决上述技术问题，本发明所采用的技术方案是：

从具有复杂HTML结构的树节点中提取具有标准数据结构的数据源，然后设计一种展开键计算方法，以控制搜索中的相关树节点展开关闭，得到展开的新树后，通过DOM控制方法修改展开后的树节点实现搜索高亮显隐内置，包括以下步骤：

1、解析数据源

步骤一：由于在不同场景下传入树节点的HTML结构各不相同，因此若要实现一个可复用的通用搜索树形组件，需要从不同场景下传入的各种复杂树本体结构中归纳出一种数据分析模式，从而将不同的树本体转换为一种具备标准数据格式的原始树数据originTreeData；

所设计的数据分析模式核心在于树节点名的提取，外部传入的原始数据源title属性中记录有节点名信息，其在经过底层解析后会呈现层层嵌套的数据结构，而树节点名处于title深处，通过title传入的HTML结构是不确定的，解析的对象既可能是结构简单的HTML元素，也可能是具有复杂结构的HTML元素，分析从外部传入的原始数据源经过底层解析后的结构发现，无论是复杂元素还是简单元素，其真正的树节点名均以简单数据类型string存储在嵌套结构最深处，因此可归纳出数据分析模式：层层解析传入的title属性，以所访问的对象是否为string类型作为跳出判定条件，以所访问对象是否为数组类型作为递归深入条件，直到找到所访问节点对象的名称文本信息并记录为固定属性name存储在原始树数据originTreeData内；

2、相关节点展开

步骤二：由于所搜索的内容可能在文件夹的深层，快速定位所搜索内容应只展开搜索内容的所有相关树节点，搜索树形组件使用者无需关心搜索相关的展开逻辑，应将此功能内置在搜索树形组件中，以供多场景复用，要实现该功能，可根据步骤一中得到的原始树数据originTreeData和用户输入值inputValue，计算目标节点的相关节点键值并推入展开键数组；

在步骤一中进行了树数据解析，已将originTreeData元素的文本信息属性名固定为name，在做展开键计算时，直接对比元素的name是否包含用户输入值inputValue，若子元素存在匹配的结果，则将当前父元素item的键值推入展开键数组expanededKeys，若不匹配，则继续递归判定深层的数据是否有匹配的结果，直至整个originTreeData遍历完毕，获取所有和inputValue相关的树节点键值，实现展开所搜索节点的所有相关节点；

3、节点高亮与显隐

步骤三：为进一步突出搜索结果，去除无关噪音节点，应将搜索结果做高亮处理，并隐藏其他无关树节点，由于搜索只是树的一种状态，为尽可能减少对树其他功能的影响，应采取一种纯展示层面的屏蔽与样式处理，前端技术中DOM控制法可以很好地完成这项任务，一方面DOM控制法是对当前渲染在页面上的DOM节点进行处理，由于步骤二中展开了所有与搜索内容相关的树节点，因此可直接在其基础上进行DOM控制；另一方面DOM控制法不涉及底层逻辑，可尽可能减少对树底层其他功能的影响，treeWalker是DOM控制法中一种常用的遍历DOM节点的方法，借助treeWalker可以通过其提供的API快速遍历树的DOM结构，在步骤二得到的展开后的树形组件上，定义基于treeWalker的DOM控制方法，根据搜索内容实现树节点的显隐和文本高亮，DOM2定义了用于辅助完成顺序遍历DOM结构的类型treeWalker，treeWalker的核心参数为：DOM遍历的起点、遍历的节点类型、筛选器；

这里将DOM遍历的起点定义为树外壳，并为不同的树外壳定义随机生成的类名，可避免出现不同树的搜索结果互相影响问题；

遍历的节点类型为用于定义树节点的元素类型；

筛选器是DOM控制的核心，高亮筛选器的筛选核心条件有2种：元素的第一个子节点是否为文本节点、元素类名是否包含方法内置的高亮关键类名，这2种筛选条件分别代表未经过处理的文本节点和经过高亮的文本节点：若所处理节点为具有内置高亮类名的元素，说明该节点存在上一次DOM处理的高亮噪音，此时要还原其原本DOM形态，避免与下一次的高亮处理互相冲突，若所处理节点为纯粹的文本节点元素innerText，则将其根据用户输入值inputValue所在的索引断开，替换inputValue文本节点元素为类名为内置高亮类名的span元素；

显隐筛选器的筛选核心条件为所有具备树节点特征的元素，在DOM中若将顶层设置为展示即可展示内部全部元素，若将顶层设置为隐藏则可隐藏内部所有元素，无需定位到深层文本节点，DOM可以快捷地通过innerText属性直接获取当前元素及其所有子元素的文本信息，将所有文本信息连成一串并用空格隔开，即可获得当前元素及其素有子元素的节点名字符串集合，此时判定该字符串集合是否包含inputValue，即可判定是否应该展示当前元素，因此显隐筛选器条件为当前节点及其所有子节点的innerText组成的字符串是否包含inputValue，如上设计，在步骤二的基础上对树进行DOM控制，即可实现搜索树的显隐与高亮控制。

与现有技术相比，本发明的有益效果是：该内置实时搜索的通用树形组件实现方法将搜索框与树形组件统一封装，在保持原树形组件树节点高度可定制的基础上，通过输入内容计算展开键，实现内置相关树节点实时展开；结合DOM控制方法修改展开后的树节点，实现搜索内容的高亮、噪音节点的隐藏，从而实现内置搜索、交互风格统一、可自定义树节点、适用于不同场景的搜索树通用组件，且本发明的技术效果包括：

(1)从外部传进的树本体中提取具有标准数据结构的数据源，从而保证搜索树节点的自定义性，提升组件普适性；

(2)定义搜索树展开控制函数控制搜索中的树展开节点，从而实现内置搜索展开功能，无需外部二次处理，优化搜索展示体验，

(3)通过DOM控制方法实现实时搜索下的节点显隐与文字高亮，实现搜索内容高亮显隐内置。

附图说明

图1为本发明数据源解析原理图；

图2为本发明相关节点展开键计算流程图；

图3为本发明treeWalker设计思维导图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1-3，本发明提供一种技术方案：一种内置实时搜索的通用树形组件实现方法。

工作原理：在使用该内置实时搜索的通用树形组件实现方法之前，需要先检查装置整体情况，确定能够进行正常工作；

步骤一：树形组件传入children为数据源，如图1-图3所示，将children重组为具备标准数据结构的原始树数据originTreeData，外部传入数据源的title属性中记录有节点名信息，图1-图3中的title属性在经过底层解析后会呈现如图1-图3所示的层层嵌套的数据结构，数据解析的流程原理图如图1，遍历数据结构，找到遍历入口children[i].props.title，判断title.props.children是否为数组，若为数组则遍历解析数组直到遍历完毕，若不为数组且为string类型，则传入的title为最简单的文本形式，直接输出得到的节点名称并继续遍历；若传入的title非数组也非string类型，则传入的title为一个无名称树节点，与搜索无关排除；在对类型为数组的title.props.children的不断的遍历与递归中，以所访问的对象是否为string类型作为跳出判定条件，以所访问对象是否为数组类型作为递归深入条件，直到找到所访问节点对象的名称文本信息并记录为固定属性name，当所有元素解析完毕，即可得到最终的原始数据树originTreeData；

步骤二：计算与用户输入值inputValue相匹配的相关节点键值集合，根据步骤一中得到的原始树数据originTreeData和用户输入值inputValue，计算目标节点的相关节点键值并推入展开键数组，展开键计算流程如图2，判断item.children[i].name是否包含用户输入值inputValue，若存在匹配的结果，则将当前item的键值推入展开键数组expanededKeys；若不匹配，则继续递归判定深层的数据是否有匹配的结果，直至整个originTreeData遍历完毕，获取所有和inputValue相关的树节点键值，实现展开所搜索节点的所有相关节点；

步骤三：根据搜索内容实现树节点的显隐和文本高亮，在步骤二得到的展开后的树形组件基础上进行DOM显隐高亮控制，定义基于treeWalker的DOM控制方法，treeWalker的3个核心参数为：DOM遍历的起点、遍历的节点类型、筛选器，其设计思维导图如图1；

将DOM遍历的起点定义为树外壳，并为不同的树外壳定义随机生成的类名；

遍历的节点类型为用于定义树节点的元素类型。

高亮筛选器的筛选核心条件有2种：元素的第一个子节点是否为文本节点、元素的className是否为内置高亮类名highlight，这2种筛选条件分别代表未经过处理的文本节点和经过高亮的文本节点：若所处理节点为具有hightlight的元素，说明该节点存在上一次DOM处理的高亮噪音，此时要还原其原本DOM形态，避免与下一次的高亮处理互相冲突；若所处理节点为纯粹的文本节点innerText，则将其根据inputValue断开，替换inputValue为类名为highlight的span元素，其余文本为普通元素，整合最终结果代替原文本节点innerText，具体步骤如下：

(1)用户输入值inputValue；

(2)treeWalker启动，遍历树节点node；

(3)如果node.classname包含树形组件的高亮关键类名highlight，则将整个node节点替换为node节点的innerText属性，实现节点内容还原；

(4)然后将清洁后的node节点根据用户输入值inputValue所在的索引值断开，将inputValue文本节点替换为带有highlight类名的高亮元素，实现高亮；

(5)如果当前node为null则停止遍历，否则treeWalker继续遍历。

显隐筛选器的筛选核心条件为所有具备树节点特征的元素，DOM可以直接通过innerText属性直接获取当前元素及其所有子元素的文本信息，将所有文本信息连成一串，为区分文字间隔，使用空格隔开文本信息，获得当前元素及其素有子元素的节点名字符串集合，在处理节点显隐前首先还原所有节点的显隐类名噪音，然后判定节点名字符串集合是否包含inputValue并重新处理显隐，具体步骤如下：

(1)用户输入值inputValue；

(2)treeWalker启动，遍历树节点node；

(3)如果node.classname包含树形组件的内置显隐类名show或者hide，则删除node.classname中的类名show或者hide；

(4)然后使用空格将node.innerText连接起来，并判断所得到的节点名字符串是否包含用户输入值inputValue；

(5)如果包含则将当前node.classname设置为显示类show，否则设置为隐藏类hide，实现显隐；

(6)如果当前node为null则停止遍历，否则treeWalker继续遍历。

按如上设计，在步骤二的基础上对树进行DOM控制，即可实现搜索树的显隐与高亮控制。

尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (4)

1.一种内置实时搜索的通用树形组件实现方法，其特征在于：所述实现方法包括：

从具有复杂HTML结构的树节点中提取具有标准数据结构的数据源；树形组件传入children为数据源，将children重组为具备标准数据结构的原始树数据originTreeData，外部传入数据源的title属性中记录有节点名信息，title属性在经过底层解析后会呈现层层嵌套的数据结构，遍历数据结构，找到遍历入口children[i].props.title，判断title.props.children是否为数组，若为数组则遍历解析数组直到遍历完毕，若不为数组且为string类型，则传入的title为最简单的文本形式，直接输出得到的节点名称并继续遍历；若传入的title非数组也非string类型，则传入的title为一个无名称树节点，与搜索无关排除；在对类型为数组的title.props.children的不断的遍历与递归中，以所访问的对象是否为string类型作为跳出判定条件，以所访问对象是否为数组类型作为递归深入条件，直到找到所访问节点对象的名称文本信息并记录为固定属性name，当所有元素解析完毕，即可得到最终的原始数据树originTreeData；

设计一种展开键计算方法，以控制搜索中的相关树节点展开关闭功能内置；计算与用户输入值inputValue相匹配的相关节点键值集合，根据得到的原始树数据originTreeData和用户输入值inputValue，计算目标节点的相关节点键值并推入展开键数组，展开键计算，判断item.children[i].name是否包含用户输入值inputValue，若存在匹配的结果，则将当前item的键值推入展开键数组expanededKeys；若不匹配，则继续递归判定深层的数据是否有匹配的结果，直至整个originTreeData遍历完毕，获取所有和inputValue相关的树节点键值，实现展开所搜索节点的所有相关节点；

通过DOM控制方法修改展开后的树节点实现搜索高亮显隐内置；根据搜索内容实现树节点的显隐和文本高亮，在得到的展开后的树形组件基础上进行DOM显隐高亮控制，定义基于treeWalker的DOM控制方法，treeWalker的3个核心参数为：DOM遍历的起点、遍历的节点类型、筛选器，将DOM遍历的起点定义为树外壳，并为不同的树外壳定义随机生成的类名；

遍历的节点类型为用于定义树节点的元素类型。

2.根据权利要求1所述的一种内置实时搜索的通用树形组件实现方法，其特征在于：所述从具有复杂HTML结构的树节点中提取具有标准数据结构的数据源，是指从不同场景下传入的各种复杂树本体结构中归纳出一种数据分析模式，从而将不同的树本体转换为一种具备标准数据格式的原始树数据originTreeData。

3.根据权利要求1所述的一种内置实时搜索的通用树形组件实现方法，其特征在于：所述设计一种展开键计算方法，以控制搜索中的相关树节点展开关闭功能内置，是指根据步骤一中得到的原始树数据originTreeData和用户输入值inputValue计算可能处于深层的目标节点的所有相关节点键值数组，并设置为展开键。

4.根据权利要求1所述的一种内置实时搜索的通用树形组件实现方法，其特征在于：所述通过DOM控制方法修改展开后的树节点实现搜索高亮显隐内置，是指通过treeWalker遍历展开后的树DOM元素，根据用户输入值inputValue处理筛选到的元素实现搜索内容的高亮和显隐，从而进一步突出搜索结果；

treeWalker的起点定义为树外壳，并为不同的树外壳定义随机生成的类名；

treeWalker的节点类型定义为用于定义树节点的元素类型；

treeWalker的高亮筛选器条件定义为元素的第一个子节点是否为文本节点、元素的className是否为highlight；

treeWalker的显隐筛选器条件定义为所有树节点。