들어가며

A9 강좌에서 RowId에 대해 배워보았습니다. 이번 강좌에서는 그와 유사한 개념인 ItemIndex에 대해 배워보겠습니다.

이론

기본적으로 아래 그림과 같이 Item과 Data는 1:1 매핑이 되어 있습니다. 하지만, 소팅(Sorting), 그룹핑(Grouping)등 컨트롤러(Controller)의 다양한 기능을 그리드에 표현하기 위해 더 많은 Item들이 생겨납니다.
이런 기능은 앞으로 남은 많은 강좌들에서 배울수 있습니다.

ItemIndex는 Item의 고유한 행 번호 입니다. itemIndex는 A8 강좌에서 알아본 CellIndex클래스의 itemIndex속성을 통해 확인 할 수 있습니다.

실습을 통해 현재 포커스된 셀의 ItemIndex를 팝업해 보겠습니다.

실습

소스코드는 A9 강좌와 거의 동일합니다.

  1. 버튼을 클릭하면 GridView.getCurrent()로 가져온 CellIndex.itemIndex를 팝업합니다.

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

실행화면

버튼을 클릭하여 ItemIndex가 팝업 되는 것을 확인하세요.

나가며

A9 강좌A10 강좌의 실행화면을 조작해 보면 다른점을 구분하기 어렵습니다. 하지만, Data와 Item은 개념적으로 연결은 되어 있으나 전혀 다릅니다. 다음 강좌인 A11 강좌에서 Data와 Item이 어떻게 다른지에 대해 조금 더 배워보도록 하겠습니다.

전체 소스코드

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.itemIndex);
    }

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

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

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

참조