! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

treeview에서 수정, 추가, 삭제된 node를 확인할 수 있나요? > Q&A | 토론

본문 바로가기

ReactJS treeview에서 수정, 추가, 삭제된 node를 확인할 수 있나요?

페이지 정보

작성자 tommy 작성일 2022-08-23 14:47 조회 1,176회 댓글 0건
제품 버전 : 2021 | 5.20211.781
컨트롤 이름 : treeview

본문

링크 예제를 보면 grid의 경우 itemsEdited, itemsAdded, itemsRemoved를 사용하여 수정, 추가, 삭제된 아이템을 가져올 수 있습니다.

(trackChanges 로도 구현 가능)


TreeView에서도 해당 기능이 필요한데 어떻게 구현할 수 있나요?



  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

1 답변

ReactJS Re: treeview에서 수정, 추가, 삭제된 node를 확인할 수 있나요?

추천1 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK다이애나 작성일 2022-08-24 15:50 댓글 0건

본문

첨부파일

안녕하세요 그레이프시티입니다.


문의 주신 내용에 대해 답변 드립니다.

노드를 추가, 삭제 혹은 수정 하는 이벤트를 호출하여 추가, 삭제 혹은 수정된 노드를 배열로 저장해 노드가 변경된 내역을 추적할 수 있습니다.

아래의 샘플을 참고해 보시기 바랍니다.

샘플은 다음과 같은 방법으로 구현 되었습니다.

  • 노드 편집 추적
    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 문서를 공유 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다


그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.