TreeGrid Move & Copy (트리그리드 drag & drop으로 이동하기)

샘플개요

원본 즉, drag가 수행되는 treegrid 데이터를 타켓위치로 drag&drop하여 이동하거나 복사 할 수 있는 기능이 동적으로 생성되는 라이브러리입니다. drag이벤트가 발생하는 grid는 row 하위레벨에 해당하는 데이터까지 함께 이동합니다.

트리 그리드 복사 및 이동하기 예시

사용방법

1. 제공된 파일

treegrid.xfdl - 사용될 컴포넌트가 배치되며 사용할 옵션을 설정하는 화면 예제 form 파일

treegrid.xjs - treegrid 이동에 사용되는 이벤트 추가 및 로직이 작성된 스크립트 파일

 

2. 컴포넌트 배치 (nexacro studio Form Design)

해당 기능을 사용하기 위하여 필요한 최소의 컴포넌트는 drag(원본)이 되는 "Grid 컴포넌트"와 해당 그리드에 binding된 "Dataset 컴포넌트"입니다.

설명의 편의를 위하여 drop(타켓)이 되는 Grid 컴포넌트를 추가 배치하였습니다.

사용될 컴포넌트 배치 예시

3. 화면 동작 가이드

#1. Form 화면 로딩 시 지정된 설정 값 기준으로 drag(원본)이 되는 treegrid와 drop(타켓)이 되는 treegrid가 지정되며        해당 이벤트가 추가됩니다.

#2. drag(원본) grid와 drop(타켓) grid는 하나의 그리드 안에서 수행되어도 동일한 결과가 실행됩니다.

      drop(타켓) grid의 format이나 binding된 dataset이 존재하지 않을 경우 스크립트에서 동적 생성합니다.

#3. 원본 grid의 row를 선택하여 drag하여 이동할 타켓 그리드의 row부분에 drop합니다.

#4. 타켓 그리드의 값이 비어있을경우 제일 첫번째 row로 이동하며, 데이터가 존재하지 않는 빈 공간에 drop 이벤트가          발생할 경우 현재 타켓 그리드의 가장 끝으로 이동됩니다.

#5. 이때 form load시에 지정한 option값에 따라 복사되거나, 위치가 이동됩니다.

 

주의사항

* drag 시 표현되는 static의 cssclass 변경 시 treegrid.xjs 파일 fnInitForm 함수에서 objForm.config.staticClass 변수의 class id를 입력하세요.

* From onload시 한번 지정한 옵션은 실행중에 변경되지 않습니다.

* 지정된 drag grid와 drop grid를 실행 중 동적으로 변경하기 위해서는 orgGrid와 targetGrid의 이벤트 추가하는 로직 수정이 필요합니다.  (단, 현재 작성된 기능의 추가 계획은 예정되지 않았습니다.)

 

테스트 버전 정보

Product Version : 17.0.0.1902 (2019.4.24.1)

 

다운로드 경로

https://www.playnexacro.com/techtips/931/treegrid-move-copy-트리그리드-drag-drop으로-이동하기

play nexacro