[]
        
(Showing Draft Content)

자동 셀 병합

SpreadJS는 인접한 셀에 중복된 텍스트가 있을 경우 자동으로 병합할 수 있는 자동 병합 기능을 지원합니다. 자동 병합 작업 중에는 어떠한 데이터도 손실되지 않습니다.

자동 병합 기능의 이점

자동 병합 기능은 다음과 같은 이점을 제공합니다:

  • 대량 데이터 집합 내에서 그룹을 명확하게 시각화할 수 있음

  • 동일한 셀 값을 데이터 손실 없이 자동 병합

  • 중복 텍스트 제거를 통해 시트의 불필요한 복잡도 감소

  • 중복 셀을 수동으로 병합하는 수고 없이 시간과 노력 절감

자동 병합 작동 방식

자동 병합 기능은 연속된 동일 텍스트를 가진 셀을 자동으로 병합하고, 병합된 셀의 텍스트 위치를 자동 조정합니다. 병합하려는 셀은 기존 스팬 범위에 포함되어 있지 않아야 합니다. SpreadJS에서는 autoMerge 메서드를 사용하여 특정 범위(범위, 행, 열 또는 전체 시트)에 대해 자동 병합 기능을 적용할 수 있습니다.

지원하는 방향은 AutoMergeDirection 열거형을 통해 다음과 같이 지정할 수 있습니다:

  • 행 방향

  • 열 방향

  • 행 및 열 방향

SpreadJS는 다음 두 가지 AutoMergeMode 를 지원합니다:

  • Free 모드: 동일한 값을 가진 셀을 인접 셀과 자유롭게 병합

  • Restricted 모드: 이전 행 또는 열이 동일하게 병합된 경우에만 병합 수행

autoMerge 메서드의 SelectionMode 매개변수를 통해 addSpan 과 같은 셀 선택 기능을 사용할 수 있습니다.

SelectionMode 옵션은 다음과 같습니다:

  • source: 자동 병합된 영역 내 개별 셀을 선택 가능

  • merged: 자동 병합된 전체 셀을 한 번에 선택

사용 예시

워크시트에서 데이터 분석을 수행할 때, 사용자들은 동일한 텍스트를 포함하는 여러 셀을 병합하여 데이터 표현을 향상시키고 구조를 더 명확하게 하고자 할 수 있습니다.

전 세계 여러 국가의 도시 및 주에서 판매되는 제품의 매출을 분석하는 시나리오를 예로 들겠습니다. 사용자는 auto-merge 기능을 사용하여 값을 기준으로 셀을 병합할 수 있으며, 새로운 SelectionMode 속성을 사용하여 span과 동일한 선택 효과를 얻을 수 있습니다.

아래 예제는 다양한 국가의 도시 및 주에서 판매된 여러 제품을 보여줍니다. 동일한 값이 있는 경우, "Country" 열에는 SelectionMode 속성이 Merged로 설정되고, "State" 열에는 Source로 설정되어 셀이 병합됩니다.


자동 셀 병합 vs 셀 병합 및 확장

워크시트에서 "자동 셀 병합(Auto Merge Cells)" 작업과 "셀 병합 및 확장(Spanning and Merging Cells)" 작업 간의 주요 차이점은 다음과 같습니다:

  • SpreadJS에서 Auto Merge 기능을 사용할 경우, 병합이 수행된 후에도 셀은 탐색 가능하고 편집 가능합니다. 반면, 셀을 span 및 merge할 경우 셀 값이 변경되면 자동으로 병합된 셀이 조정됩니다.

  • 사용자가 워크시트를 스크롤할 때, 병합된 셀의 텍스트는 병합된 영역 내에서 고정(sticky)되어 표시됩니다. 일반 병합(span) 셀과 달리, 자동 병합된 셀은 동일한 값을 가집니다.

