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
// }