들어가며

이번 강좌에서는 DataProvider를 통해 RealGridJS에 데이터를 읽어오는 방법에 대해 배워보겠습니다.

이론

읽어올 데이터의 원본은 원격에 존재할 수도 있고 로컬에 존재할 수도 있습니다. 이번 강좌에서는 원격에 존재하는 데이터를 읽어오기 위해 jQuery의 ajax()를 사용합니다. 로컬에 존재하는 데이터도 원본 데이터셋의 유형과 방법은 본 강좌의 내용과 동일하기 때문에 별도로 설명하지는 않겠습니다.

RealGrid가 읽어올 수 있는 원본 데이터의 유형은 JSON, XML, CSV 세가지 입니다. 세가지 유형의 데이터를 읽어오기 위해 각각 LocalDataProvider 함수를 사용할수 있으며 그 종류는 다음과 같습니다.

세 함수는 모두 두 개의 인자를 가지고 있습니다. 첫번째 인자는 data이고 두번째 인자는 DataFillOptions라는 옵션입니다. 이 옵션에는 fillMode라는 이름의 속성이 있는데 이 속성은 DataFillMode라는 옵션입니다. DataFillOption은 데이터의 갯수 데이터를 채우기 시작할 행의 itemIndex등의 정보를 담고 있으며, DataFillMode는 행을 추가(Append)할 것인지 삽입(Insert)할 것인지 아니면 수정(Update)할 것인지 등의 정보를 결정합니다.

첫번째 인자인 data는 유형에 따라 일반적으로 다음과 같은 형식을 유지해야 합니다. 단, 형식이 다른 경우 옵션으로 조정 할 수 있는 방법도 있습니다. 보다 자세한 내용은 B-Class에서 다룰 예정입니다.

JSON Data Format
[
    ["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"],
    ["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"],
    ["가수", "여자", "소찬휘", "30", "55", "90", "70", "60", "100", "80"],
    ["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"],
    ["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]
]
XML Data Format
<rows>
    <row field1="배우" field2="여자" field3="전도연" field4="20" field5="22" field6="90" field7="70" field8="60" field9="100" field10="80"/>
</rows>
CSV Data Format
가수, 여자, 정수라, 80, 99, 90, 90, 100, 100, 90
배우, 여자, 송윤아, 10, 33, 90, 70, 60, 100, 80
배우, 여자, 송윤아, 10, 33, 90, 70, 60, 100, 80

실습에서는 유형에 따른 원격데이터를 그리드에 입력하는 방법을 직접 구현해 보겠습니다.

실습

  1. JSON, XML, CSV 각 유형의 버튼을 클릭하면 각 유형에 맞는 fillData함수를 호출하여 그리드에 데이터를 채우는 코드를 작성 합니다. 이때, 원격의 데이터를 가져오기 위해 jQuery의 ajax()함수를 써서 GET Method를 이용해 데이터를 가져옵니다.

     //현재그리드의 데이터를 모두 지우고 8행의 CSV유형 데이터를 가져와서 채웁니다.
     $("#btnFillCSVData").click(function() {
          $.ajax({
             url: "/data/samples/sampleCSVData.csv",
             cache: false
         })
         .done(function( data ) {
             dataProvider.fillCsvData(data, { count: 8, fillMode: "set" });
         });
     })
    
     //현재 그리드의 데이터 맨 마지막행 뒤에 5행의 JSON유형 데이터를 가져와서 채웁니다.
     $("#btnFillJSONData").click(function() {
          $.ajax({
             url: "/data/samples/sampleJSONData.json",
             cache: false
         })
         .done(function( data ) {
             dataProvider.fillJsonData(data, { fillMode: "append" });
         });
     })
    
     //현재 그리드의 데이터중 3행의 데이터를 가져온 XML 데이터로 덮어쓰기 합니다.
     $("#btnFillXMLData").click(function() {
          $.ajax({
             url: "/data/samples/sampleXMLData.xml",
             cache: false
         })
         .done(function( data ) {
             dataProvider.fillXmlData(data, { count: 1, fillPos: 2, fillMode: "update" });
         });
     })

실행화면

  1. 버튼을 클릭하여 8행의 데이터가 Insert되는 모습을 확인하세요.
  2. 버튼을 클릭하여 5행의 데이터가 Append되는 모습을 확인하세요.
  3. 버튼을 클릭하여 1행의 데이터가 3행의 데이터를 덮어쓰는(Update)모습을 확인하세요.

전체 소스코드

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"
        },
        {
            fieldName: "field3"
        },
        {
            fieldName: "field4"
        },
        {
            fieldName: "field5"
        },
        {
            fieldName: "field6"
        },
        {
            fieldName: "field7"
        },
        {
            fieldName: "field8"
        },
        {
            fieldName: "field9"
        },
        {
            fieldName: "field10"
        }
    ];
    //DataProvider의 setFields함수로 필드를 입력합니다.
    dataProvider.setFields(fields);

    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",
            header : {
                text: "직업"
            },
            width : 60
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "성별"
            },
            width: 50
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "이름"
            },
            width: 80
        },
        {
            name: "col4",
            fieldName: "field4",
            header : {
                text: "국어"
            },
            width: 80
        },
        {
            name: "col5",
            fieldName: "field5",
            header : {
                text: "수학"
            },
            width: 80
        },
        {
            name: "col6",
            fieldName: "field6",
            header : {
                text: "민법"
            },
            width: 80
        },
        {
            name: "col7",
            fieldName: "field7",
            header : {
                text: "한국사"
            },
            width: 80
        },
        {
            name: "col8",
            fieldName: "field8",
            header : {
                text: "영어"
            },
            width: 80
        },
        {
            name: "col9",
            fieldName: "field9",
            header : {
                text: "과학"
            },
            width: 80
        },
        {
            name: "col10",
            fieldName: "field10",
            header : {
                text: "사회"
            },
            width: 80
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    $("#btnFillCSVData").click(function() {
         $.ajax({
            url: "/data/samples/sampleCSVData.csv",
            cache: false
        })
        .done(function( data ) {
            dataProvider.fillCsvData(data, { count: 8, fillMode: "set" });
        });
    })

    $("#btnFillJSONData").click(function() {
         $.ajax({
            url: "/data/samples/sampleJSONData.json",
            cache: false
        })
        .done(function( data ) {
            dataProvider.fillJsonData(data, { fillMode: "append" });
        });
    })

    $("#btnFillXMLData").click(function() {
         $.ajax({
            url: "/data/samples/sampleXMLData.xml",
            cache: false
        })
        .done(function( data ) {
            dataProvider.fillXmlData(data, { count: 1, fillPos: 2, fillMode: "update" });
        });
    })

});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnFillCSVData">CSV유형 데이터 채우기
</button> 버튼을 클릭하여 8행의 데이터가 Insert되는 모습을 확인하세요.
2. <button type="button" class="btn btn-primary btn-xs" id="btnFillJSONData">JSON유형 데이터 채우기</button> 버튼을 클릭하여 5행의 데이터가 Append되는 모습을 확인하세요.
3. <button type="button" class="btn btn-primary btn-xs" id="btnFillXMLData">XML유형 데이터 채우기</button> 버튼을 클릭하여 1행의 데이터가 3행의 데이터를 덮어쓰는(Update)모습을 확인하세요.

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

관련 데모 페이지


API 참조