들어가며

이번 강좌에서는 여러행의 데이터를 그리드에 입력하는 방법과 RowId의 개념을 배워보겠습니다.

이론

여러행의 데이터를 입력하는 방법이 따로 있는 것은 아닙니다. 기본적으로 DataProvider.setRows()함수에 인자로 데이터 배열 객체를 넣어 주면 됩니다. 사실 이번 강좌에서 이해해야 할 부분은 DataProvider에 입력된 데이터는 고유의 행 번호를 가지게 된다는 것과 이 행 번호를 RowId라고 부른다는 것입니다. RowId는 DataProvider에 들어있는 데이터세트(DataSet)의 각 행에 부여된 고유번호입니다. RowId는 A8 강좌에서 알아본 CellIndex클래스의 dataRow속성을 통해 확인할 수 있습니다.

실습

  1. 여러행 데이터를 배열로 만들어 data변수에 넣습니다. DataProvider.setRows()를 호출 하면서 인자로 넘겨줍니다.

     var data = [
         ["data1-1", "data1-2"],
         ["data2-1", "data2-2"],
         ["data3-1", "data3-2"],
         ["data4-1", "data4-2"]
     ];
     dataProvider.setRows(data);
  2. 버튼을 클릭하면 GridView.getCurrent()로 가져온 CellIndex정보에서 dataRow속성값을 팝업 합니다.

     $("#btnPopupRowId").on("click", function(){
         var focusCell = gridView.getCurrent();
         alert(focusCell.dataRow);
     });

실행화면

버튼을 클릭하여 현재 포커스된 셀의 RowId가 팝업되는 것을 확인하세요.

전체 소스코드

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);

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

    var data = [
        ["data1-1", "data1-2"],
        ["data2-1", "data2-2"],
        ["data3-1", "data3-2"],
        ["data4-1", "data4-2"]
    ];
    dataProvider.setRows(data);

    function popupRowId(){
        var focusCell = gridView.getCurrent();
        alert(focusCell.dataRow);
    }

    //버튼을 클릭하면 포커스된 셀의 RowId를 표시합니다.
    $("#btnPopupRowId").on("click", function(){
        popupRowId();
    })

});
</script>
HTML
<button type="button" class="btn btn-primary btn-xs" id="btnPopupRowId">포커스셀 RowId 팝업하기</button> 버튼을 클릭하여 현재 포커스된 셀의 RowId가 팝업되는 것을 확인하세요.

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

참조