[SpreadJS] 테이블 시트

데이터를 시트 단위로 화면에 표현해야 되서 시트 바인딩으로 데이터를 바인딩했다. 근데 테이블처럼 헤더의 필터 버튼으로 필터 기능을 써야해서 찾아 보다가 테이블 시트 기능을 발견 했다. 보아 하니 테이블 시트로 구현 가능한 것이 많아 보여서, 그 중에서 썼던 기능들만 정리하겠다.

---

테이블 시트

테이블 시트를 사용하려면 gc.spread.sheets.tablesheet.x.x.x.min.js 라이브러리를 먼저 헤더 태그 내부에 추가해야 한다.
해당 라이브러리를 추가한 후에, SpreadJS 에서 테이블 시트를 추가하면 아래와 같은 시트가 화면에 보여진다.

---

테이블 시트 생성

• 테이블 시트는 dataManager 클래스의 addTable 메서드를 이용해서 테이블을 생성한다.
• 이때, addTable 메서드의 dataSourceOption 옵션을 지정하여 테이블에 바인딩될 데이터에 대해 설정한다
  • data : 로컬 데이터 바인딩. JSON -> 객체 배열, CSV,XML -> string 형태로 지정해야 함.
  • remote : 외부 데이터 바인딩. REST API, Odata, GraphQL 지원.
  • autoSync : 자동 동기화 모드. 데이터 변경 사항(행 삽입, 변경)이 있을 시, 즉각 서버에 동기화.
  • batch : 배치 모드. 데이터 변경 사항(행 삽입, 변경, 삭제)이 있을 시, 데이터 소스에 보관됨. submitChanges 메서드를 호출해서 서버에 데이터 동기화.
  • schema : 데이터 소스 스키마 옵션. 데이터의 패턴을 지정함.
• 여기서 data 속성을 통해 테이블에 데이터를 바인딩 한 후, batch 모드를 지정해도 테이블 시트는 AutoSync 모드처럼 작동한다.(그레이프시티 개발자 포럼 링크 글 참고)
• 테이블 생성 후, 통합문서에 addSheetTab 메서드를 이용해서 테이블 시트를 추가한다.
• addView 메서드를 통해서 view 를 생성 후, setDataView 메서드를 이용해서 시트에 추가한다.
• addView 메서드의 columnInfos 옵션을 설정하여 테이블 시트의 열에 대한 설정을 지정한다.
• 설정 가능한 columnInfos 옵션 값
  • value : 행에 추가될 값. 데이터베이스를 통해 생성된 테이블의 필드 이름을 지정
  • caption : 행의 캡션.
  • width : 행의 너비.
  • style : 행의 스타일
  • conditionalFormats : 조건부 서식.
  • validators : 유효성 검사.
  • isPrimaryKey : 기본키 여부
  • readonly : 읽기 전용 여부.
  • required : 새 행 추가 시, 행 내용이 필수인지 여부.
  • defaultValue : 새 행 추가 시, 행에 지정될 기본 값.
  • style : 행 헤더에 지정될 스타일 옵션.

<<코드 예시>>

// 예시의 데이터는 SpreadJS 데모에 있는 데이터를 그대로 들고 와서 쓴 것
var dataManager = spread.dataManager();
// 데이터를 json 형태로 직접 지정하고 데이터 패턴을 지정한 테이블 시트
var myTable = dataManager.addTable("myTable", {
    data: [
        { description: "Mow grass", dueDate: "8/11/2021", priority: "High", assignedTo: "Dad", isFinished: "Yes", isEncouraged: "False", credit: "20,75" },
        { description: "Clean Room", dueDate: "8/9/2021", priority: "Medium", assignedTo: "Daughter", isFinished: "No", isEncouraged: "True", credit: "10,50" },
        { description: "Organize Pantry", dueDate: "8/8/2021", priority: "Low", assignedTo: "Son", isFinished: "Yes", isEncouraged: "True", credit: "10,75" },
        { description: "Prepare BBQ", dueDate: "8/12/2021", priority: "High", assignedTo: "Mom", isFinished: "No", isEncouraged: "False", credit: "30,25" }
    ],
    schema: {
        columns: {
            dueDate: { dataType: "date", dataPattern: "dd/MM/yyyy" },
            isFinished: { dataType: "boolean", dataPattern: "Yes|No" },
            isEncouraged: { dataType: "boolean", dataPattern: "True|False" },
            credit: { dataType: "number", dataPattern: "," }
        }
    }
});

