easyui tree实现模糊查询树节点并高亮显示

最新推荐文章于 2022-02-09 11:33:57 发布

张漂亮’s Blog

最新推荐文章于 2022-02-09 11:33:57 发布

阅读量730

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/zxjdC/article/details/109215689

该博客介绍了如何利用EasyUI的搜索框功能，结合JavaScript实现对树形结构数据的搜索。当输入关键字并回车后，代码会遍历树结构，查找包含关键字的节点，将其展开并高亮显示。同时，搜索功能也支持多级节点的搜索，并能自动展开匹配节点的所有父级节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

在查询框中输入关键字，按回车键，查询树中所有相关的节点，展开查到结果的文件夹，并将结果高亮显示。效果如下图：

在这里插入图片描述

实现：

<div class="easyui-tabs" data-options="fit:true">
    <!-- 查询工具 -->
    <div title="脚本管理">
        <div class="zTreeDemoBackground left">
            。。。
        </div>
    </div>
    <div title="元数据" class="metaDbInfoTree" >
        <input class="easyui-searchbox" data-options="searcher:searchDept,prompt:'请输入表名称'"
               id="searchText" onchange="resetTreeNode()" style="width: 186px; height: 32px;"></input>
        <ul