A8 포커스셀(Focused Cell) 이해하기

들어가며

이번 강좌에서는 그리드의 포커스셀(Focused Cell)에 대해 알아보고 포커스셀의 정보를 가져오거나 특정셀로 포커스를 이동시켜보겠습니다.

이론

RealGrid에서 포커스셀이란 커서가 위치한 셀을 의미합니다. 포커스셀의 정보를 가져오려면 GridBase.getCurrent()를 이용하고 포커스셀의 정보를 입력하려면 GridBase.setCurrent()를 이용합니다.
두 함수의 인자와 리턴값인 CellIndex는 데이터셀(DataCell)의 정보를 관리하기 위한 클래스입니다. CellIndex의 속성에 대한 정보는 다음 강좌에서 배울수 있습니다.

실습

getCurrent()함수로 현재 포커스된 셀의 CellIndex를 가져옵니다. 가져온 CellIndex객체에 dataRow, column, fieldName속성을 변경하여 포커스셀의 위치를 이동합니다.

 $("#btnToggleFocus").on("click", function(){
     //현재 포커스된 셀정보 가져오기
     var focusCell = gridView.getCurrent();
     //이동할 행 번호(RowId), 컬럼정보 입력
     focusCell.dataRow = 0;
     if (focusCell.fieldName == "field1") {
         focusCell.column = "col2";
         focusCell.fieldName = "field2";
     }
     else {
         focusCell.column = "col1";
         focusCell.fieldName = "field1";
     }
     //포커스된 셀 변경
     gridView.setCurrent(focusCell);
 })

실행화면

버튼을 클릭하여 포커스된 셀이 변경되는 것을 확인하세요.

전체 소스코드

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", "data2"]
    ];
    //DataProvider에 데이터를 입력합니다.
    dataProvider.setRows(data);

    function toggleFocus(){
        var focusCell = gridView.getCurrent();
        focusCell.dataRow = 0;
        if (focusCell.fieldName == "field1") {
            focusCell.column = "col2";
            focusCell.fieldName = "field2";
        }
        else {
            focusCell.column = "col1";
            focusCell.fieldName = "field1";
        }

        gridView.setCurrent(focusCell);
    }

    //버튼을 클릭하면 포커스된 셀을 다른 셀로 변경합니다.
    $("#btnToggleFocus").on("click", function(){
        toggleFocus();
    })    

});
</script>

HTML

<button type="button" class="btn btn-primary btn-xs" id="btnToggleFocus">포커스셀 변경하기</button>

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

참조

RealGrid Help