// 서버에서 데이터 불러오기
// var myTable = dataManager.addTable("myTable", {
//     remote: {
//         read: {
//             url: 'https://demodata.grapecity.com/northwind/api/v1/Orders'
//         }
//     }
// });

//테이블 시트 추가
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);

//테이블 시트에 view 바인딩
myTable.fetch().then(function () {
    var view = myTable.addView("myView", [
        { value: "description", width: 120 },
        { value: "dueDate", width: 120, style: style },
        { value: "priority", width: 100 },
        { value: "assignedTo", width: 100 },
        { value: "isFinished", width: 100 },
        { value: "isEncouraged", width: 100 },
        { value: "credit", width: 80 }
    ]);
    sheet.setDataView(view);
});

[참고 링크 : SpreadJS 테이블 시트 개요 데모] | [참고 링크 : SpreadJS dataSourceOption API]
[참고 링크 : SpreadJS AutoSync 및 Batch 모드 데모] | [참고 링크 : 그레이프시티 개발자 포럼 Q&A 글]

개요 | 기능별 학습 | SpreadJS 데모

GC.Data | JavaScript Spreadsheet | SpreadJS

개요 | 기능별 학습 | SpreadJS 데모

테이블시트 getChanges() > Q&A | 토론 | 그레이프시티 개발자 포럼

---

행 동작

• 테이블 시트에 특정 버튼을 추가해서 행 동작을 취할 수 있다.
• rowActionOptions 클래스를 통해 행 동작을 취할 수 있는 버튼을 테이블 시트에 추가한다.
  • rowActionOptions 옵션
    • GC.Spread.Sheets.TableSheet.BuiltInRowActions.removeRow : 행 제거
    • GC.Spread.Sheets.TableSheet.BuiltInRowActions.saveRow : 행 저장
    • GC.Spread.Sheets.TableSheet.BuiltInRowActions.resetRow : 행 리셋
• 시트의 allowAddNew 옵션 값을 true 로 지정해서 시트에 새 행을 추가하는 동작을 취할 수 있도록 설정한다.

<<코드 예시>>

...
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = true;
var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions;
let options = sheet.rowActionOptions();
options.push(
    rowActions.removeRow,
    rowActions.saveRow,
    rowActions.resetRow,
);
sheet.rowActionOptions(options);
...

[참고 링크 : SpreadJS 행 동작 데모] | [참고 링크 : SpreadJS 행 작업 개요 데모]

행 작업 | 기능별 학습 | SpreadJS 데모

개요 | 기능별 학습 | SpreadJS 데모

---

스타일 지정

• 스타일 규칙
  • view.addStyleRule(name, style, rule) 메서드를 이용해서 테이블 시트에 수식 혹은 상태 규칙을 지정한다.
    • name : 규칙 이름.
    • style : 규칙에 해당하는 행 혹은 열의 스타일 지정.
    • rule : 규칙
      • formula : 수식. 수식 규칙을 지정하려는 경우 해당 옵션 사용.
      • direction : 상태 규칙이 지정될 시트의 방향. GC.Data.StateRuleDirection.column 혹은 GC.Data.StateRuleDirection.row 값을 가짐
      • state : 상태. 상태 규칙을 지정하려는 경우 해당 옵션 사용.

<<코드 예시>>

