SpreadJS v16 > 새로운 소식

본문 바로가기

SpreadJS

새로운 소식

정식출시 SpreadJS v16

페이지 정보

작성자 GrapeCity 작성일 23-01-13 10:51 조회 46회 댓글 0건

본문

SpreadJS V16이 출시되었습니다. 이번 릴리스에는 새로운 SpreadJS 파일 형식을 비롯한 흥미로운 여러 최신 기능과 TableSheet, 디자이너, 계산 및 통합 문서의 향상된 기능, Excel과 유사한 폼 컨트롤에 대한 새로운 지원 기능 등이 포함되어 있습니다. 이러한 기능을 응용 프로그램에 활용하는 방법을 자세히 알아보려면 계속해서 아래 내용을 읽어보시기 바랍니다.

목차

  • 새로운 파일 형식 (.sjs)
  • TableSheet의 향상된 기능
    • 데이터 관리자의 계층 구조
    • 데이터 관리자 필드 이름 매핑
  • 디자이너의 향상된 기능
    • TableSheet 템플릿 및 패널 기능 향상
    • TableSheet 계층 구조 데이터
    • 선택 - 수준 찾기/바꾸기
    • 형식 창
  • 계산의 향상된 기능
    • 잘못된 수식 입력 동작 및 스타일
  • 셰이프의 향상된 기능
    • Excel과 유사한 폼 컨트롤
    • 크기 조정 기능 향상
    • Shift+마우스 크기 조정 동작
  • 통합 문서의 향상된 기능
    • 복사/잘라내기 취소 이벤트
    • 셀 꾸미기 스타일
    • 데이터 유효성 검사의 사용자 정의 스타일
    • EditEnding 및 EditEnded 이벤트의 입력 취소


SpreadJS 체험판을 다운로드하여 직접 새로운 기능을 테스트해 보실 수 있습니다. 

새로운 파일 형식 (.sjs)

SpreadJS에 추가된 흥미로운 최신 기능 중 한 가지는 개선된 새로운 파일 형식입니다. 이 새로운 파일 형식을 사용하면 대용량 Excel 파일을 가져오는 성능이 크게 개선되며 저장 시 더 작고 더 최적화된 파일을 만들 수도 있습니다.

이 새로운 .sjs 파일 형식은 먼저 SSJSON으로 내보내야 했던 이전의 번거로움을 해소했으며 직접적으로 모델에 데이터를 변환합니다. 결과 데이터는 더 작은 SSJSON 파일과 함께 압축된 .sjs 파일로 저장되어 Excel의 자체 XML 구조와 유사해집니다. 이 형식으로 인해 이제 ExcelIO 프로세스가 훨씬 더 빨라지고 더 작아집니다. 이 기능에 대한 자세한 내용은 여기에서 블로그를 확인하십시오.

TableSheet의 향상된 기능

별도의 고성능 데이터 표인 SpreadJS Tablesheet는 v16의 몇 가지 더 많은 기능을 허용하고 있습니다.

데이터 관리자의 계층 구조

이제 TableSheet가 소스 데이터에서 계층 구조 데이터를 지원합니다. 여기에는 다음을 포함하는 레코드에 대한 4가지 데이터 유형이 포함됩니다.

  • 속성 "id" 및 "parentId"
  • 계층 구조 수준을 나타내는 속성
  • 계층 구조 자식을 포함하는 속성
  • 사용자 정의 함수를 사용하여 계층 구조로 구문 분석할 수 있는 기본 키

계층 구조 작업도 추가되어 사용자에게 다음과 같은 기능을 제공합니다.

  • 레코드 승격/강등
  • 레코드를 위/아래로 이동
  • 앞/뒤 또는 위/아래에 레코드 삽입
  • 레코드 삭제
  • 모든 레코드 수준 또는 특정 수준 확장/축소
  • 레코드 정렬/필터


데이터 관리자 필드 이름 매핑

데이터 관리자의 데이터 소스 스키마가 이제 열의 별칭 설정을 지원하여 데이터 소스의 프런트 엔드와 백엔드 간에 다양한 이름을 허용합니다. 이 기능을 사용하려면 데이터 관리자에 뷰를 추가할 때 "캡션(Caption)" 속성을 설정하면 됩니다.

디자이너의 향상된 기능

이전 TableSheet에 해당하는 일부 기능을 포함하여 SpreadJS의 디자이너 컴포넌트에 대한 몇 가지 기능이 향상되었습니다.

TableSheet 템플릿 및 패널 기능 향상

TableSheet가 처음 SpreadJS에 추가되었을 때 디자이너에서 TableSheet를 관리할 수 있도록 패널을 포함했습니다. 특정 열은 이제 열 목록에서 관계 데이터로 작업 시 축소할 수 있습니다. 또한 관계 열은 해당 특정 열에 대한 세부 정보를 표시하도록 클릭할 수 있습니다. 이 기능은 통합 문서에서 TableSheet를 선택하는 경우 디자이너의 오른쪽에 있는 TableSheet 패널에도 적용됩니다. 추가 기능에는 필드 그룹화 및 드래그가 포함됩니다.



TableSheet 계층 구조 데이터

