A1 RealGridJS 설치하기 (v1.0.10 이상)

들어가며

이번 강좌에서는 RealGridJS의 설치에 대해 배워보겠습니다. 이 강좌의 내용에 해당하는 버전은 1.0.10 이후 버전입니다.

1.0.10 버전 보다 이전 버전의 설치 방법은 [v1.0.10 이전 버전 설치하기 (v1.0.9.1988 이하)]강좌를 참조하세요.

이론

RealGrid를 개발 환경에 맞게 설치해 보겠습니다. 만약, RealGrid가 없다면 평가판요청페이지에서 평가판을 요청하면 메일로 평가판을 받을 수 있습니다. 메일에 포함된 RealGrid파일중 설치에 반드시 필요한 파일은 아래 다섯 개의 Javascript파일들과 RealGridJS화면 구성에 필요한 assets폴더에 들어있는 이미지 파일들 입니다.

Javascript파일중 jszip.min.js파일은 엑셀파일 Import/Export에 필요한 파일이므로 엑셀파일 내보내기 기능이 필요한 화면에서는 반드시 포함시켜주셔야 합니다.

참고로 RealGridJS는 JQuery와 같은 외부 라이브러리가 필요없습니다.

RealGridJS 평가용/개발자용 버전 파일

/scripts/assets/
/scripts/realgridjs-lic.js
/scripts/realgridjs_eval.{version}.min.js
/scripts/realgridjs-api.{version}.js.js
/scripts/jszip.min.js

RealGridJS 운영용 버전 파일

/scripts/assets/
/scripts/realgridjs-lic.js
/scripts/realgridjs.{version}.min.js
/scripts/realgridjs-api.{version}.js.js
/scripts/jszip.min.js

실습

이제 RealGridJS를 웹 화면에 올려 보겠습니다.

세 개의 스크립트파일을 순서대로 include합니다. 반드시 아래의 순서대로 파일을 불러와야 합니다.

 <script type="text/javascript" src="/scripts/realgridjs-lic.js"></script>
 <script type="text/javascript" src="/scripts/realgridjs_eval.1.0.14.min.js"></script>
 <script type="text/javascript" src="/scripts/realgridjs-api.1.0.14.js"></script>

GridView객체를 저장할 gridView변수를 정의 합니다.
```
 var gridView;
```
LocalDataProvider객체를 저장할 dataProvider변수를 정의 합니다.
```
 var dataProvider;
```
assets폴더의 위치를 변경하기 위해 setRootContext(path)함수를 호출 합니다. 이때 assets이라는 폴더 이름은 변경할 수 없습니다. 반드시 path에 지정된 경로 아래에 assets이라는 이름의 폴더가 존재해야 하며, 그 아래에 화면을 구성하기 위한 이미지 파일들이 있어야 합니다.
```
 RealGridJS.setRootContext("/script");
```
LocalDataProvider와 GridView객체를 생성하고 GridView의 DataSource를 생성된 LocalDataProvider로 지정하는 코드를 추가 합니다.
```
 dataProvider = new RealGridJS.LocalDataProvider();
 gridView = new RealGridJS.GridView("realgrid");
 gridView.setDataSource(dataProvider);
```
RealGridJS가 표시될 div 태그를 작성하고 크기를 지정해야 합니다. 크기가 지정되지 않으면 화면에 RealGridJS가 표시되지 않습니다.
```
 <div id="realgrid" style="width: 100%; height: 200px;"></div>
```

실행화면

전체 소스코드

SCRIPT

<!--RealGrid는 Jquery없이도 사용할 수 있습니다.-->
<script type="text/javascript" src="/script/jquery-1.11.2.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.js"></script>
<script type="text/javascript" src="/script/jszip.min.js"></script>

<script>
var gridView;
var dataProvider;

$(document).ready( function(){
    RealGridJS.setRootContext("/script");
    
    dataProvider = new RealGridJS.LocalDataProvider();
    gridView = new RealGridJS.GridView("realgrid");
    gridView.setDataSource(dataProvider);    
});   
</script>

HTML

<div id="realgrid" style="width: 100%; height: 200px;"></div>

참조

RealGrid Help