【js前端实现layui搜索树结构数据】

最新推荐文章于 2024-06-02 17:50:48 发布

常安cc

最新推荐文章于 2024-06-02 17:50:48 发布

阅读量488

点赞数

文章标签： javascript 前端 layui

本文链接：https://blog.csdn.net/m0_55546349/article/details/130421082

版权

本文介绍了如何在js前端使用layui库实现搜索树结构数据。需求是前端定义数组并实现模糊搜索，搜索时显示匹配关键字的节点及其所有子节点和父节点。通过layui.tree.render()展示树形数据，并提供了搜索功能的实现思路和关键代码。

摘要由CSDN通过智能技术生成

js前端实现layui搜索树结构数据

自己的需求：前端搜索树形结构，数组是前端定义死的；

在这里插入图片描述

// 实现思路：还是通过递归遍历所有子节点来判断是否包含字符串，末节点若不包含则删除自身，
//这样上一级父节点就变成了末节点，再进行一样的判断即可，
// 主要工作量在于对js数组和对象的删除需要有一定的理解，实现代码如下：  
//过滤搜索条件
function reFilter(array, searchCont) {
   
     for (var i = 0; i < array.length; i++) {
   
         var data = array[i];
         // 找到了就循环下一次
         if (data.title.indexOf(searchCont) > -1) {
   
             continue;
         }
         if (data.children && data.children.length > 0) {
   
             reFilter(data.children, searchCont);
         }
         // 找不到就返回-1---删除
         if (!((data.children && data.children.length > 0))