// 搜索框输入查询树节点(纯前台js)

//name 搜索框输入的值;

//wgObj.dwtreeDateAll  为树 的全量数据

// titleArr        与输入框匹配的节点数组

//arrTarget        未去重的目标节点数组

//wgObj.dwtreeDate   已去重的目标节点数组

//树数据结构

// [{
// "id": "ff8080814c972f3f014c981aae1a1501",
// "parentId": "ff8080814c972f3f014c981aae0f14ff",
// "title": "电力调度控制中心"
// },
// {
// "id": "ff8080814c972f3f014c981aae5c150d",
// "parentId": "ff8080814c972f3f014c981aae1a1501",
// "title": "继电保护室"
// },
// {
// "id": "ff8080814c972f3f014c981aae67150f",
// "parentId": "ff8080814c972f3f014c981aae1a1501",
// "title": "方式计划室"
// },
// {
// "id": "ff8080814c972f3f014c981aae7e1513",
// "parentId": "ff8080814c972f3f014c981aae0f14ff",
// "title": "安全监察质量部(保卫部)"
// },
// {
// "id": "ff80808157b555570157d538316a1dd1",
// "parentId": "ff8080814c972f3f014c981aa9e61441",
// "title": "客户服务中心"
// }
// ]

////////输入框搜索时调用的方法
function SearchTreeByName(name) {
//先获取与输入框匹配的节点数组
var titleArr = [];
wgObj.dwtreeDateAll.forEach(function (o) {
if (o.title.lastIndexOf(name) != -1) titleArr.push(o);
});
//递归检索节点(子节点符合父节点不符合也需要带上父节点)
var arrTarget = [];
for (var i = 0; i < titleArr.length; i++) {
var forFn = function (id, name) {
for (var j = 0; j < wgObj.dwtreeDateAll.length; j++) {
if (id == wgObj.dwtreeDateAll[j].id) {
arrTarget.push(wgObj.dwtreeDateAll[j]);
forFn(wgObj.dwtreeDateAll[j].parentId, name);
break
}
}
};
forFn(titleArr[i].id, titleArr[i].title);
}
//递归完之后去重取目标树数据
wgObj.dwtreeDate = [];
for (var i = 0; i < arrTarget.length; i++) {
var flag = 1;
for (var j = 0; j < wgObj.dwtreeDate.length; j++) {
if (wgObj.dwtreeDate[j].id == arrTarget[i].id && wgObj.dwtreeDate[j].parentId == arrTarget[i].parentId) {
flag = 0;
}
}
flag === 1 ? wgObj.dwtreeDate.push(arrTarget[i]) : false;
}
    return wgObj.dwtreeDate;
}
//单纯的获取当前节点的所有父节点方法(递归)
// function familyTree (arr1, id) {
// var temp = []
// var forFn = function (arr, id) {
// for (var i = 0; i < arr.length; i++) {
// var item = arr[i]
// if (item.id === id) {
// temp.push(item)
// forFn(arr1, item.parentId)
// break
// } else {
// if (item.children) {
// forFn(item.children, id)
// }
// }
// }
// }
// forFn(arr1, id)
// return temp
// }

