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

SpreadJS 디자이너를 사용하여 셀 수준 바인딩 레이아웃을 시각적으로 만들 수 있습니다. 이를 통해 개별 셀에 하나의 데이터 레코드의 필드를 표시하는 양식, 상세 페이지, 송장, 주문 템플릿 및 기타 레이아웃을 만드는 데 필요한 코드의 양을 줄일 수 있습니다.

시트 바인딩 레이아웃은 바인딩 경로를 사용하여 셀을 바인딩 원본의 필드와 연결합니다. 바인딩 원본은 데이터 개체 또는 데이터 매니저 테이블의 단일 레코드일 수 있습니다.

시트 바인딩 도구 열기

시트 바인딩 도구는 데이터 탭에서 사용할 수 있습니다.

데이터 탭을 엽니다.
시트 바인딩을 클릭하여 필드 목록 패널을 열거나 닫습니다.
시트 바인딩 아래의 드롭다운 화살표를 클릭하여 명령 메뉴를 엽니다.
시트 바인딩 UI에는 다음 두 가지 주요 영역이 있습니다.

리본의 시트 바인딩 명령
디자이너 오른쪽의 필드 목록 패널

image-20260730.47b07a.png

시트 바인딩 명령

시트 바인딩 드롭다운에서는 필드 정의, 바인딩 경로, 레이블 및 데이터 매니저 테이블 바인딩을 관리하기 위한 명령을 제공합니다.

image-20260730.94f6dc.png

명령	설명
스키마 불러오기	로컬 스키마 파일에서 필드 정의를 불러와 필드 목록 패널에 표시합니다.
스키마 저장	필드 목록 패널의 현재 필드 정의를 JSON 스키마 파일로 저장합니다.
바인딩 경로 지우기	선택한 셀, 범위, 행, 열 또는 전체 시트와 같은 현재 선택 영역에서 바인딩 경로를 제거합니다.
레이블 자동 생성	필드를 워크시트에 배치할 때 바인딩된 셀의 왼쪽에 편집 가능한 레이블을 생성합니다.
데이터 매니저 테이블 바인딩	활성 시트를 데이터 매니저 테이블의 한 레코드에 바인딩하고 해당 레코드를 현재 바인딩 원본으로 사용합니다.

필드 목록 패널

필드 목록 패널에는 워크시트에 배치하여 바인딩 경로를 만들 수 있는 필드 노드가 포함되어 있습니다.

image-20260730.5c5037.png

image-20260730.52e455.png

필드 목록 패널의 컨트롤을 사용하여 필드 노드를 관리합니다.

컨트롤	아이콘	설명
추가		필드 노드를 추가합니다.
이름 바꾸기		필드 이름 또는 표시 이름을 변경합니다.
삭제		필드 노드를 제거합니다.
필드 옵션 메뉴		필드 노드에 사용할 필드 옵션을 선택합니다.

필드에는 텍스트, 표, 체크박스, 하이퍼링크, 콤보 박스, 단추 등의 옵션을 사용할 수 있습니다. 필드를 워크시트에 배치하면 디자이너에서 바인딩 경로를 만들고 선택한 필드 옵션을 생성된 셀 또는 레이아웃에 적용합니다.

image-20260730.f2f963.png

필드 목록의 필드 이름은 바인딩 원본으로 사용되는 데이터 개체 또는 데이터 매니저 테이블 레코드의 필드와 일치해야 합니다.

필드 정의 만들기 또는 불러오기

워크시트에 필드를 배치하기 전에 필드 목록 패널에서 필드 정의를 준비합니다.

다음과 같은 방법으로 필드 정의를 준비할 수 있습니다.

필드 목록 패널에서 필드 노드를 직접 만듭니다.
스키마 파일에서 필드 정의를 불러옵니다.
시트를 데이터 매니저 테이블에 바인딩하고 선택한 테이블의 필드를 사용합니다.

필드 노드 직접 만들기

필드 노드를 직접 만들려면:

