SpreadJS Javascript 컴포넌트 시작하기

2~3줄의 코드만 사용하면 엔터프라이즈 응용 프로그램에 Excel과 같은 JavaScript 스프레드시트를 포함할 수 있습니다. 아래에서는 JavaScript 애플리케이션을 만들고 SpreadJS를 초기화하기 위한 지침을 찾을 수 있습니다.

단계

  1. JavaScript 응용 프로그램 만들기 - SpreadJS는 종속성이 없습니다. gc.spread.sheets.xx.x.x.css, gc.spread.sheets.all.xx.x.x.min.js 파일이 필요합니다.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
    
    <script src="gc.spread.sheets.all.xx.x.x.min.js">
    <link rel="stylesheet" href="gc.spread.sheets.xx.x.x.css"type="text/css"/>
    </head>
    
    <body></body>
    </html>
                                    
  2. SpreadJS 호스트 요소 추가 - 페이지 본문에 DOM 요소를 컨테이너로 포함합니다.
    <div id="ss"></div>
    
  3. JavaScript SpreadJS 컴포넌트 초기화 - Spread 컴포넌트는 새 GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 })으로 초기화됩니다.
        
    window.onload = function () {
    // Initialize a workbook
    var workbook = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // get workbook object
    // var workbook = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    };

값 및 수식 설정

단계

  1. setValue 메서드를 사용하여 셀의 값과 setFormula를 설정하여 계산합니다.
    var sheet = spread.getSheet(0);
    //Setting Values - Text
    sheet.setText(0,0,"This is a text");
    //Setting Values - Number 
    sheet.setValue(1, 0, 2245);
    sheet.setValue(2, 0, 2245);
    //Setting Values - DateTime
    sheet.setValue(3, 0, new Date(2020, 10, 7).toLocaleDateString('en-US');
    sheet.getRange(3, 0, 1, 1).formatter("mm-dd-yyyy");
    
    //Setting Formula, Sum of the A2 and A3 cell
    sheet.setFormula(3, 3, '=SUM(A2:A3)');
    

스타일 설정

아래 함수를 사용하면 데이터의 모양을 보다 유용하고 매력적으로 바꿀 수 있습니다.

단계

  1. 이 단계에서 더 매력적으로 만들기 위해 시트의 스타일을 설정합니다.

    //Setting style
    sheet.setColumnWidth(1, 200);
    sheet.setColumnWidth(2, 200);
    sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
    sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
    sheet.addSpan(1, 1, 1, 2);
    sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
        all: true
    });
    sheet.getRange(2, 1, 3, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
        inside: true
    });
    sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);

데이터 바인딩

간단하면서도 효율적으로 데이터를 바인딩하는 방법을 살펴봅니다.

단계

  1. getSheet 메서드를 사용하여 작업 중인 시트를 가져옵니다. "new GC.Spread.Sheets.Bindings.CellBindingSource(person);"를 사용하여 셀 바인딩 원본을 설정합니다. 그런 다음 setBindPath 메서드를 사용하여 지정된 시트 영역에서 지정된 셀의 바인딩 경로를 설정합니다. 그런 다음, setDataSource 메서드를 사용하여 시트의 데이터 소스를 설정합니다.
    var sheet = spread.getSheet(0);
    var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
    var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
    sheet.setBindingPath(2, 2, 'name');
    sheet.setBindingPath(3, 2, 'age');
    sheet.setBindingPath(4, 2, 'gender');
    sheet.setBindingPath(5, 2, 'address.postcode');
    sheet.setDataSource(source);