...
myTable.fetch().then(function () {
    var view = myTable.addView("myView", [
        ...
    ]);
    view.addStyleRule("columnStyle", { backColor: "lightblue" }, {
         direction: GC.Data.StateRuleDirection.column,
         state: GC.Data.RowColumnStates.hover
     }); // 상태 규칙 설정. 셀 선택 시, 셀이 포함된 열의 배경 색 변경
    sheet.setDataView(view);

});
...

• 다중 헤더
  • addView 메서드의 columnInfos 옵션 중, caption 옵션 값을 이용해 지정한다.
  • 다중으로 표현 되게 하고자 하는 열의 caption 옵션 값에 배열 값을 지정하여 다중 헤더를 표현 한다.

<<코드 예시>>

var view = myTable.addView("myView", [
    { value: "Id", width: 80 },
    { value: "CustomerId", width: 120 },
    { value: "ShipName", width: 100 },
    { value: "OrderDate", width: 120, style: style },
    { value: "RequiredDate", width: 120, style: style },
    { value: "ShippedDate", width: 120, style: style },
    { value: "ShipVia", width: 80 },
    { value: "Freight", width: 80 },
    { value: "ShipAddress", caption: ["Ship To", "Address"], width: 120 }, // 다중 헤더
    { value: "ShipCity", caption: ["Ship To", "City"], width: 100 }, // 다중 헤더
    { value: "ShipRegion", caption: ["Ship To", "Region"], width: 100 }, // 다중 헤더
    { value: "ShipPostalCode", caption: ["Ship To", "PostalCode"], width: 140 }, // 다중 헤더
    { value: "ShipCountry", caption: ["Ship To", "Country"], width: 120 } // 다중 헤더
]);

• 콤보 박스
  • addTable 메서드를 이용해서 테이블 생성 시, schema 옵션을 통해 각 열에 대한 dataType 을 지정해서 콤보 박스를 추가할 수 있다.
  • schema 옵션의 dataMap 옵션 값을 설정해서도 콤보 박스를 설정 할 수 있다.(SpreadJS IColumn API 링크 참고)

<<코드 예시>>

...
var myTable = dataManager.addTable("myTable", {
    ...
    schema: {
        columns: {
            OrderId: {dataName: "Id"},
            OrderDate: {dataType: "date"}, // 날짜를 선택할 수 있는 팝업 창이 뜨도록 설정
            RequiredDate: {dataType: "date"},
            ShippedDate: {dataType: "date"},
            ShipVia: {dataMap: {1: "Speedy Express", 2: "United Package", 3: "Federal Shipping"}}
        }
    }
});
...

[참고 링크 : SpreadJS 스타일 규칙 데모] | [참고 링크 : SpreadJS 데이터 원본 스키마 개요 데모]
[참고 링크 : SpreadJS 열 헤더 사용자 정의 데모] | [참고 링크 : SpreadJS 다중 헤더 데모]
[참고 링크 : SpreadJS IColumn API]

스타일 규칙 | 기능별 학습 | SpreadJS 데모

데이터 소스 스키마 | 기능별 학습 | SpreadJS 데모

열 헤더 사용자 정의 | 기능별 학습 | SpreadJS 데모

개요 | 기능별 학습 | SpreadJS 데모

GC.Data | JavaScript Spreadsheet | SpreadJS

---

결론

dataManager 클래스의 addTable 메서드를 통해서 테이블을 생성하고 그 테이블을 시트에 추가해서 테이블 시트를 생성한다. 이때, 데이터는 addView 메서드와 setDataView 메서드를 통해서 바인딩 한다.
addTable 메서드 혹은 addView 메서드의 옵션을 지정하여 테이블 시트의 열에 대해 다양한 설정 및 스타일을 지정할 수 있다.
rowActionOptions 옵션을 시트에 지정하여 보다 편리하게 행 동작을 수행하는 버튼을 추가할 수 있다.
addStyleRule 를 이용해서 스타일 규칙을 테이블 시트에 지정할 수 있다.
이외의 테이블 시트에 지원되는 기능을 모두 정리하기에는 어려움이 있어, 썼던 기능들에 대한 정리는 추후에 시간 나는 대로 정리할 예정이다.