데이터 탭을 엽니다.
시트 바인딩을 클릭하여 필드 목록 패널을 표시합니다.
필드 목록 패널에서 추가 단추를 클릭하여 필드 노드를 추가합니다.
필요에 따라 필드 노드의 이름을 변경합니다.
필드 옵션 메뉴에서 필드 옵션을 선택합니다.
예를 들어 name, age, email 또는 married와 같은 필드를 만들고 불리언 필드에 체크박스와 같은 필드 옵션을 선택할 수 있습니다.

createManually-20260730.c70c7c.gif

스키마 불러오기 또는 저장

스키마 불러오기를 사용하여 로컬 스키마 파일에서 필드 정의를 불러와 필드 목록 패널에 표시합니다.

image-20260730.2ad849.png

스키마 저장을 사용하여 필드 목록 패널의 현재 필드 정의를 JSON 스키마 파일로 저장합니다.

image-20260730.77db23.png

스키마 파일에는 필드 목록의 필드 정의가 저장됩니다. 워크시트 레이아웃, 셀 값 또는 사용자가 입력한 시트 데이터는 저장되지 않습니다.

워크시트에 필드 배치

필드 목록 패널에서 워크시트의 셀로 필드를 드래그하여 바인딩 레이아웃을 만듭니다.

place-20260730.661c80.gif

필드를 워크시트에 배치하면 디자이너에서 대상 셀에 대한 바인딩 경로를 만듭니다. 디자인 모드에서 바인딩된 셀에는 [name], [email] 또는 [married]와 같이 대괄호로 묶인 자리 표시자가 표시될 수 있습니다. 이러한 자리 표시자는 셀에 바인딩 경로가 있음을 나타냅니다.

중첩된 필드는 바인딩 경로에 점 표기법을 사용합니다. 예를 들어 다음 개체에는 중첩된 postcode 필드가 포함되어 있습니다.

{
    name: "Bob",
    age: "35",
    gender:"male",
    email:"bob@example.com",
    married:"yes",
    address: {
        postcode: "710075"
    }
}

다음 바인딩 경로를 사용하여 셀을 중첩된 필드에 바인딩할 수 있습니다.

address.postcode

해당 자리 표시자는 다음과 같이 표시됩니다.

[address.postcode]

place2-20260730.82c3c4.gif

레이블 자동 생성

레이블 자동 생성 옵션은 시트에 필드를 배치할 때 레이블을 자동으로 생성합니다.

image-20260717.d3d04a.png

예를 들어 orderId 필드를 셀로 드래그하면 디자이너에서 바인딩된 셀 옆에 orderId와 같은 레이블을 생성할 수 있습니다.

테이블 필드에서 양식 형태의 레이아웃을 빠르게 만들려는 경우 이 옵션을 사용합니다.

AutoGenerateLabel-20260730.99124b.gif

바인딩 경로 지우기

바인딩 경로 지우기를 사용하여 셀에서 바인딩 경로를 제거합니다.

image-20260717.60b654.png

이 작업은 현재 선택 영역에 따라 선택한 셀 또는 시트 영역에서 셀 바인딩 경로 정보를 지웁니다. 표시되는 값과 서식 동작은 현재 시트 상태에 따라 달라질 수 있습니다.

clear-20260730.c099a4.gif

시트를 데이터 매니저 테이블에 바인딩

디자이너에서 활성 시트를 데이터 매니저 테이블에 바인딩할 수 있습니다. 이렇게 하면 선택한 데이터 매니저 테이블의 한 레코드를 현재 셀 바인딩 원본으로 사용할 수 있습니다.

시트를 바인딩하기 전에 데이터 원본 패널에서 데이터 매니저 테이블을 만들거나 구성합니다.

image-20260717.011aed.png

시트를 데이터 매니저 테이블에 바인딩하려면:

