SpreadJS v15 릴리스에는 새로운 기능을 많이 추가했지만 그중 가장 중요한 두 가지는 새로운 TableSheet 및 Data Manager입니다. 이 블로그에서는 이 기능에 대해 살펴보고 JavaScript 스프레드시트 응용 프로그램에서 사용하는 방법을 알아보겠습니다.

TableSheet

SpreadJS TableSheet는 기존의 계산 엔진 기능을 매우 강력한 데이터 표와 결합하는 새로운 유형의 시트 컴포넌트입니다. 이 빠른 데이터 바인딩 표 보기에는 정렬, 필터링, 기타 여러 데이터 관리 기능을 믿기 어려울 만큼 빠르게 만드는 관계형 데이터 관리자가 포함되어 있습니다.

데이터 바인딩

TableSheet의 가장 큰 특징 중 하나는 내부 스프레드시트 구조를 활용할 필요가 없는 고급 데이터 바인딩입니다. 이는 이러한 시트가 그룹 수준의 계산 및 슬라이서를 포함하는 블록 그룹화와 같은 기능을 지원한다는 의미입니다. 이것은 다른 어떤 데이터 표 컴포넌트보다 많은 대용량 데이터를 효율적으로 지원할 수 있습니다.

또한 사용자는 런타임에 표시되는 패널을 사용하여 열 및 데이터 그룹의 보기를 조정할 수 있습니다. 뿐만 아니라 행 추가/제거/저장/재설정을 위한 특별 UI가 있는 동작 열을 사용할 수도 있습니다. 검색할 값을 제공하는 것만으로 레코드까지 검색할 수도 있습니다.

계산

고급 계산 엔진을 이용하여 계산된 열을 간단한 열 참조 또는 고급 요약 및 다음과 같은 논리 함수를 포함하는 TableSheet에 추가하십시오.

var myView = productTable.addView("myView", [
  { value: "productId", caption: "ID"},
  { value: "productName", caption: "Name", width: 400 },
  { value: "unitPrice", caption: "Unit Price", width: 100 },
  { value: "unitsInStock", caption: "Units In Stock", width: 100 },
  { value: "unitsOnOrder", caption: "Units On Order", width: 100 },
  { value: "=SUM([@unitsInStock], [@unitsOnOrder])", caption: "Total Amount", width: 100 },
  { value: "=[@unitPrice] * SUM([@unitsInStock], [@unitsOnOrder])", caption: "Total Price", width: 100 }
]);

저장

일반 SpreadJS 워크시트와 마찬가지로 TableSheet 인스턴스를 JSON, Excel .xlsx, PDF 파일 등에 내보낼 수도 있습니다.

스타일

SpreadJS와 마찬가지로 표 시트는 데이터 바인딩 조건부 서식, 데이터 유효성 검사, 열 스타일을 지원합니다. 행 스타일 및 상태를 교대로 사용하여 데이터의 모양을 추가로 사용자 정의할 수 있습니다.

행과 열을 TableSheet의 위쪽과 옆쪽에 고정하여 항상 보이도록 할 수 있으며, 이를 코드에서 그리고 런타임에 수행할 수 있습니다. 또한 조건부 서식 및 그 규칙은 셀의 값이 아닌 TableSheet에서 바인딩된 데이터를 기반으로 합니다.

SpreadJS와 통합

통합 문서의 표준 SpreadJS 시트와는 다르지만, TableSheet를 통합 문서에 추가할 수 있으며, 워크시트의 수식은 TableSheet의 데이터를 교차 참조하고 요약할 수 있습니다.

Data Manager

SpreadJS Data Manager는 바인딩된 데이터와의 연결 및 상호 작용을 전보다 더 쉽게 만드는 강력하고 새로운 데이터 엔진 API입니다. 이 컴포넌트는 데이터 바인딩, 데이터 관계, 그리고 행, 그룹 및 데이터 수준에서 그리드 계산을 완벽하게 지원하는 계산 엔진을 지원합니다.

