PivotTable 및 TableSheet에 몇 가지 흥미로운 새로운 기능을 추가하고 몇 가지 통합 문서 및 계산 기능을 개선한 SpreadJS V15.1을 출시했습니다. 이 블로그에서는 데모 링크를 비롯하여 이번 릴리스에 추가된 다양한 기능을 요약하고 응용 프로그램에 이러한 기능을 추가하는 방법을 예를 들어 설명합니다.

통합 문서 간 수식

SpreadJS에 대해 가장 많은 요청을 받아 이번 릴리스에 추가한 기능 중 하나는 통합 문서 간 수식에 대한 지원입니다. 이 새로운 기능을 사용하면 사용자가 다른 SpreadJS 통합 문서에 포함된 데이터에 대한 참조를 포함하는 수식을 입력할 수 있습니다. 다른 통합 문서의 파일 이름은 수식 내에서 대괄호로 둘러싸여 있습니다.

=[Calc.xlsx]Sheet1!A1

데모 실행하기

PivotTable의 향상된 기능

시간 표시 막대 슬라이서 지원

SpreadJS PivotTable은 이제 특정 날짜별로 데이터를 간편하게 자를 수 있는 시간 표시 막대 슬라이서를 지원합니다. PivotTable을 날짜별로 필터링하는 것 외에 시간 표시 막대 슬라이서를 사용하면 강력한 슬라이더 컨트롤로 날짜 및/또는 시간을 동적으로 자를 수 있습니다.

데모 실행하기

데이터가 없는 항목 표시

기본적으로 PivotTable은 데이터를 포함하고 있는 항목만 표시하며, 이는 필터링 시 행 또는 열이 보이지 않는 경우 특히 두드러집니다. 새 옵션인 “데이터가 없는 항목 표시”를 사용하면 PivotTable은 빈 값에 데이터가 없더라도 빈 값을 표시할 수 있습니다.

데모 실행하기

TableSheet의 향상된 기능

다중 헤더 지원

TableSheet에서 이제 열 헤더에 여러 행 표시를 지원하여 행을 관련 필드의 계층 구조로 시각적으로 그룹화할 수 있습니다. 이 기능은 TableSheet 및 SpreadJS Designer의 SpreadJS 스크립트 파일에 포함되어 있습니다.

데모 실행하기

자유 헤더 영역 지원

v15 SP1에 추가한 또 다른 강력한 기능은 TableSheet의 자유 헤더 영역에 대한 지원입니다. 이 기능을 사용하면 수식에 대한 전체 지원을 포함하는 동적 헤더 영역을 TableSheet 보기 위에 만들 수 있어, 한눈에 지원 요약 데이터를 제공하는 데 이상적입니다.

데모 실행하기

교차 열 지원

이번 릴리스에 추가한 가장 큰 TableSheet 기능 중 하나는 데이터 입력 기능을 크게 향상한 TableSheet 교차 열입니다. 교차 열을 사용하면 단일 행 보기에서 여러 관련 테이블 및 레코드의 필드를 제공(피벗 또는 바꾸기)할 수 있습니다. 아래 사용 사례의 예에서는 여러 행이 아니라 단일 행에서 레코드 옵션이 여러 개인 Payment Method(결제 방법) 필드를 제공합니다.

이 예에서는 교차 열을 사용하여 단일 행에서 Cash(현금), Check(수표), ACH 및 CC 옵션을 제공해 사용자가 데이터를 쉽게 입력하고 편집할 수 있습니다. 교차 열은 기본적으로 데이터를 데이터 입력을 위한 PivotTable과 같이 보다 간소화된 행 보기로 피벗합니다. 이 기능은 예산 책정 또는 비용 보고서 등에 사용할 수도 있습니다.

데모 실행하기

TableSheet 이름으로 PivotTable 만들기

고객의 요청으로 이번 릴리스에 추가한 또 다른 기능은 TableSheet에서 PivotTable을 만드는 기능입니다. 이제 다음과 같이 PivotTable을 만들 때 TableSheet 데이터를 참조할 수 있습니다.

var tableSheetName = "TableSheet1";
var sheet = spread.addSheetTab(0,  tableSheetName, GC.Spread.Sheets.SheetType.tableSheet);
var dataManager = spread.dataManager();
var productTable = dataManager.addTable("productTable", {
    remote: {
        read: {
            url: 'https://northwind.now.sh/api/products'
        }
    }
});
productTable.fetch().then(function (defaultView) {
    //set data source with a View
    var productWithSupplierView = productTable.addView("productWithSupplierView",
    [
        { value: 'id', caption: 'ID', width: 200, isPrimaryKey: true },
        { value: 'name', caption: 'NAME', required: true },
        { value: 'quantityPerUnit', caption: 'QUANTITY PER UNIT', required: true },
        { value: 'unitPrice', caption: 'UNIT PRICE' },
        { value: 'unitsInStock', caption: ["ShipTo","unitsInStock", "aaa"] },
        { value: 'unitsOnOrder', caption: ["ShipTo","unitsOnOrder", "aaa"] },
        { value: 'reorderLevel', caption: ["ShipTo","reorderLevel", "bbb"] },
        { value: 'discontinued', caption: ["ShipTo","discontinued", "bbb"], defaultValue: true }
    ]
    );
    sheet.setDataView(productWithSupplierView);
}).then(()=>{
    var ptSheet = spread.getSheet(0);
    var pivotTable = ptSheet.pivotTables.add("pivot1", tableSheetName, 1, 1);
});