데이터 탭을 엽니다.
시트 바인딩을 클릭합니다.
데이터 매니저 테이블 바인딩을 선택합니다.
데이터 매니저 테이블 바인딩 대화 상자의 데이터 테이블 바인딩에서 테이블을 선택합니다.
레코드 인덱스 바인딩에 레코드 인덱스를 입력합니다.
확인을 클릭합니다.

선택한 레코드가 시트의 현재 바인딩 원본이 됩니다. 시트의 바인딩 경로는 해당 레코드를 기준으로 확인됩니다.

예를 들어 데이터 테이블 바인딩이 Table1로 설정되고 레코드 인덱스 바인딩이 0으로 설정된 경우 시트는 Table1의 첫 번째 레코드에 바인딩됩니다. 바인딩 경로가 orderId인 셀에는 해당 레코드의 orderId 값이 표시됩니다.

레코드 인덱스는 0부터 시작합니다. 첫 번째 레코드는 인덱스 0을 사용합니다.

dm-20260730.ebd1d3.gif

데이터 매니저 테이블 바인딩 지우기

데이터 매니저 테이블 바인딩 대화 상자에서 지우기를 클릭하여 시트에서 현재 데이터 매니저 테이블 바인딩을 제거합니다.

image-20260730.73f820.png

이렇게 하면 시트의 현재 데이터 매니저 테이블 바인딩 원본이 지워집니다. 바인딩 경로 지우기를 사용하여 별도로 제거하지 않는 한 기존 바인딩 경로는 레이아웃에 남아 있을 수 있습니다.

dmClear-20260730.1d7780.gif

시트 바인딩과 테이블 바인딩 비교

시트 바인딩과 테이블 바인딩은 서로 다른 시나리오에서 사용됩니다.

시나리오	권장 기능
하나의 레코드에 있는 필드를 특정 셀에 표시	시트 바인딩
양식, 송장 또는 상세 템플릿 만들기	시트 바인딩
데이터 매니저 테이블의 모든 레코드를 행과 열로 표시	테이블 바인딩
워크시트 테이블을 데이터 매니저 테이블에 직접 바인딩	테이블 바인딩

디자이너 레이아웃 저장 및 사용

시트 바인딩 레이아웃을 만든 후 나중에 다시 사용하려면 통합 문서 레이아웃을 저장하거나 내보냅니다.

이는 스키마 저장과 다릅니다.

작업	저장되는 항목
스키마 저장	필드 목록 패널에서 사용하는 필드 정의
통합 문서 저장 또는 내보내기	워크시트 레이아웃, 바인딩 경로, 레이블, 셀 설정 및 기타 통합 문서 콘텐츠

파일 탭의 통합 문서 저장 또는 내보내기 옵션을 사용하여 디자인한 레이아웃을 저장합니다.

image-20260730.5981f2.png

image-20260730.f457d1.png

런타임에서 디자인한 레이아웃을 불러온 다음 시트를 실제 데이터 원본에 바인딩합니다. 다음 예제에서는 디자이너에서 만든 레이아웃을 불러오고 CellBindingSource를 사용하여 데이터 개체에 바인딩합니다.

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Binding</title>
    <link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet" />
    <script type="text/javascript" src="./scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
    <script type="text/javascript" src="binding.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 });

            var data = {
                name: "Bob",
                age: 20,
                gender: "Male",
                email: "bob@test.com",
                married: true
            };

            // Load the Designer-created layout.
            // In this example, the exported layout is stored in the binding variable.
            spread.fromJSON(binding);

            var sheet = spread.getActiveSheet();

            // Bind the sheet to the actual data source.
            sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource(data));
        };
    </script>
</head>
<body>
    <div id="ss" style="width: 600px; height: 250px; border: 1px solid gray"></div>
</body>
</html>

바인딩 경로에 사용되는 필드 이름은 데이터 원본의 필드와 일치해야 합니다. 예를 들어 바인딩 경로가 name인 셀은 데이터 개체의 name 필드를 참조합니다.

완성된 레이아웃에서는 디자이너에서 만든 바인딩 경로에 정의된 셀에 바인딩된 데이터가 표시됩니다.