🧐 FAQ
RealGrid v1.0 에서 RealGrid2로 컬럼 변환

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)