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

TreeView 문의드립니다. > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS TreeView 문의드립니다.

페이지 정보

작성자 아이지니 작성일 2022-11-16 13:47 조회 875회 댓글 0건
제품 버전 : 5.20211.781
컨트롤 이름 : TreeView

본문

안녕하세요.

TreeView 형태를 formatItem을 가지고 아래 이미지 처럼 바꾸려고 하는데 수정이 가능한지 확인부탁드립니다.

방식은 총 2가지 방식을 생각하고 있습니다.

1번의 방식이 불가할 경우 2번처럼 구성을 하려고 합니다. 



[1번 방식]

1) 구성

-항목1 노드 : 명칭수정: input / 형태 : select / 삭제 : button

-항목2 노드 : 클릭시 위와 동일함 

[2번 방식]

1)구성 

-항목1 노드 : 명칭수정: input / 형태 : button / 삭제 : button

-항목2 노드 : 클릭시 위와 동일함 


2)방식

1. 형태의 선택2 버튼을 클릭시 모달창을 띄움

2. 모달창의 형태의 select 값을 선택하면 모달창이 닫히면서  treeview의 형태 선택2버튼에 내용이 바뀌는 방식


 

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

댓글목록

등록된 댓글이 없습니다.

2 답변

ReactJS Re: TreeView 문의드립니다.

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

페이지 정보

작성자 GCK다이애나 작성일 2022-11-17 15:44 댓글 0건

본문

첨부파일

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


문의 주신 내용에 대해 현재 확인 중에 있으며 확인되는 대로 답변 드리도록 하겠습니다.

답변이 지연되어 죄송합니다.


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

ReactJS Re: TreeView 문의드립니다.

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

페이지 정보

작성자 GCK다이애나 작성일 2022-11-18 09:16 댓글 0건

본문

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


문의 주신 formatItem 이벤트를 이용하여 TreeView 컨트롤의 노드에 HTML 요소를 추가하는 방법에 대해 답변 드립니다.

아래의 코드와 같이 createElement 메서드를 이용하여 특정 노드에 HTML 요소를 추가해 보시기 바랍니다.

  function formatItem (s, e) {
    if (e.dataItem.input) {
      let input = wjCore.createElement('<input type="text"/>');
      input.addEventListener("click", clickListener);
      e.element.appendChild(input);
    } else if (e.dataItem.button) {
      let btn = wjCore.createElement("<button onclick='alert('')'>버튼</button>");
      btn.addEventListener("click", clickListener);
      e.element.appendChild(btn);
    } else if (e.dataItem.select) {
      let select = wjCore.createElement(
        '<select name="job"><option value="">리스트박스</option><option value="옵션1">옵션1</option><option value="옵션2">옵션2</option><option value="옵션3">옵션3</option></select>'
      );
      select.addEventListener("click", clickListener);
      e.element.appendChild(select);
    }
  };

이때, Input 과 같은 HTML 요소를 클릭 시 노드를 확장 시키는 TreeView 컨트롤의 클릭 이벤트로 인해 노드 내부에 생성된 요소에 포커스가 유지되지 않습니다.

HTML 요소에 포커스가 유지되기 위해서는 아래의 코드와 같이 이벤트 버블링을 방지하는 코드를 작성해 주시기 바랍니다.

  function clickListener(e) {
    e.stopPropagation();
  }


- createElement API 문서

- formatItem API 문서


API 문서를 공유 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.


그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

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