[SpreadJS] 데이터 바인딩

웹 개발을 진행할 때 분리된 뷰와 모델이 동기화 된 상태로 유지되게 하려면 데이터 바인딩(Data Binding) 이란 것을 해야한다. 이번엔 SpreadJS 로 데이터를 바인딩 하는 방법에 대해서 정리해 보았다.

---

데이터 바인딩

일단 데이터 바인딩에 대해서 간단히 설명하자면, 뷰와 모델에서 쓰이는 각각의 데이터 소스를 연결하고 동기화된 상태를 유지하는 기술을 말한다.
[참고 링크 : 데이터 바인딩(Data Binding) velog 블로그 글]
SpreadJS 에서는 데이터 바인딩 방법이 3개가 있던데 각각 어떻게 쓰는 건지 정리해 보자.

---

시트 바인딩

• setDataSource 메서드를 이용해서 데이터를 시트에 바인딩한다.
• 시트의 열에 대한 설정(열 너비, 열 헤더에 표시될 텍스트 등등)를 지정하기 이전에 데이터 소스를 먼저 시트에 바인딩 해야한다.
• bindColumn 메서드를 이용하여 시트의 열에 대한 설정을 지정한다.
  • 열을 자동으로 생성하는 sheet.autoGenerateColumns 속성를 false 로 지정해야 한다.
  • 열에 대한 설정을 지정하는 property
    • name : 데이터의 key 값 지정
    • displayName : 열 헤더에 표시될 내용
    • visible : 열 표시 여부 지정
    • size : 열 너비 지정
    • resizable : 열 너비를 마우스로 변경할 수 있는지 여부
    • formatter : 열 내부의 셀 텍스트 표시 형식 지정
  • 열에 대한 설정을 지정하는 객체 배열 생성해서 지정한다.
    <<코드 예시>>

    var colInfos = [
    	{ name: 'position', displayName: 'Position', visible: true, starSize:'*' },
    	{ name: 'name', displayName: 'Display Name', size: 120 },
    	{ name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 },
    	{ name: 'age', displayName: 'Age', size: 40, resizable: false },
    ];
    sheet.bindColumns(colInfos);

• 시트 바인딩을 쓰는 경우
  • DB 데이터를 시트 전체를 표현하려는 경우
  • 바인딩 경로를 따로 지정할 필요 없이 불러오는 경우
  • 셀 위치 지정 없이 JSON 객체 배열 형태의 DB 데이터를 한 번에 불러오는 경우

[참고 링크 : SpreadJS 데모 시트 바인딩]

---

 

셀 바인딩

• setDataSource 메서드를 이용해서 데이터를 셀에 바인딩한다.
• GC.Spread.Sheets.Bindings.CellBindingSource 클래스를 이용해서 바인딩 소스 객체를 생성하고 그 객체를 이용해서 데이터를 바인딩한다.
• setBindingPath 메서드를 이용해 바인딩 경로를 지정해서 특정 셀에 데이터를 표시한다.
• 데이터 소스를 바인딩한 후에 바인딩 경로를 지정헤서 셀에 데이터를 표시해도 된다.
• 셀 바인딩을 쓰는 경우
  • 셀 주소를 이용해 특정 위치에 데이터를 표현하려는 경우
  • 객체 형태의 데이터 중 특정 항목의 데이터를 특정 셀에 표현하려는 경우

[참고 링크 : SpreadJS 데모 셀 바인딩]

---

 

표 바인딩

