[]
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 태그에 정의된 열을 순서를 변경하거나 삽입, 삭제할 수 없습니다. 이렇게 하면 바인딩 값 오류가 발생할 수 있습니다.