SpreadJS v13.2.0 릴리스를 발표합니다. 이 릴리스에는 몇 가지 새로운 기능이 포함되어 있습니다. 이 게시물에서는 새로운 기능을 소개하고 응용 프로그램에서 해당 기능을 사용할 수 있는 방법을 설명합니다.

• 차트 계열 데이터 레이블 사용자 정의
• 차트 가져오기 플래그 유지
• 그룹으로 정렬
• 정렬할 때 숨겨진 행 무시
• 셰이프 회전 허용
• 셰이프 ShowHandle
• 보기 확대/축소
• 스크롤 막대 사용자 정의
• 범위별 ClearPendingChanges
• RangeChanged 이벤트 isUndo 속성

차트 계열 데이터 레이블 사용자 정의

이제 스타일 측면에서 응용 프로그램의 모양 및 느낌과 일치하도록 데이터 레이블(차트의 계열에 적용)을 사용자 정의할 수 있습니다.

관련 옵션은 다음과 같습니다.

• Sparator
• BackColor
• BackColorTransparency
• BorderColor
• BorderWidth
• BorderColorTransparency

계열의 dataLabels 옵션에서 위 옵션을 설정할 수 있습니다.

var series = chart.series().get(1);
series.dataLabels = {
  showValue: false,
  showSeriesName: true,
  showCategoryName: false,
  showPercentage: false,
  position: GC.Spread.Sheets.Charts.DataLabelPosition.Center,
  color: "white",
  backColor: "red",
  backColorTransparency: 0.25,
  borderColor: "green",
  borderWidth: 2,
};
chart.series().set(1, series);

차트 가져오기 플래그 유지

Excel 차트가 SpreadJS에서 지원되지 않는 경우도 있습니다. 이제 지원되지 않는 차트 유형을 SpreadJS에서 계속 내보낼 수 있도록 사용자에게 해당 차트 유형을 유지하도록 안내하는 플래그가 있습니다. 플래그가 활성화되면 지원되지 않는 차트 유형이 기본적으로 "지원되지 않는 차트 유형"이라는 구가 포함된 상자로 표시됩니다. 또한 콘텐츠를 특정 요구 사항(예: 지원되지 않는 특정 차트 유형 설명)에 맞게 사용자 정의할 수 있습니다.

sheet.charts.preserveUnsupportedChart(true, function(chart, chartHost){
      var paintElement= document.createElement('div');
      var type= chart.chartType();
      paintElement.innerHTML = 'Unsupported Chart Type:' + type;
      chartHost.appendChild(paintElement);
})

그룹으로 정렬

이제 정렬할 때 그룹화된 행과 열을 유지하도록 정렬 기능이 개선되었습니다. 이전에는 SpreadJS에서 플랫 정렬만 수행하여 그룹과 상관없이 항목을 이동했습니다. 그러나 이 업데이트에서는 그룹 내 항목이 재귀적으로 정렬되므로 다음과 같이 각 그룹의 콘텐츠가 일반으로 정렬된 이후에 해당 그룹이 시트에서 정렬됩니다.

원본: 

정렬 후: 

범위 정렬에서 그룹 정렬을 사용하려면 RangeSorting 이벤트에서 해당 옵션을 설정합니다.

spread.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {
    info.groupSort = GC.Spread.Sheets.GroupSort.full;
});

숨겨진 행 무시 정렬

숨겨진 행이 있는 데이터를 정렬할 때 Excel처럼 숨겨진 행을 무시하고 정렬에 포함하지 않는 것이 좋습니다.

이전:

이후:

위의 경우 A2:A5가 숨겨져 있습니다. 정렬할 때(예: sortRange 메서드 또는 RangeSorting 이벤트에서 UI로 정렬할 때) ignoreHidden 옵션을 true로 설정하면 이 동작이 활성화됩니다.

sheet.sortRange(0, 0, 10, 1, true, [{index:0, ascending: true}], {ignoreHidden: false});

sheet.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {
    info.ignoreHidden = true;
});

셰이프 회전 허용

SpreadJS의 이전 릴리스에서는 셰이프가 allowResize 및 allowMove API를 지원하여 개발자가 응용 프로그램에서 셰이프 크기 조정 또는 이동을 활성화하거나 비활성화할 수 있습니다. 13.2.0에서는 셰이프의 allowRotate API도 추가하여 개발자가 이 API를 false로 설정하여 셰이프 UI에서 회전 처리기를 제거할 수 있습니다.

var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
heart.allowRotate(false);

셰이프 핸들 표시/숨기기

매우 다양한 시나리오에서 셰이프를 사용할 수 있으며 크기 조정, 회전, 조정 등과 같은 작업을 위해 핸들을 숨기는 것이 유용한 경우도 있습니다. 핸들을 숨기려면 showHandle 함수를 false로 설정합니다.

var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
heart.showHandle(false);

셰이프에서 allowResize 및/또는 allowRotate가 계속 true로 설정되어 있어도 사용자는 셰이프를 조작할 수 있지만 관련 UI는 볼 수 없습니다.

보기 확대/축소

이제 개발자가 확대/축소 기능을 변경하거나 확대하기 위해 ViewZooming 및 ViewZoomed 이벤트를 사용하여 확대/축소 프로세스에 개입할 수 있습니다. 이는 시트를 특정 비율로만 확대/축소하도록 하는 작업 등에 유용합니다.

다른 시트 이벤트처럼 이 이벤트는 시트에만 바인딩됩니다.

activeSheet.bind(GC.Spread.Sheets.Events.ViewZooming, function (e, info) {
    if (info.newZoomFactor >= 2) {
        info.newZoomFactor = 2;
    }
});
activeSheet.bind(GC.Spread.Sheets.Events.ViewZoomed, function (e, info) {
    alert("Zoom (" + info.newZoomFactor + ")");
});

스크롤 막대 사용자 정의

이제 스크롤 막대를 응용 프로그램의 다른 요구 사항에 맞게 사용자 정의할 수 있습니다. 스크롤 막대를 "모바일"로 설정하면 개발자가 CSS 코드를 통해 스타일을 사용자 정의할 수 있습니다.

범위별 ClearPendingChanges

이제 clearPendingChanges API는 셀 범위에서 선택적 매개 변수로 작동합니다. 이로써 더티, 삽입 또는 삭제 변경 내용을 지정된 범위의 현재 시트에서 근본적으로 정리할 수 있습니다. 이 기능은 사용자가 셀을 변경한 이후에 실행 취소를 사용하지 않고 해당 변경 내용을 되돌리려는 경우에 유용할 수 있습니다. 이 경우 일반적으로 더티 셀로 간주되며 이는 텍스트가 동일한 경우에도 마찬가지입니다. 이 릴리스에서는 개발자가 이 기능을 제어할 수 있습니다.

RangeChanged 이벤트 isUndo 속성

이제 RangeChanged 이벤트는 isUndo 속성을 지원하므로 개발자는 범위 내의 일반 작업과 실행 취소 작업을 구분할 수 있습니다. 이는 CellChanged, RowChanged와 같은 다른 이벤트와 일치합니다. 코드를 변경할 필요가 없으며 범위가 변경된 이벤트를 실행한 이후에 undoManager를 사용하여 실행 취소하고 다시 실행할 수 있습니다.