안녕하세요 그레이프시티입니다.
문의 주신 내용에 대해 답변 드립니다.
노드를 추가, 삭제 혹은 수정 하는 이벤트를 호출하여 추가, 삭제 혹은 수정된 노드를 배열로 저장해 노드가 변경된 내역을 추적할 수 있습니다.
아래의 샘플을 참고해 보시기 바랍니다.
샘플은 다음과 같은 방법으로 구현 되었습니다.
- 노드 편집 추적
1. TreeView 컨트롤의 isReadOnly 의 속성을 false 로 지정합니다.
2. 노드가 편집 모드에 들어가면 호출되는 이벤트 nodeEditStarted 로 노드의 인스턴스 값을 불러옵니다.
3. 불러온 인스턴스의 값을 이용하여 편집 되기 전 노드의 header 속성 값을 oldheader 변수에 저장합니다.
4. 노드가 편집 모드에서 벗어나면 호출되는 이벤트 nodeEditEnded 로 노드의 인스턴스 값을 불러옵니다.
5. 불러온 인스턴스의 값을 이용하여 편집 된 후 노드의 header 속성 값을 newheader 변수에 저장합니다.
6. oldheader 변수의 값과 newheader 변수 값을 비교하여 노드의 header 속성 값이 변경 되었다면 Nodes 배열에 각각의 값을 저장합니다.
7. 편집된 노드 내역을 '수정된 노드' 영역 하단에 표시합니다. - 노드 추가 추적
1. 노드를 추가하는 버튼 '자식 노드 추가' 클릭 시 onAddNodeClick 이벤트 호출합니다.
2. 추가되는 노드를 newItem 변수에 저장합니다.
3. newItem 변수의 값을 addItem 배열에 push() 메서드를 이용해 저장하여 추가된 노드 내역을 '추가된 노드' 영역 하단에 표시합니다. - 노드 제거 추적
1. 제거할 노드를 선택 후, '선택한 노드 삭제' 클릭 시 onNoSelClick 이벤트 호출합니다.
2. 제거 되는 노드를 deleteItem 변수에 저장합니다.
3. deleteItem 변수의 값을 delItem 배열에 push() 메서드를 이용해 저장하여 제거된 노드 내역을 '삭제된 노드' 영역 하단에 표시합니다.
단, 삭제한 노드가 추가된 노드인 경우 addItem 배열에서 해당 노드를 pop() 메서드를 이용하여 제거합니다.
- 노드 추가 (React) 데모
- 노드 제거 (React) 데모
- 노드 편집 (React) 데모
- nodeEditStarted API 문서
- nodeEditEnded API 문서
API 문서를 공유 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
감사합니다
그레이프시티 드림