데이터 원본 바인딩

다음 섹션에서는 데이터 원본에서 테이블로 데이터를 불러오는 상세 단계를 설명합니다.

아래 단계를 따라 작성한 스크립트를 빠른 시작에서 생성한 HTML 페이지에 추가할 수 있습니다.

1단계: 데이터 소스를 위한 샘플 데이터 생성

학생의 성적표 데이터를 포함하는 createSampleData 함수를 만드세요.

//1:- createSampleData() 함수 생성
function createSampleData() {
    // 샘플 성적표 데이터 생성
    return [
        {
            Course: "Calculus",
            Term: 1,
            Credit: 5,
            Score: 80,
            Teacher: "Nancy.Feehafer",
        },
        {
            Course: "P.E.",
            Term: 1,
            Credit: 3.5,
            Score: 85,
            Teacher: "Andrew.Cencini",
        },
        {
            Course: "Political Economics",
            Term: 1,
            Credit: 3.5,
            Score: 95,
            Teacher: "Jan.Kotas",
        },
        {
            Course: "Basic of Computer",
            Term: 1,
            Credit: 2,
            Score: 85,
            Teacher: "Steven.Thorpe",
        },
        {
            Course: "Micro-Economics",
            Term: 1,
            Credit: 4,
            Score: 62,
            Teacher: "Jan.Kotas",
        },
        {
            Course: "Linear Algebra",
            Term: 2,
            Credit: 5,
            Score: 73,
            Teacher: "Nancy.Feehafer",
        },
        {
            Course: "Accounting",
            Term: 2,
            Credit: 3.5,
            Score: 86,
            Teacher: "Nancy.Feehafer",
        },
        {
            Course: "Statistics",
            Term: 2,
            Credit: 5,
            Score: 85,
            Teacher: "Robert.Zare",
        },
        {
            Course: "Marketing",
            Term: 2,
            Credit: 4,
            Score: 70,
            Teacher: "Laura.Giussani",
        },
    ];
}

2단계: 특정 데이터 원본을 사용하여 테이블 추가

1. loadTable 함수를 생성하고, 모범 사례에 따라 suspendPaint와 resumePaint 메서드를 호출한 후, 활성 스프레드시트를 가져옵니다.

    //2.1: 데이터 원본에서 가져온 데이터로 테이블 만들기
       function loadTable(ss, data) {
       //모든 변경을 한 번에 반영하기 위해 페인트를 일시 중지하는 것이 권장됩니다.
          ss.suspendPaint();
          try {
           //Get the active spreadsheet
           var sheet = ss.getActiveSheet();
             } catch (e) {
           alert(e.message);
          }
         //전체 Spread 인스턴스를 모든 변경과 함께 한꺼번에 다시 그리기 위해 페인트를 재개합니다.
         ss.resumePaint();
       }

2. loadTable 함수 안에서 addFromDataSource 메서드를 활용해 특정 데이터 원본을 가진 범위 테이블을 활성 시트에 추가합니다.

   //2.1: 데이터 원본의 데이터를 사용해 테이블을 생성하세요.
       function loadTable(ss, data) {
         ss.suspendPaint();
         try {
           var sheet = ss.getActiveSheet();
           //2.2: 특정 데이터 원본으로 범위 테이블을 추가합니다.
           var table = sheet.tables.addFromDataSource(
             "Table1",
             0,
             0,
             data,
             GC.Spread.Sheets.Tables.TableThemes.medium2
           );
          } catch (e) {
           alert(e.message);
         }
         ss.resumePaint();
       }

3단계: 테이블 스타일 설정하기

1. highlightFirstColumn과 showHeader를 True로 지정하여 테이블 스타일을 변경합니다.

2. setColumnWidth 메서드를 사용하여 열 너비를 설정하세요.

   //2: 데이터 원본의 데이터를 사용하여 테이블을 생성하세요.
   //3: 테이블 스타일 설정
       function loadTable(ss, data) {
         //모든 변경 사항을 한 번에 반영하기 위해 페인트를 일시 중지합니다.
         ss.suspendPaint();
         try {
           //활성 스프레드시트 가져오기
           var sheet = ss.getActiveSheet();
   
           //특정 데이터 원본을 사용하여 범위 테이블을 추가합니다.      
           var table = sheet.tables.addFromDataSource(
             "Table1",
             0,
             0,
             data,
             GC.Spread.Sheets.Tables.TableThemes.medium2
           );
           // 3.1) 헤더 표시
           table.showHeader(true);
   
           // 3.1) 첫 번째 열 강조하기
           table.highlightFirstColumn(true);
   
           // 3.2) 열 너비 설정
           sheet.setColumnWidth(0, 130);
           sheet.setColumnWidth(1, 130);
           sheet.setColumnWidth(2, 70);
           sheet.setColumnWidth(3, 70);
           sheet.setColumnWidth(4, 100);
           sheet.setColumnWidth(5, 260);
   
         } catch (e) {
           alert(e.message);
         }
         //모든 변경 사항을 한 번에 반영하기 위해 페인트를 다시 시작합니다.
         ss.resumePaint();
       }

4단계: SpreadJS 인스턴스 새로고침

1. SpreadJS 인스턴스를 갱신하고 reset 메서드를 통해 변경된 내용을 초기화하는 refresh 함수를 생성하세요. 이 함수는 샘플 데이터를 로드하고 loadTable(ss, data) 함수를 호출하여 테이블을 추가합니다.

   //4:- refresh 함수 생성
   function refresh() {
       var ss = GC.Spread.Sheets.findControl(document.getElementById("ss"));
       // 활성 시트 가져오기
       var sheet = ss.getActiveSheet();
       // 시트를 초기화하고 열 개수를 설정하세요
       sheet.reset();
       sheet.setColumnCount(7);
       // 샘플 데이터를 사용하여 테이블을 Spread 인스턴스에 로드하세요
       var data = createSampleData();
       loadTable(ss, data);
   }

2. Spread 컴포넌트를 초기화할 때 refresh 함수를 호출하세요.

   $(document).ready(function () {
       // Spread 초기화
       var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
       // refresh 함수 호출
       refresh();
   });

위 코드의 실행 결과는 다음과 같습니다: