그리드 File Drop 가이드

그리드의 File Drop 기능 예시 화면이다.

on_dropfiles 이벤트에서 엑셀 파일인 경우, 그리드의 uploadexcel 관련 API를 이용하여 엑셀 파일 로드 동작을 구현할 수 있다.

관련 속성으로 accept_dropfiles가 있다.

관련 API로 getacceptdropfiles, setacceptdropfiles, uploadexcel, deleteall가 있다.

관련 이벤트로 on_dropfiles가 있다.

템플릿 위치: /HTML5/COMPONENT/GRID/grid_file_drop

템플릿 파일

• grid_file_drop.xml
• grid_file_drop.js
• 새창으로 실행

// "setacceptdropfiles" 버튼 이벤트
function btn_setacceptdropfiles_on_mouseup(objInst)
{
	// accept_dropfiles 속성 토글 처리
	this.grdList.setacceptdropfiles(!this.grdList.getacceptdropfiles());
}

/**
 * 파일 드랍 이벤트를 처리한다.
 * @param objInst 이벤트가 발생한 컴포넌트 인스턴스
 * @param arrayDropFiles 드롭된 File 오브젝트 배열
 * @param nDropFileCount 드롭된 파일 갯수
 */
function grdList_on_dropfiles(objInst, arrayDropFiles, nDropFileCount)
{
	var i, j, fileObj, nRow, file_last_modified, date_arr, time_arr;

	// 드롭된 파일 갯수 및 파일 정보를 콘솔에 출력
	factory.consoleprint("nDropFileCount = " + nDropFileCount);

	// 파일 정보를 그리드에 표시
	for (i = 0; i < nDropFileCount; i++) {
		fileObj = arrayDropFiles[i];

		// 그리드 행 추가
		nRow = this.grdList.additem();

		// 파일 이름/크기/간략 크기 표시
		this.grdList.setitemtext(nRow, 0, fileObj.name);
		this.grdList.setitemtext(nRow, 1, fileObj.size);
		this.grdList.setitemtext(nRow, 2, factory.getbriefsize(fileObj.size));

        // IE는 파일 수정 시각에 대한 Date 오브젝트를 리턴
        if (fileObj.lastModifiedDate) {
            file_last_modified = fileObj.lastModifiedDate;
        }
        // Chrome는 파일 수정 시각에 대한 값을 리턴
        else if (fileObj.lastModified) {
            file_last_modified = new Date(file.lastModified);
        }
        // 정보가 없는 경우에는 현재 시각으로 표시
        else {
            file_last_modified = new Date();
        }

        // 파일 수정 날짜 정보 문자열 설정
        date_arr = [];
        date_arr.push(file_last_modified.getFullYear());
        date_arr.push((file_last_modified.getMonth() + 1).toString());
        date_arr.push(file_last_modified.getDate().toString());
        for (j = 1; j <= 2; j++) {
            date_arr[j] = factory.fillstring(date_arr[j], "0", 2, true);
        }

		this.grdList.setitemtext(nRow, 3, date_arr.join(''));

        // 파일 수정 시각 정보 문자열 설정
        time_arr = [];
        time_arr.push(file_last_modified.getHours().toString());
        time_arr.push(file_last_modified.getMinutes().toString());
        time_arr.push(file_last_modified.getSeconds().toString());
        for (j = 0; j <= 2; j++) {
			time_arr[j] = factory.fillstring(time_arr[j], "0", 2, true);
        }

		this.grdList.setitemtext(nRow, 4, time_arr.join(''));
	}
}

// "deleteall" 버튼 이벤트
function btn_deleteall_on_mouseup(objInst)
{
	// 그리드 내용 모두 삭제
	this.grdList.deleteall();
}