3.9.0.0 이상

설명

코드상에서 컴포넌트로 직접 파일 객체를 등록할 때 addLocalFile를 사용할 수 있다.

addLocalFile은 비동기 방식으로 동작하며 인자 값으로 사용할 수 있는 객체는 File, Blob 중 하나의 유형이어야 한다.

# Tag 
<p><input type="file" id="source-file"/></p>

# Script
var dx = dx5.get("dext5");
var list = document.querySelector("#source-file").files;
if (list.length > 0) {
    dx.addLocalFile(list[0]);
}

Blob 객체를 사용하여 등록하려고 하는 경우에는 Blob 객체의 name 속성을 명시적으로 설정해야 한다.

# Script
var dx = dx5.get("dext5");
var blob = new Blob(["This is text data."], { type: "text/plain" });
blob.name = "sample.txt";
dx.addLocalFile(blob);

형식

component.addLocalFile(file);

파라미터

3.7.0.0 이상

설명

코드상에서 컴포넌트로 직접 파일 목록을 등록할 때 addLocalFileList를 사용할 수 있다.

addLocalFileList를 사용하여 등록할 수 있는 객체는 FileList, DataTransfer, DataTransferItemList 중 하나의 유형이어야 한다.

// 'drag-area' 아이디를 갖는 HTML 요소가 드래그앤드롭이 가능한 영역일 때,
var dndArea = document.querySelector("#drag-area");

dndArea.addEventListener("dragover", function (event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = "copy";
}, false);

dndArea.addEventListener("drop", function (event) {
    event.preventDefault();
    // 드롭 이벤트에서 'dext5' 아이디를 갖는 컴포넌트에 컴포넌트를 수동으로 등록하는 코드
    dx5.get("dext5").addLocalFileList(event.dataTransfer);
}, false);

형식

component.addLocalFileList(obj);

파라미터

3.9.0.0 이상

설명

copyItems 메소드는 컴포넌트 간에 항목을 복사하는 용도로 사용된다.

copyItems의 첫 번째 인자 값으로 항목 아이디 요소를 가지는 배열을 설정하면, 대상이 로컬 파일 또는 가상 파일을 구분하지 않고 항목을 복사하여 전달하며 비동기 방식으로 동작한다.

// A 컴포넌트의 모든 항목을 B 컴포넌트로 복사하는 예제
var dxA = dx5.get("A");
var dxB = dx5.get("B");
var targets = dxA.getItemIds();
// targets: ['DX5-NUM-1', 'DX5-NUM-2', 'DX5-NUM-3', ...]
dxA.copyItems(targets, dxB, function (copied) {
    console.log("Copied!");
});

콜백 함수를 사용하여, 복사 전 항목의 ID와 복사 후 ID를 비교할 수 있다.

dxA.copyItems(targets, dxB, console.log);
# 아래와 같은 출력 예시를 얻을 수 있다.
[
    { "before": "DX5-1709096638301-1", "after": "DX5-1709096640677-1" },
    { "before": "DX5-1709096639314-2", "after": "DX5-1709096640735-2" },
    { "before": "DX5-1709096639371-3", "after": "DX5-1709096640796-3" },
    { "before": "DX5-1709096639425-4", "after": "DX5-1709096640854-4" }
]

주의 사항

• 복사할 항목이 로컬 파일인 경우, 복사된 항목도 동일한 로컬 파일을 가리킨다.
• 항목의 checked, lock 속성도 복사가 된다.
• 항목의 id, controlId, status 속성은 복사되지 않는다.

형식

component.copyItems(list, anotherComponent, cbCopied);

파라미터

3.9.0.0 이상

설명

moveItems 메소드는 컴포넌트 간에 항목을 이동 시키는 용도로 사용된다.

moveItems의 첫 번째 인자 값으로 항목 아이디 요소를 가지는 배열을 설정하면, 대상이 로컬 파일 또는 가상 파일을 구분하지 않고 항목을 이동시키며 비동기 방식으로 동작한다.

// A 컴포넌트의 모든 항목을 B 컴포넌트로 이동하는 예제
var dxA = dx5.get("A");
var dxB = dx5.get("B");
var targets = dxA.getItemIds();
// targets: ['DX5-NUM-1', 'DX5-NUM-2', 'DX5-NUM-3', ...]
dxA.moveItems(targets, dxB, function (moved) {
    console.log("Moved!");
});

콜백 함수를 사용하여, 이동 전 항목의 ID와 이동 후 ID를 비교할 수 있다.

dxA.moveItems(targets, dxB, console.log);
# 아래와 같은 출력 예시를 얻을 수 있다.
[
    { "before": "DX5-1709096638301-1", "after": "DX5-1709096640677-1" },
    { "before": "DX5-1709096639314-2", "after": "DX5-1709096640735-2" },
    { "before": "DX5-1709096639371-3", "after": "DX5-1709096640796-3" },
    { "before": "DX5-1709096639425-4", "after": "DX5-1709096640854-4" }
]

주의 사항

• 항목의 checked, lock 속성도 유지가 된다.
• 항목의 id, controlId, status 속성은 유지되지 않는다.

형식

component.moveItems(list, anotherComponent, cbMoved);

파라미터