이 컴포넌트는 서버 측 응용 프로그램과의 상호 작용을 지원하며 데이터 페치 요청을 전송합니다.

TableSheet와의 바인딩

Data Manager의 중요한 특징은 데이터 소스에서 데이터를 가져와 이를 위한 표를 만든 후에 TableSheet와 함께 사용할 수 있다는 점입니다. 어떤 특정 데이터 필드를 가져와 TableSheet에서 사용할지를 지정하기 위한 보기를 만들 수도 있습니다.

이 두 가지 컴포넌트를 연결하면 추가 기능이 됩니다. 예를 들어, 프로젝션된 데이터 바인딩 셀 또는 수식 참조와 같은 사용자 정의 셀 데이터 유형에 대한 지원이 포함됩니다. 또한 AutoSync 또는 Batch 업데이트 모드를 사용하여 데이터 소스를 자동으로 일괄 업데이트하는 데에도 TableSheet를 사용할 수 있습니다.

시작해 보겠습니다!

TableSheet 및 Data Manager의 기본 원리를 이해했다면 이를 사용하여 Data Manager를 생성하고 그 안에 표를 로드한 후 그 표의 보기를 TableSheet 인스턴스에 바인딩하는 프로젝트를 만들어 보겠습니다.

이 샘플을 다운로드하여 아래 섹션을 따라 수행하십시오!

데이터 초기화

첫 단계는 Data Manager를 사용하여 데이터를 바인딩하는 것입니다. 이 예제에서는 데이터가 위치한 URL을 사용하여 Data Manager 인스턴스에 표를 추가해야 합니다.

var tableName = "Order";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
  remote: {
      read: {
          url: apiUrl
      }
  }
});
​
function getBaseApiUrl() {
  return 'https://www.grapecity.com/spreadjs/demos/features/table-sheet/overview/purejs'.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}

Data Manager 인스턴스에는 데이터 소스에서 온 Orders 표가 있으며, TableSheet에서 이를 바인딩할 수 있습니다.

TableSheet 만들기

다음 단계는 TableSheet를 SpreadJS 인스턴스에 추가하는 것입니다. 일반 시트를 추가하되 tableSheet를 시트 유형으로 지정하기만 하면 됩니다. 이 예제에서는 새로운 행 버튼과 동작 열을 숨기려고 합니다.

var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet); sheet.options.allowAddNew = false; sheet.actionColumn.options({ visible: false });

TableSheet에서 보기 설정

TableSheet를 Data Manager에 연결하기 위한 마지막 단계는 Data Manager에서 보기를 만드는 것입니다. 그 후에 TableSheet에서 설정할 수 있습니다. 이 보기에는 데이터 소스의 어떤 필드를 표시할지가 자세히 지정되어 있습니다.

myTable.fetch().then(function() {
  var style = { formatter: 'MM/dd/yyyy' };
  var view = myTable.addView("myView", [
      { value: "Id", width: 80 },
      { value: "CustomerId", width: 100 },
      { value: "ShipName", width: 100 },
      { value: "EmployeeId", width: 120 },
      { value: "OrderDate", width: 100, style: style },
      { value: "RequiredDate", width: 120, style: style },
      { value: "ShippedDate", width: 120, style: style },
      { value: "ShipVia", width: 80 },
      { value: "Freight", width: 80 },
      { value: "ShipAddress", width: 120 },
      { value: "ShipCity", width: 100 },
      { value: "ShipRegion", width: 100 },
      { value: "ShipPostalCode", width: 140 },
      { value: "ShipCountry", width: 120 }
  ]); //the View has all default columns of the Table
  sheet.setDataView(view);
});

Data Manager가 연결된 간단한 TableSheet를 설정하는 방법을 알아보았습니다. 다른 기능도 다양하게 시도해 보려면 SpreadJS v15를 다운로드하여 직접 확인해 보세요!

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

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