세로 누적 모드로 개선

많은 경우 TableSheet의 열에는 열의 너비보다 긴 헤더 텍스트가 포함됩니다. 열 헤더 StackedMode API의 향상된 기능을 통해 열 너비를 늘리지 않고 전체 텍스트를 표시할 수 있습니다. 따라서 열 데이터/항목을 좁게 표시하면서도 헤더 레이블에 대한 컨텍스트를 제공할 수 있습니다. 이와 같은 개선으로 이제 누적 모드 열 헤더 내에서 세로 텍스트를 사용할 수 있습니다.

데모 실행하기

디자이너의 향상된 기능

CultureInfo의 향상된 기능

추가한 새 디자이너 기능 중 하나는 CultureInfo의 향상된 기능입니다. 여기에는 다음이 포함됩니다.

• CultureInfo 유형의 속성(id, name, definedFormats) 노출
• 숫자 형식 대화 상자에서 문화 관련 기능의 사용자 정의 지원
• GitHub에 게시되는 새로운 문화 정보 패키지 프로젝트

필터 자동 확장 지원

Excel 호환성의 일부로 디자이너에서 런타임 필터 지원을 개선했습니다. 단일 셀에 필터를 적용하면 데이터가 있는 인접 셀로 자동 확장됩니다.

데모 실행하기

Vue3 지원

SpreadJS에서 Vue3를 이미 지원하고 있으며 이 릴리스에서는 디자이너 컴포넌트에 Vue3 지원을 추가했습니다.

계산 능력 향상

“.” 개체 연산자 지원

계산 엔진이 이제 개체의 속성을 검색하기 위해 “.”를 연산자로 사용하는 것을 지원합니다. 예를 들어, 셀 A1에 속성이 “productName”인 개체가 포함되어 있는 경우 다음과 같이 이 연산자를 사용하여 해당 개체를 참조하도록 할 수 있습니다.

A1.productName

데모 실행하기

통합 문서 기능 향상

도형 내에서 참조된 셀 내용

이전 SpreadJS 릴리스에서는 도형 안에 텍스트를 추가하는 기능을 추가했습니다. 이 릴리스에서는 도형에 셀 참조를 내용으로 추가하는 기능을 포함하도록 이 기능을 개선했습니다.

데모 실행하기

비연속 범위 스파크라인

고객의 요청으로 이번 릴리스에 추가한 또 다른 기능은 셀의 비연속 범위 내 데이터에서 스파크라인을 만드는 기능입니다.

행 및 열 추가/제거 시 인쇄 범위 자동 업데이트

SpreadJS에서는 인쇄를 지원하지만 인쇄 범위가 설정되면 행 또는 열 변경 사항이 해당 범위에 적용되지 않습니다. 이번 릴리스에서는 행 또는 열이 추가되거나 제거된 경우 자동으로 인쇄 범위를 업데이트하는 기능을 추가했습니다.

모든 시트 버튼 표시

SpreadJS에서 여러 시트를 쉽게 탐색할 수 있도록 하기 위해 시트 탭 표시줄에 “모든 시트” 버튼을 추가했습니다. 이 버튼은 드롭다운 목록에 통합 문서의 모든 시트를 표시하여 시트를 쉽게 선택할 수 있습니다.

데모 실행하기

GetUsedRange 지원

이제 SpreadJS에서는 기본적으로 데이터가 있는 셀 범위를 반환하는 “GetUsedRange” API를 지원합니다.

데모 실행하기

끌어서 놓기 기능 향상

기존 행을 덮어쓰는 것이 아니라 행을 삽입하도록 SpreadJS의 끌어서 놓기 기능이 향상되었습니다. 행을 선택한 다음 끌면 끈 행의 새 위치를 표시하기 위해 강조 표시된 선이 나타납니다.

데모 실행하기

VeryHidden 워크시트 지원 상태

SpreadJS v15.1 릴리스에서는 “VeryHidden”이라는 새로운 숨김 상태를 추가했습니다. 이 상태는 표준 “숨김” 상태와 동일하게 동작하지만 UI를 통해 숨기기 및 숨기기 취소 작업을 수행할 수 없다는 점이 다릅니다. 이 설정은 Excel에서도 내보내기되고 지원됩니다.

데모 실행하기

SetStyle/SetStyleName 셀 범위 지원

SpreadJS의 이전 릴리스에서는 루프를 사용하여 셀 단위로 스타일 및 스타일 이름을 설정해야 했습니다. 이번 릴리스에서는 전체 셀 범위에서 setStyle 및 setStyleName API를 제공하여 루프를 사용할 필요를 없애 코드가 한결 간단해졌습니다.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