RealGrid v1.0 에서 RealGrid2로 컬럼 변환
본 문서는 RealGrid v1.0의 컬럼 정의를 RealGrid2 구조로 변환하는 방법을 설명합니다.
RealGrid2는 v1.0과 달리 다음과 같은 구조적 차이를 가집니다:
-
컬럼 정의 (column)
-
레이아웃 정의 (layout)
-
그룹 컬럼 구조 분리
-
스타일 및 포맷 속성 위치 변경
따라서 기존 v1.0 컬럼을 그대로 사용할 수 없으며, 변환 로직이 필요합니다.
아래 예제의 convertRG1toRG2() 함수는 RealGrid v1.0의 컬럼정보를 가지고 RealGrid2의 컬럼 레이아웃 및 기본 포맷을 적용할 수 있도록 구현한 함수입니다.
function convertRG1toRG2(rg1Columns) {
var columns2 = {
column: [],
layout: []
};
var alignmentMap = {
'far': 'rg-right-column',
'center': 'rg-center-column',
'near': 'rg-left-column'
};
/**
* 스타일 및 포맷 변환 공통 함수
*/
function transformSubStyles(obj) {
if (!obj) return;
// 1. styles 내부 속성 상위 이동
if (obj.styles) {
var s = obj.styles;
if (s.numberFormat) obj.numberFormat = s.numberFormat;
if (s.datetimeFormat) obj.datetimeFormat = s.datetimeFormat;
if (s.prefix) obj.prefix = s.prefix;
if (s.suffix) obj.suffix = s.suffix;
if (s.textAlignment) {
obj.styleName = alignmentMap[s.textAlignment] || obj.styleName;
}
delete obj.styles;
}
// 2. text 속성이 undefined인 경우 속성 자체를 제거
if (obj.hasOwnProperty('text') && obj.text === undefined) {
delete obj.text;
}
}
/**
* Footer 및 GroupFooter 변환 함수
*/
function transformFooters(col) {
if (!col.footer) return;
// GroupFooter 객체 생성 및 속성 이동
if (col.footer.groupExpression || col.footer.groupText !== undefined) {
col.groupFooter = {
expression: col.footer.groupExpression,
text: col.footer.groupText,
styles: col.footer.groupStyles || col.footer.styles
};
delete col.footer.groupExpression;
delete col.footer.groupText;
delete col.footer.groupStyles;
}
// 공통 스타일 및 text 클리닝 적용
transformSubStyles(col.footer);
transformSubStyles(col.groupFooter);
// footer/groupFooter 자체가 빈 객체가 되었을 경우 정리
if (col.footer && Object.keys(col.footer).length === 0) delete col.footer;
if (col.groupFooter && Object.keys(col.groupFooter).length === 0) delete col.groupFooter;
}
function parse(items) {
return items.map(function(item) {
if (item.columns && Array.isArray(item.columns)) {
var groupLayout = {
name: item.name,
direction: item.direction || item.orientation || "horizontal",
header: item.header ? JSON.parse(JSON.stringify(item.header)) : undefined,
width: item.width,
hideChildHeaders: item.hideChildHeaders === true,
items: parse(item.columns)
};
if (groupLayout.header) transformSubStyles(groupLayout.header);
if (!groupLayout.width) delete groupLayout.width;
if (!groupLayout.header) delete groupLayout.header;
if (!groupLayout.hideChildHeaders) delete groupLayout.hideChildHeaders;
return groupLayout;
} else {
var isExist = columns2.column.some(function(c) { return c.name === item.name; });
if (!isExist) {
var colDef = JSON.parse(JSON.stringify(item));
transformSubStyles(colDef);
if (colDef.header) transformSubStyles(colDef.header);
transformFooters(colDef);
delete colDef.orientation;
delete colDef.direction;
delete colDef.hideChildHeaders;
columns2.column.push(colDef);
}
return {
column: item.name,
visible: item.visible !== false
};
}
});
}
columns2.layout = parse(rg1Columns);
return columns2;
}
// 적용
var result = convertRG1toRG2(columns);
gridView.setColumns(result.column);
gridView.setColumnLayout(result.layout);자동 변환 불가 항목 (수작업 필요)
다음 항목은 구조 차이 및 사용자 지정 설정차이로 인해 자동 변환이 어렵습니다.
-
컬럼 스타일 (styleName CSS)
-
dynamicStyles
-
renderer (cell renderer)