zTree实现模糊搜索并高亮显示

最新推荐文章于 2024-09-04 22:20:58 发布

ConardLi

最新推荐文章于 2024-09-04 22:20:58 发布

阅读量7k

点赞数 1

分类专栏： js 文章标签： zTree 插件

本文链接：https://blog.youkuaiyun.com/qq_34149805/article/details/78223922

版权

本文介绍了如何使用zTree插件实现模糊搜索功能，并在搜索后高亮显示匹配节点。通过设置fontCss属性根据节点的highlight属性控制高亮显示。同时，使用全局变量oldNodes保存上次查询结果，以便清除之前的高亮状态。

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

zTree是一个常用的树插件，本身对搜索功能封装的不是太完美，为了实现下列效果我对其进行了二次封装。

首先，在定义tree时我们将它高亮和普通显示的样式定义好。

        var setting = {
            view: {
                fontCss: function (treeId, treeNode) {
                    return (!!treeNode.highlight) ? {color: "#A60000", "font-weight": "bold"} : {
                            color: "#fff", "font-weight": "normal"