[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

템플릿 디자이너에서 셀 바인딩 설정하기

SpreadJS 템플릿 디자이너를 사용하여 템플릿을 통해 데이터와의 바인딩 관계를 생성할 수 있습니다. 이는 코딩량을 줄여 시간을 절약할 수 있습니다.

템플릿 디자이너의 시트 바인딩 옵션은 셀 바인딩 템플릿을 디자인하는 데 사용됩니다. 시트 바인딩 옵션은 데이터 탭 아래에 위치합니다. 시트 바인딩을 사용하여 실제 데이터 필드와 일치하는 필드 노드를 생성할 수 있습니다. 또한 셀 유형 옵션(홈 탭)을 사용하여 데이터에 대한 셀 유형을 설정할 수 있습니다.

필드 노드를 추가하려면 초록색 플러스 기호를 선택합니다. 그런 다음 필드 이름(예: name)을 입력합니다. 드롭다운 화살표를 사용하여 확인란 등의 필드 옵션을 지정할 수 있습니다. 아래 이미지는 필드 노드를 추가하는 영역을 보여줍니다.

image


아래 이미지는 SpreadJS 템플릿 디자이너에서 시트 바인딩 옵션을 보여줍니다.

image


노드를 셀 영역으로 드래그하여 레이아웃을 생성할 수 있습니다. 또한 셀 유형 편집 옵션을 사용하여 셀 설정(예: 확인란 셀의 캡션 제거 등)을 변경할 수 있습니다.

image


나중에 템플릿을 다시 디자인하려면 SpreadJS 파일(sjs)로 저장하십시오. sjs 파일은 여러 JSON 파일의 압축 형태로 저장됩니다. sjs 파일로 저장하려면 파일(File) 탭의 저장 섹션을 사용하십시오.

image


아래 코드 샘플은 sjs 파일을 참조하는 코드를 페이지에 추가하는 방법을 보여줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>SpreadJS Binding</title>
  <meta name="spreadjs culture" content="ko-kr" />
  <link rel='stylesheet' href='./css/gc.spread.sheets.excel2016colorful.xx.x.x.css'>
  <script src='./scripts/gc.spread.sheets.all.xx.x.x.min.js'></script>
  <script src='./scripts/plugins/gc.spread.sheets.io.xx.x.x.min.js'></script>
  <script src='./scripts/resources/ko/gc.spread.sheets.resources.ko.xx.x.x.min.js'></script>
  <script type="text/javascript">
    let data = { name: "홍길동", age: 20, gender: "남성", email: "mailto:gildong@test.com",married: true };
    let spread;
    // SpreadJS 선언 및 양식 불러오기
    window.onload = function () {
      spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
      fetch("./binding.sjs")
        .then(res => res.blob())
        .then(blob => {
          spread.open(blob, function () {
            let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
            let sheet = spread.getSheet(0);
            sheet.setDataSource(source);
                 }, function (e) {
            console.log(e); // error callback
          }, {
            // openoptions - https://developer.mescius.com/spreadjs/api/modules/GC.Spread.Sheets#openoptions
            openMode: GC.Spread.Sheets.OpenMode.lazy
          });
        });
    }
  </script>
</head>
<body>
  <div id="ss" style="width:100%;height:280px"></div>
</body>
</html>

완성된 샘플은 다음과 같습니다:

image