디자이너에서 TableSheet 구현에 관해 또 다른 기능이 향상되어 데이터 소스의 열 탭에서 계층 구조 데이터가 추가로 지원됩니다. 이제 열에는 유형, 요약, 수식 및 정의할 수 있는 아웃 라인 열과 같은 항목과 함께 별도의 "계층 구조" 섹션이 있습니다.



이러한 옵션은 다음과 같이 사용할 수 있습니다.

  • 유형 - 부모, 자식 경로 또는 수준으로 정의됨
  • 요약 수식 - 지정된 열에 대한 계층 구조 요약 수식 입력
  • 아웃 라인 열 - 열의 디스플레이를 사용자 정의하여 체크박스, 이미지 또는 표시기 포함 여부 지정

선택 - 수준 찾기/바꾸기

대용량 워크시트에서 특정 데이터를 검색하는 경우 특정 선택 범위의 셀만 검색하는 것이 좋습니다. v16에서는 특정 선택 범위의 셀에서만 검색할 수 있도록 찾기 및 바꾸기 기능을 향상했습니다.



형식 창

새로운 형식 창 버튼을 통해 사용자는 셰이프, 그림 및 차트의 기존 측면 패널을 쉽게 열 수 있습니다.

계산의 향상된 기능

잘못된 수식 입력 동작 및 스타일

SpreadJS는 잘못된 수식을 자동으로 인식하며 사용자가 제출하려고 할 때 오류를 표시합니다. 하지만 수식이 잘못된 경우 제거될 수 있었습니다. 이 릴리스에서는 이 동작을 향상하여 셀에서 수식을 유지하고, AllowInvalidFormula 옵션이 true로 설정된 경우 수식을 텍스트로 변환합니다.

spread.options.allowInvalidFormula = true;

이 기능 향상으로 특히 잘못된 서식에 대한 셀 상태도 추가했습니다. 따라서 잘못된 수식이 있는 셀을 표시하고 이러한 특정 셀에 스타일을 적용할 수 있습니다.

셰이프의 향상된 기능

Excel과 유사한 폼 컨트롤

SpreadJS 내에서 자체 폼을 더욱 쉽게 만들 수 있도록 유용하고 SpreadJS 셰이프를 기반으로 한 Excel과 유사한 폼 컨트롤 일부를 추가했습니다. 이러한 컨트롤은 다음과 같습니다.

  • 버튼
  • 스핀 버튼
  • 목록 상자
  • 콤보 상자
  • 확인란
  • 옵션 버튼
  • 그룹 상자
  • 레이블
  • 스크롤 막대


이러한 컨트롤은 컨트롤의 위치 및 크기를 나타내는 addFormControl 메서드의 왼쪽, 상단, 너비 및 높이 매개 변수를 지정하여 워크시트 어디에든 배치할 수 있습니다. 위치 및 크기가 설정되고 컨트롤이 생성되면 위의 스크린샷에 있는 나이 스핀 버튼과 같은 특정 셀에 바인딩할 수 있습니다. 또한 FormControlValueChanged라는 새로운 이벤트가 추가되어 폼 컨트롤의 값이 변경될 때마다(UI 작업, API 호출 또는 연관된 셀 변경) 실행할 수 있습니다.


크기 조정 기능 향상

개발자는 이제 셰이프 크기 조정의 다양한 유형을 제한하거나 허용할 수 있습니다. 이러한 유형에는 측면, 가로, 세로 크기 조정이 포함되며 API "allowResize"를 사용하여 설정할 수 있습니다.



Shift + 마우스 크기 조정 동작

allowResize가 시트에서 true로 설정되면 셰이프의 크기를 조정하는 동안 shift 키를 길게 눌러 셰이프의 가로세로 비율을 유지할 수 있습니다.

통합 문서의 향상된 기능

SpreadJS의 기본 통합 문서 기능 몇 가지가 향상되었습니다.

복사/잘라내기 취소 이벤트

복사 및 잘라내기의 이벤트 기능이 향상되어 클립보드의 현재 상태를 제공합니다. 이는 다음 이벤트에 추가된 추가 인수와 함께 복사/잘라내기/붙여넣기 프로세스의 특정 단계 동안 특정 기능을 구현하도록 돕습니다.

  • ClipboardChanging
  • ClipboardPasting
  • ClipboardPasted

셀 꾸미기 스타일

셀 꾸미기를 포함하도록 스타일 구현 기능이 향상되었습니다. 여기에는 다음이 포함됩니다.

  • 타원 색
  • 모서리 폴드 색
  • 아이콘(위치, 아이콘, 색)


데이터 유효성 검사의 사용자 정의 스타일

데이터 유효성 검사는 데이터를 잘못되었다고 표시하거나 특정 데이터 입력을 방지하는 데 유용합니다. 스타일은 해당 유효성 검사에 대해 설정할 수 있지만 이 릴리스에서는 데이터 유효성 검사에 대한 사용자 정의 스타일을 설정하는 기능을 추가했습니다.


EditEnding 및 EditEnded 이벤트의 입력 취소

EditEnding 및 EditEnded 이벤트는 사용자가 셀에 데이터를 입력하거나 변경한 후에 발생합니다. v16 릴리스에서는 취소 매개 변수를 추가하여 개발자가 필요한 경우 편집을 취소할 수 있습니다.




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

spjs.png

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2023 GrapeCity inc.