A4 DataProvider에 Field 만들기

들어가며

지난 강좌에서 Column을 만들어 보았지만 Field가 없는 Column은 껍데기에 불과 합니다. 이번 강좌에서는 RealGridJS의 데이터를 담고 있는 DataProvider에 Field라는 것을 만들어 데이터를 구조화 해 보기로 하겠습니다.

이론

지난 RealGridJS 컬럼 만들기에서 살펴본 RealGrid의 컨셉 이미지에 Field와 Column이 속한 영역을 표시해 보았습니다. 그림에서 Column이 속한 영역은 GridView이며 Field가 속한 영역은 DataProvider입니다.

DataProvider는 원본 데이터를 관리하기 위한 클래스이며 하위 클래스인 LocalDataProvider와 TreeDataProvider는 각각 그리드와 트리그리드의 데이터관리를 위한 클래스입니다.

속한영역이라고 표현 하는 것이 조금 어색하긴 하지만 그렇게 표현하겠습니다.

RealGrid에서
Field는 DataField 라는 클래스로 정의 되어 있으며,
Column은 DataColumn 이라는 클래스로 정의 되어 있습니다.

실습

DataField객체의 배열을 생성하여 fields변수에 넣습니다.

 //새로운 DataField 배열 객체 생성
 var fields = [
     {
         fieldName: "field1"
     },
     {
         fieldName: "field2"
     }
 ];

생성한 DataField 배열을 DataProvider의 setFields() 함수의 인자로 넘겨 필드셋을 구성합니다.
```
 //setColumns()함수로 그리드에 반영
 dataProvider.setFields(fields);
```

실행화면

나가며

그리드에 무언가 변화가 일어날 것이라고 상상했던 분이라면 조금 실망하셨겠지만 당연하게도 그리드에는 어떤 내용도 표시가 되지 않습니다. 화면표시 영역인 GridView에는 아무런 작업을 하지 않았기 때문입니다. 다음 강좌에서는 Column과 Field를 연결하는 방법을 배워보도록 하겠습니다.

전체 소스코드

SCRIPT

<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.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>
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);

    var fields = [
        {
            fieldName: "field1"
        },
        {
            fieldName: "field2"
        }
    ];

    dataProvider.setFields(fields);
});
</script>

HTML

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

참조

RealGrid Help