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

AngularJS에서 SpreadJS 시작하기

SpreadJS는 AngularJS를 지원합니다.

AngularJS는 클라이언트 측에서 JavaScript를 사용하는 웹 애플리케이션 프레임워크입니다.

다음 단계에 따라 AngularJS와 함께 SpreadJS를 사용할 수 있습니다.

  • SpreadJS AngularJS 모듈 JS 파일인 /scripts/interop/angular/gc.spread.sheets.angularjs.xxx.js를 추가합니다.

  • 애플리케이션 JS 파일에 gcspreadsheets 모듈을 추가합니다. 예를 들어, 작업 범위가 "myApp"이라는 ng-app 속성으로 지정되어 있다면, 앱 정의 JS 파일에 다음과 같은 코드를 추가합니다:

    angular.module("myApp", ["gcspreadsheets", "module2","module3",...])

  • 가능하다면, 컴포넌트를 초기화하기 전에 유효한 SpreadJS 라이선스 키를 추가합니다.

     <script>
    // SpreadJS 라이선싱
    GC.Spread.Sheets.LicenseKey = "xxx";        // 유효한 라이선스 키를 입력하세요.      
 </script>

  • HTML 페이지에 gc-spread-sheets 태그를 추가합니다. 그런 다음 시트와 열을 시트 안에 추가합니다. spread, sheet, 또는 column에 속성을 설정할 수 있습니다. 예를 들어:

     <gc-spread-sheets id="ss" style="width:100%;height:500px;border:1px solid gray">
    <worksheets>
        <worksheet frozen-column-count="1">
        </worksheet>
    </worksheets>
</gc-spread-sheets>

Spread, Sheet, Column은 태그 계층 구조의 기본 요소입니다. 다른 요소들은 이들을 설정함으로써 동작합니다. 주요 태그 계층 구조는 다음과 같습니다:

<gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
    <worksheets>
        <worksheet>
            <columns>
                <column></column>
            </columns>
        </worksheet>
    </worksheets>
</gc-spread-sheets>

요소의 설정이 단순 타입이거나 단순 문자열로 설정할 수 있는 경우, 해당 설정은 요소의 속성(attribute)으로 지정됩니다. 단순 타입에는 숫자, 문자열, 불리언, 열거형(enum), 폰트, 선 테두리(lineBorder) 등이 포함될 수 있으며, 아래 예제와 같이 설정할 수 있습니다:

<gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
    <worksheets>
        <worksheet>
            <default-style backcolor="#c6e0b4" font="large Meiryo" border="#8ea9db dashed"></default-style>
        </worksheet>
    </worksheets>
</gc-spread-sheets>

다음 항목들은 요소 지시어(Element Directive)를 나열한 것입니다.

속성 이름은 대소문자를 구분하지 않으며, 각 단어를 구분할 때 '-'를 사용하는 것도 지원합니다. 예를 들어, 다음 코드는 동일한 결과를 나타냅니다:

<column dataField="country"></column>
<column datafield="country"></column>
<column DATAFIELD="country"></column>

속성 값은 {{binding}}을 지원하여 데이터의 스코프에 바인딩할 수 있습니다. 예를 들어, 다음은 너비가 columnWidth에 바인딩된 열입니다:

<column width={{columnWidth}} >

이것은 ng-model을 사용하여 columnWidth에 바인딩된 HTML INPUT 요소입니다.


컬럼 너비: <input ng-model="columnWidth" />


입력 요소에 숫자를 입력하면 열 너비가 자동으로 조정됩니다.


만약 요소 지시어를 따르지 않는 다른 요소에 spread 지시어 요소나 속성을 넣으면, 효과가 나타나지 않습니다. HTML 태그에 정의된 열을 순서를 변경하거나 삽입, 삭제할 수 없습니다. 이렇게 하면 바인딩 값 오류가 발생할 수 있습니다.