Spread 초기화
SpreadJS를 사용하는 첫 번째 단계는 웹 페이지에 workbook 개체를 추가하고, 컨트롤의 모든 측면을 사용자 정의하는 데 사용할 수 있는 인스턴스 변수를 가져오고, 로드된 통합 문서의 콘텐츠를 동적으로 변경하는 것입니다.
설명
app.js
index.html
styles.css
다음 단계를 사용하여 웹 페이지에 SpreadJS 통합 문서를 추가할 수 있습니다.
- 웹 페이지의 머리글 섹션에 link 요소 두 개를 gc.spread.sheets.x.x.x.css 스타일시트 및 gc.spread.sheets.all.x.x.x.min.js SpreadJS 라이브러리용으로 하나씩 추가합니다.
- 페이지 본문에서 id 특성을 사용하여 div 요소를 만들어 SpreadJS 컴포넌트를 호스팅합니다.
<!DOCTYPE html>
<html>
<head>
<link href='gc.spread.sheets.x.x.x.css' rel='stylesheet' type='text/css'/>
<script src='gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
<script type='text/javascript' charset='utf-8'>
...
</script>
</head>
<body>
<div id='ss' style='width:100%; height:400px;'></div>
</body>
</html>
- 웹 페이지의 onload 이벤트에서 javascript 변수를 정의하며, Workbook 구조체를 호출하고 이전 단계에서 만든 div 요소의 DOM 개체에 제공하여 이 변수를 workbook 개체에 할당합니다. 또한 Workbook 개체는 인스턴스화하는 동안 설정할 수 있는 통합 문서의 다양한 속성을 지정하는 선택적 JSON 개체를 사용합니다. 또는 통합 문서가 만들어진 후 해당 옵션을 지정할 수 있습니다.
개체가 만들어진 후 workbook 변수를 사용하여 SpreadJS 파일을 로드하고, Excel 파일을 가져오고, 스크롤 막대, 탭 스트립, 수식 상자 같은 컨트롤의 표시되는 요소를 변경하고, 통합 문서의 시트, 표 및 차트 등을 동적으로 수정할 수 있습니다. 다른 기능 데모에서 이와 같은 다양한 속성을 보여 줍니다.
마지막으로, GC.Spread.Sheets.findControl 메서드를 사용하여 페이지의 통합 문서에 액세스하고 통합 문서를 호스팅하는 페이지의 DOM 요소를 제공할 수도 있습니다.
window.onload = function () {
// Initialize a workbook
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// var workbook = new GC.Spread.Sheets.Workbook('ss', { sheetCount: 1 });
// get workbook object
// var workbook = GC.Spread.Sheets.findControl(document.getElementById('ss'));
};
jQuery와 함께 SpreadJS를 사용할 수 있습니다. 예:
$(document).ready(function () {
// Initialize a workbook
var workbook = new GC.Spread.Sheets.Workbook($('#ss')[0], { sheetCount: 1 });
// get spread Workbook object
// var workbook = $('#ss').data('workbook');
});