안녕하세요 그레이프시티입니다.
문의하신 내용에 대해 답변 드립니다.
엑셀 가져오기 시, 그리드 열 format 설정의 경우, loadAsync 메서드의 4번째 파라미터이자 loadAsync 메서드가 실행 완료 후, 실행되는 onLoaded 콜백함수 내에서 원하는 열에 대한 포맷을 아래와 같이 지정하시면 됩니다.
const load = () => {
(...)
wjcGridXlsx.FlexGridXlsxConverter.loadAsync(
gridRef.current.control,
fileInput.files[0],
{ includeColumnHeaders: includeColRef.current.checked },
() => {
gridRef.current.control.columns[1].format = "d*";
}
);
}
};
다만 현재 Doc Date에 입력된 값이 Date 타입이 아닌 단순 Number 타입이므로 Date 포맷을 설정하고 싶은 경우, 해당 값을 Date 타입으로 변환을 해주셔야 합니다.
일반적으로 특정 열의 값을 수정 시, binding 속성을 사용하여 값에 접근하는데 FlexGrid에 엑셀 파일을 가져왔을 때는 FlexGrid가 바운드 모드가 아니므로 열의 binding 속성을 바로 사용할 수 없습니다.
따라서 binding 값을 가지오기 위해서는 수동으로 데이터 컬렉션인 CollectionView 및 바인딩을 별도 생성해주셔야 합니다. CollectionView 생성 과정에서 특정 바인딩을 가진 value에 접근하여 Date 타입으로 변환 후, 바인딩 해주시면 원하는 결과 값을 얻으실 수 있습니다.
아래 간단한 코드를 공유드리오니 참고 부탁드립니다.
* 아래 샘플의 경우, includeColumnHeaders가 true로 설정되어 있을 때, 경우로 구현된 코드입니다.
const load = () => {
(...)
wjcGridXlsx.FlexGridXlsxConverter.loadAsync(
gridRef.current.control,
fileInput.files[0],
{ includeColumnHeaders: includeColRef.current.checked },
() => {
bindImportedData(); // import된 데이터 바인딩
// gridRef.current.control.columns[0].format = "D";
gridRef.current.control.columns[1].format = "d*";
}
);
}
};
(...)
// import된 데이터 바인딩
const bindImportedData = () => {
let grid = gridRef.current.control;
const newData = getImportedCVData(); // 데이터 가져오기
grid.columns.clear(); // 기존 columns clear
var importedData = new wjCore.CollectionView(newData); // collectionView 생성
grid.autoGenerateColumns = true;
grid.itemsSource = importedData; // 그리드 데이터 할당
};
//데이터 가져오기 함수
const getImportedCVData = () => {
const arr = [];
let grid = gridRef.current.control;
let nullRow = true;
for (let row = 0; row < grid.rows.length; row++) {
const item = {};
for (let column = 0; column < grid.columns.length; column++) {
let cellValue = grid.getCellData(row, column, false);
if (cellValue) {
nullRow = false;
if (grid.columns[column].header) {
var binding = _convertHeaderToBinding(grid.columns[column].header); //헤더를 바인딩으로
if (binding == "docdate") { // 날짜 열이라면
// 날짜 타입으로 변환
cellValue = new Date(String(cellValue).replace(
/(\d{4})(\d{2})(\d{2})/g,
"$1-$2-$3"
));
}
}
item[binding] = cellValue;
} else {
if (column === grid.columns.length - 1 && nullRow) {
break;
}
}
}
if (nullRow) {
break;
}
arr.push(item);
}
return arr;
};
//헤더를 바인딩으로 변경
const _convertHeaderToBinding = (header) => {
return header.replace(/\s/, "").toLowerCase();
};
해당 답변과 관련 Q&A 글도 참고하시기 바랍니다.
- loadXlsx 헤더값 가져오기 질문드립니다.
작성일 2023-01-31 14:29 조회 685회
댓글 1건
1 답변
