들어가며

이번 강좌는 [A5 강좌]에서 이어지는 내용입니다.
그리드에 필드와 컬럼이 연결된 상태에서 DataProvider에 데이터를 넣는 방법을 배워 보겠습니다.

이론

DataProvider에 데이터를 넣는 방법은 아래와 같이 여러가지 방법이 있습니다. 이 강좌에서는 LocalDataProvider.setRows()함수를 사용합니다.

실습

1. 데이터행 배열 객체를 생성하고 데이터를 입력 합니다.

    var data = [
        ["data1", "data2", "data3"]
    ];
    

   이렇게 하면 데이터는 생성되어 있는 필드의 순서에 따라 앞에서 부터 입력되고, 남는 데이터는 버리게 됩니다.

   만약 입력할 데이터를 각각의 필드에 정확히 매핑되도록 하려면 필드이름을 속성명으로 하는 객체를 만들어 주면 됩니다. 아래 코드는 field1, field2에 각각 “value1”, “value2”라는 값을 입력하기 위해 data변수를 구성하는 예 입니다.

    var data = [
        {field1:"value1", field2:"value2"}
    ];
    

2. setRows()함수로 LocalDataProvider에 원본 데이터를 입력합니다.

        dataProvider.setRows(data);

실행화면

나가며

setRows()함수의 첫번째 인자로 데이터행 배열이 들어 갑니다. 배열의 열 갯수가 필드의 갯수보다 작거나 크더라도 오류는 없습니다. 단지, 필드의 범위를 벗어나는 데이터는 무시됩니다.
setRows()함수는 데이터를 추가(append)하기 위한 함수가 아닙니다. DataProvider가 가지고 있는 모든 데이터를 삭제하고 입력된 데이터로 교체합니다.

데이터를 입력하는 다양한 방법은 [B Class]에서 배울 수 있습니다.

전체 소스코드

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함수로 필드를 입력합니다.
    dataProvider.setFields(fields);

    //필드와 연결된 컬럼을 가진 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",
            header : {
                text: "컬럼1"
            },
            width: 200
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "컬럼2"
            },
            width: 200
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    var data = [
        ["data1", "data2", "data3"]
    ];
    dataProvider.setRows(data);
});
</script>

HTML

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

참조

• RealGrid Help