자바 스크립트를

Question

function formSelectedTree(totaldata, selectedIds) { 
    if (!Array.isArray(totaldata)) return; 
    for (var item of totaldata) { 
     if ((!item.children || item.children.length === 0)) { 
      selectedIds.map(function(id, index) { 
       if (parseInt(item.id) === parseInt(id)) { 
        item.isSelected = true 
        item.open = true 
       } 
      }) 
     } else { 
      this.formSelectedTree(item.children, selectedIds); 
     } 
    } 
    return totaldata 
} 

매개 변수를 사용하여 재귀 트리 수준의 계층 구조를 저장 : 오브젝트의

• totaldata 배열을
• selectedIds을 (JSON을 검색 할 수 있습니다) : 문자열의 배열을 (리프 노드의 아이디의) [ "1749", "1747"]

위의 재귀 함수는 json 객체와 같은 트리를 반복하는 것입니다. 백엔드에서 리프 노드의 ID를 얻고 있습니다.이 ID를 기반으로 리프 노드를 선택하고 부모 수준에서 트리 구조를 확장해야합니다.

'isSelected'부울 속성을 사용하여 선택을 처리합니다. 트리 노드의 확장은 'open'부울 속성을 사용하여 처리됩니다.

리프 노드에 대해 이러한 속성을 설정할 수 있습니다. 그러나 parent/sub-parent 수준에서 open = true를 설정하는 데 어려움을 겪습니다.

{ 
    "Data": [{ 
     "id": 1745, 
     "parentId": null, 
     "isSelected": false, 
     "open": false, 
     "children": [{ 
      "id": 1746, 
      "parentId": 1745, 
      "isSelected": false, 
      "open": false, 
      "children": [{ 
        "id": 1747, 
        "parentId": 1746, 
        "isSelected": false, 
        "open": false 
       }, 
       { 
        "id": 1748, 
        "parentId": 1746, 
        "isSelected": false, 
        "open": false, 
        "children": [{ 
         "id": 1749, 
         "parentId": 1748, 
         "isSelected": false, 
         "open": false 
        }] 
       } 
      ] 
     }] 
    }] 
} 

사람이 어려움을 달성 나를 도울 수 아래의 샘플 JSON 객체를 찾아주세요.

감사

Answer 1

이 예는 발생하는 각 노드에 인 parentNode 속성을 추가하고이 위치한 된 후 즉, 주어진 선택 리프 노드에 대한 모든 조상의 "열기"속성을 설정하는 데 사용합니다.

function formSelectedTree(totaldata, selectedIds, parentNode) { 
 
    if (!parentNode) parentNode = false; 
 
    if (!Array.isArray(totaldata)) return; 
 
    for (var item of totaldata) { 
 
    // set the parentNode property for each item we traverse 
 
    item.parentNode = parentNode; 
 
    if ((!item.children || item.children.length === 0)) { 
 
     selectedIds.map(function(id, index) { 
 
      if (parseInt(item.id) === parseInt(id)) { 
 
       item.isSelected = true 
 
       item.open = true 
 
       
 
       // since this is a leaf item that is selected/open, all its ancestors should be open too 
 
       var p = item.parentNode; 
 
       while (p) { 
 
        p.open = true; 
 
        // travel up through the hierarchy until parentNode doesn't exist (top level) 
 
        p = p.parentNode; 
 
       } 
 
      } 
 
     }) 
 
    } else { 
 
     this.formSelectedTree(item.children, selectedIds, item); 
 
    } 
 
    } 
 
    return totaldata; 
 
}

Answer 2

당신은 id위한 Set을 사용하여 다른 방식을 사용하는 모든 ID가 처리 된 경우, Array#some 짧은 회로를 사용할 수있다.

모든 하위 항목을 업데이트하려면 실제 노드뿐만 아니라 자식 노드의 콜백에 대해 작동하는 다른 재귀 함수를 사용할 수 있습니다.

문자열이 id 인 경우 세트를 만들기 전에 문자열을 데이터 유형으로 변환하는 것이 좋습니다.

function formSelectedTree(totaldata, selectedIds) { 
 

 
    function update(o) { 
 
     o.isSelected = true; 
 
     o.open = true; 
 
     o.children && o.children.forEach(update); 
 
    } 
 

 
    if (!Array.isArray(totaldata)) { 
 
     return; 
 
    } 
 
    return totaldata.some(function (item) { 
 
     if (selectedIds.has(item.id)) { 
 
      update(item); 
 
      selectedIds.delete(item.id); 
 
      return !selectedIds.size; 
 
     } 
 
     return item.children && formSelectedTree(item.children, selectedIds); 
 
    }); 
 
} 
 

 
var data = { "Data": [{ "id": 1745, "parentId": null, "isSelected": false, "open": false, "children": [{ "id": 1746, "parentId": 1745, "isSelected": false, "open": false, "children": [{ "id": 1747, "parentId": 1746, "isSelected": false, "open": false }, { "id": 1748, "parentId": 1746, "isSelected": false, "open": false, "children": [{ "id": 1749, "parentId": 1748, "isSelected": false, "open": false }] }] }] }] }; 
 

 
formSelectedTree(data.Data, new Set([1749, 1747])); 
 

 
console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }