实习笔记02-zTree搜索高亮

是光颜鸭

已于 2022-10-13 22:17:03 修改

阅读量720

点赞数

分类专栏：实习笔记文章标签： javascript 开发语言 ecmascript

于 2022-10-11 09:09:03 首次发布

本文链接：https://blog.youkuaiyun.com/m0_52248951/article/details/127241684

版权

本文记录了在zTree中实现搜索功能并高亮显示搜索结果节点的过程，同时介绍了如何设置滚动条定位到第一个搜索结果。通过html和js的编写，实现了在zTree上搜索节点并自动滚动到搜索结果的功能。

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

一、功能描述

在zTree上添加搜索功能，将搜索到的节点高亮显示并让滚动条定位到搜索到的第一个节点上。

二、实现

1、html编写

<input id="searchTem" type="text">
<div class="ui-layout-content">
     <div class="ztree" id="tree"></div>
</div>

2、js编写

    //收起树，只展示根节点的下一级节点
    function closeTree() {
        var tree = $.fn.zTree.getZTreeObj('tree');
        //获取 zTree 的全部节点数据将节点数据转换为简单 Array 格式
        var nodes = tree.transformToArray(tree.getNodes());
        for(var i=0;i<nodes.length;i++){
            if(nodes[i].level == 0){
                console.log(nodes[i].name);
                //根节点展开
                tree.expandNode(no