js树搜索框查询所有匹配节点及父节点(纯js实现)的更多相关文章

  1. chosen.jquery.js 搜索框只能从头匹配的解决思路+方法

    chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...

  2. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

  3. 实现DataTables搜索框查询结果高亮显示

    DataTables是封装好的HTML表格插件,丰富了HTML表格的样式,提供了即时搜索.分页等多种表格高级功能.用户可以编写很少的代码(甚至只是使用官方的示例代码),做出一个漂亮的表格以展示数据.关 ...

  4. 使用pycharm搜索框和正则表达式匹配内容

    使用pycharm搜索框和正则表达式匹配内容原创薯饼__ 最后发布于2019-03-04 19:28:53 阅读数 660 收藏展开有时候我们要在爬虫网站中匹配各种各样的文本块,以获取需要的信息,每一 ...

  5. python selenium 时间搜索框查询和日期大小比较

    在做selenium自动化的时候遇到 时间搜索框查询(如下图)并比较查询结果是否在输入的时间之类. 首先,第一步要做的就是选择时间,并获取到所选时间的文本信息 如上图所示,获取到的时间搜索框并没有文本 ...

  6. (Elementui) el-tree 中英文过滤以及搜索到父子显示子节点,搜索到子节点显示父节点(filter-node-method)

    案例下载:https://gitee.com/tudoumlp/just1.git   (vue-ele-demo) 在项目中,会遇到树节点的搜索,中文和英文搜索,以及搜索到父节点匹配的时候同步显示该 ...

  7. 树形下拉框ztree、获取ztree所有父节点,ztree的相关方法

    参考:jQuery树形控件zTree使用小结 需求 添加.修改的终端需要选择组织,组织是多级架构(树状图显示). 思路 1.因为下拉框需要树状图显示,所以排除使用select做下拉框,改用input  ...

  8. MySQL递归查询树状表的子节点、父节点具体实现

    mysql版本(5.5.6等等)尚未支持循环递归查询,和sqlserver.oracle相比,mysql难于在树状表中层层遍历的子节点.本程序重点参考了下面的资料,写了两个sql存储过程,子节点查询算 ...

  9. JS获取子节点、父节点和兄弟节点的方法实例总结

    转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...

  10. SQL 用;with 由所有的子节点查询到树结构中所有父节点

    1.所有的子节点查询到树结构中所有父节点 RETURNS @Tree Table(PID )) as begin --DECLARE @ID VARCHAR() --SET @ID = ' ;with ...

随机推荐

  1. ionic+vue+capacitor系列笔记--01项目初始化

    Ionic 是什么? Ionic 是一款接近原生的 Html5 移动 App 开发框架,只需要你会 HTML.CSS 和 JavaScript 就可以开发移动 App应用,使用最基础的 Web 技术创 ...

  2. NLP知识图谱项目合集(信息抽取、文本分类、图神经网络、性能优化等)

    NLP知识图谱项目合集(信息抽取.文本分类.图神经网络.性能优化等) 这段时间完成了很多大大小小的小项目,现在做一个整体归纳方便学习和收藏,有利于持续学习. 1. 信息抽取项目合集 1.PaddleN ...

  3. 如何通过Java应用程序添加或删除 PDF 中的附件

    当我们在制作PDF文件或者PPT演示文稿的时候,为了让自己的文件更全面详细,就会在文件中添加附件.并且将相关文档附加到 PDF 可以方便文档的集中管理和传输.那么如何添加或删除 PDF 中的附件呢?别 ...

  4. vue学习笔记(三)---- vue-resource

    一.使用vue-resource发起get请求 github仓库地址:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md ...

  5. 1 - 【RocketMQ 系列】CentOS 7.6 安装部署RocketMQ

    一.前置准备工作 CentOS 7.6 安装 jdk1.8 openjdk 1.查看JDK版本 yum search java|grep jdk 2.安装jdk1.8,安装默认的目录为: /usr/l ...

  6. elasticsearch之日期类型有点怪

    一.Date类型简介 elasticsearch通过JSON格式来承载数据的,而JSON中是没有Date对应的数据类型的,但是elasticsearch可以通过以下三种方式处理JSON承载的Date数 ...

  7. 视觉十四讲:第六讲_g2o图优化

    g2o是一个基于图优化的库,图优化是把优化问题表现为一种图的方式.一个图由若干个顶点和边组成. 顶点表示优化变量,边表示误差项. g2o的使用步骤: 1.定义顶点和边的类型: 2.构建图: 3.选择优 ...

  8. 【JS入门小游戏】01-骰子游戏

    01-骰子游戏 游戏出自Udemy的JS课程中提到的一个游戏,课程主要是对JS部分进行详细的从0开始的讲解,本篇文章是对整个游戏的分析,包括HTMK,CSS和JS,也主要对JS进行刨析. 游戏链接:h ...

  9. JZOJ 2022.07.18【提高组A】模拟

    \(\text{T1}\) 很容易想到用 \(f_1 f_2 ... f_k\) 来表示第 \(n\) 项 发现重点关注指数即可,即我们要递推 \(f_1 ... f_k\) 对应的指数 递推涉及 \ ...

  10. SQL语句中 left join 后用 on 还是 where,区别大了!

    前天写SQL时本想通过 A left B join on and 后面的条件来使查出的两条记录变成一条,奈何发现还是有两条. 后来发现 join on and 不会过滤结果记录条数,只会根据and后的 ...