js树搜索框查询所有匹配节点及父节点（纯js实现）

// 搜索框输入查询树节点（纯前台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实现）

最新文章

热门文章