====== 그리드 File Drop 가이드 ======
그리드의 File Drop 기능 예시 화면이다.
on_dropfiles 이벤트에서 엑셀 파일인 경우, 그리드의 uploadexcel 관련 API를 이용하여 엑셀 파일 로드 동작을 구현할 수 있다.
관련 속성으로 accept_dropfiles가 있다.
관련 API로 getacceptdropfiles, setacceptdropfiles, uploadexcel, deleteall가 있다.
관련 이벤트로 on_dropfiles가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/GRID/grid_file_drop
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_file_drop.xml|grid_file_drop.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_file_drop.js|grid_file_drop.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/GRID/grid_file_drop|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// "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();
}