• setDataSource메서드와 bind 메서드를 이용해서 데이터를 표 객체에 바인딩한다.
• 표 객체는 add 메서드를 통해 생성한다.
• GC.Spread.Sheets.Tables.TableColumn 클래스를 이용해서 표의 각 열에 대한 설정을 생성하여 지정한다.
• 각 표에 대한 설정을 지정하는 방법은 데이터 바인딩 시 사용되는 메서드에 따라 다르다.
  • setDataSource메서드
    • GC.Spread.Sheets.Tables.TableColumn 클래스로 생성된 각 열에 대한 설정을 bindColumns 메서드를 이용하여 지정한다.
    • bindColumns 메서드로 지정 시, TableColumn 객체로 이루어진 배열을 매개변수로 하여 지정한다.
    • bindingPath 메서드를 이용하여 바인딩 경로를 지정한다.
    • 데이터 소스를 바인딩한 후에 바인딩 경로를 지정하여 표에 데이터를 표시해도 된다.
      <<코드 예시>>

      var data = { name: 'Jones',  region: 'East',
      	sales: [
              { orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99 },
              { orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99 },
              { orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99 }
              ]};
      var tableColumns = [], 
      	names = ['orderDate', 'item', 'units', 'cost'],
      	labels = ['Order Date', 'Item', 'Units', 'Cost'];
      var table = sheet.tables.add('tableRecords', 10, 1, 4, 4);
      table.autoGenerateColumns(false);
      names.forEach(function (name, index) {
      	var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
      	tableColumn.name(labels[index]);
      	tableColumn.dataField(name);
      	tableColumns.push(tableColumn);
      });
      
      table.bindColumns(tableColumns);
      table.bindingPath('sales');
      source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
      sheet.setDataSource(source);

  • bind 메서드
    • bind 메서드의 매개 변수를 이용하여 각 열에 대한 설정, 바인딩 경로, 데이터 소스를 표에 지정할 수 있다.
      1. 첫 번째 매개 변수 : 각 열에 대한 설정 지정, Array 형태
      2. 두 번째 매개 변수 : 바인딩 경로 지정, String 형태
      3. 세 번째 매개 변수 : 바인딩할 데이터 소스 시정, JSON 형태
      <<코드 예시>>

      var spreadNS = GC.Spread.Sheets;
      var data = {
      	name: 'Jones', region: 'East',
          sales: [
          	{orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99, isMakeMoney: true},
              {orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99, isMakeMoney: false},
              {orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99, isMakeMoney: false}
          ]
      };
      var convert = function (item) {
      	return item['cost'] + '$';
      }
      var table = sheet.tables.add('tableSales', 0, 0, 5, 5);
      var tableColumn1 = new spreadNS.Tables.TableColumn(1, "orderDate", "Order Date", "d/M/yy");
      var tableColumn2 = new spreadNS.Tables.TableColumn(2, "item", "Item");
      var tableColumn3 = new spreadNS.Tables.TableColumn(3, "units", "Units");
      var tableColumn4 = new spreadNS.Tables.TableColumn(4, "cost", "Cost", null, null, convert);
      var tableColumn5 = new spreadNS.Tables.TableColumn(5, "isMakeMoney", "IsMakeMoney", null, new GC.Spread.Sheets.CellTypes.CheckBox());
      table.autoGenerateColumns(false);
      table.bind([tableColumn1, tableColumn2, tableColumn3, tableColumn4, tableColumn5], 'sales', data);

• 표의 각 열에 대한 정보 설정 시, sheet.autoGenerateColumns 속성를 false 로 지정해야 한다.
• 표 바인딩을 쓰는 경우
  • DB 데이터를 표 형태로 표현하려는 경우
  • 데이터를 그룹별로 쉽게 관리하고 분석하려는 경우
  • 특정 셀 영역에 데이터를 바인딩 하여 표현하려는 경우

[참고 링크 : SpreadJS 데모 표 바인딩]

---

결론

SpreadJS 에서 데이터 바인딩 시 3가지 방법으로 바인딩 할 수 있다.(시트/셀/표 바인딩)
각 바인딩 방법에 대해서 데이터를 바인딩 할 때, 데이터의 형태나 열에 대한 정보를 지정하는 방법이 다르다.
추가적으로 데모 사이트를 막 눌러 보다 확인 한 것인데, 데모 사이트의 오른쪽 상단에 'API' 를 클릭하면 SpreadJS 에서 쓰이는 API 에 대한 사이트로 연결 되는 것을 확인 했다.