v1.0.10 이전 버전 설치하기 (v1.0.9.1988 이하)

들어가며

이번 강좌에서는 RealGridJS의 설치에 대해 배워보겠습니다.

이론

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

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

/dlgrids_eval.js
/realgridjs.js
/jszip.min.js
/assets/

실습

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

두 개의 스크립트파일을 순서대로 include합니다. 반드시 dlgrigs_eval.js파일이 먼저 와야 합니다.

<script type="text/javascript" src="/script/dlgrids_eval.js"></script>1;
<script type="text/javascript" src="/script/realgridjs.js"></script>1;

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/dlgrids_eval.js"></script>1;
<script type="text/javascript" src="/script/realgridjs.js"></script>1;

<script>
var gridView;
var dataProvider;

$(document).ready( function(){
    RealGridJS.setTrace(false);
    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