참고: Auto Merge 기능을 사용할 때 다음과 같은 제한 사항을 유의해야 합니다:

  • 행 또는 열을 추가할 때

  • 행 또는 열을 제거할 때

  • 행 또는 열 수를 설정할 때

  • 사용자가 스프레드시트에서 다음 작업을 수행할 때, 자동 병합 범위는 영향을 받습니다

  • PDF 파일로 인쇄하거나 저장할 경우 (savePDF 메서드 사용), 모든 병합된 셀은 일반 span 범위로 간주됩니다.

  • 복사 또는 이동 작업은 auto-merge 범위에 영향을 주지 않으며, 자동 병합된 셀을 일반 span 범위로 처리하지 않습니다.

코드 사용 예

다음 코드 스니펫은 autoMerge 메서드를 사용하여 동일한 국가명, 주, 도시 이름이 포함된 셀을 병합합니다.

var data = [
    {
        "Country": "Canada",
        "State": "Ontario",
        "City": "Ottawa",
        "Product": "Kraft Grated Parmesan Cheese"
    },
    {
        "Country": "Canada",
        "State": "Ontario",
        "City": "Belleville",
        "Product": "KIND Bars Almond & Coconut Gluten Free"
    },
    {
        "Country": "Canada",
        "State": "Ontario",
        "City": "Alliston",
        "Product": "Kraft Grated Parmesan Cheese"
    },
    {
        "Country": "Canada",
        "State": "Saskatchewan",
        "City": "Prince Albert",
        "Product": "Smartfood Popcorn"
    },
    {
        "Country": "Canada",
        "State": "Alberta",
        "City": "Red Deer",
        "Product": "Smartfood Popcorn"
    },
    {
        "Country": "Canada",
        "State": "Alberta",
        "City": "Calgary",
        "Product": "Planters Deluxe Whole Cashew"
    },
    {
        "Country": "Canada",
        "State": "Alberta",
        "City": "Calgary",
        "Product": "Kraft Grated Parmesan Cheese"
    },
    {
        "Country": "Canada",
        "State": "Alberta",
        "City": "Okotoks",
        "Product": "Smartfood Popcorn"
    },
    {
        "Country": "India",
        "State": "Andhra Pradesh",
        "City": "Hyderabad",
        "Product": "Teddy Grahams Crackers"
    },
    {
        "Country": "South Africa",
        "State": "Gauteng",
        "City": "Roodepoort",
        "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)"
    },
    {
        "Country": "Finland",
        "State": "Ita-Suomen Laani",
        "City": "Kuopio",
        "Product": "Planters Deluxe Whole Cashew"
    },
    {
        "Country": "Switzerland",
        "State": "Geneve",
        "City": "Vesenaz",
        "Product": "KIND Bars Almond & Coconut Gluten Free"
    },
    {
        "Country": "Switzerland",
        "State": "Vaud",
        "City": "Lausanne",
        "Product": "Smartfood Popcorn"
    },
    {
        "Country": "Switzerland",
        "State": "Vaud",
        "City": "Morges",
        "Product": "Kraft Real Mayo"
    },
    {
        "Country": "Denmark",
        "State": "Frederiksborg",
        "City": "Helsingor",
        "Product": "Planters Deluxe Whole Cashew"
    },
    {
        "Country": "Denmark",
        "State": "Kobenhavn",
        "City": "Kobenhavn",
        "Product": "Kraft Grated Parmesan Cheese"
    },
    {
        "Country": "Denmark",
        "State": "Storstrom",
        "City": "Nakskov",
        "Product": "Kraft Grated Parmesan Cheese"
    }
]
$(document).ready(function () {
    // Spread 초기화
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

    // 활성화 시트 가져오기
    var activeSheet = spread.getActiveSheet();

    // 데이터 소스 바인딩
    activeSheet.setRowHeight(0, 30, 1);
    activeSheet.autoGenerateColumns = true;
    activeSheet.setDataSource(data);

    // AutoMergeDirection이 Column으로 설정되고 AutoMergeMode가 restricted 모드일 때 시트 전체 셀을 병합
    var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1);

    // Auto merge SelectionMode는 merged로 설정
    activeSheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.column, GC.Spread.Sheets.AutoMerge.AutoMergeMode.restricted, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.AutoMerge.SelectionMode.merged);

    // 열 너비 설
    for (var c = 0; c < activeSheet.getColumnCount(); c++)
        activeSheet.setColumnWidth(c, 130.0, GC.Spread.Sheets.SheetArea.viewport);
});