들어가며

[A2 강좌]에서는 컬럼을 만들어 보았습니다. 이번 강좌에서는 컬럼의 헤더 타이틀을 변경하는 방법에 대해 배워보겠습니다.

이론

그리드에 표시된 컬럼의 정보를 변경하기 위해서는 해당 컬럼의 헤더(header)속성을 가져온 다음 Header Title을 변경하고 다시 컬럼에 넣어주는 방법을 사용합니다. 그러면 여기서 헤더 속성을 가져오는 함수와 다시 넣어주는 함수를 알아야 겠습니다. GridView객체가 가지고 있는 두 함수는 각각 getColumnProperty() 함수와 setColumnProperty() 함수 입니다.
이 두 함수는 컬럼의 헤더 속성 뿐 아니라 데이터컬럼(DataColumn)이 가지고 있는 여러가지 속성을 수정하기 위해 사용됩니다.

실습

  1. 컬럼의 헤더 속성 객체 가져오기

     //컬럼 이름이 "col1"인 컬럼의 heder객체를 가져온다.
     var header = gridView.getColumnProperty("col1", "header");
  2. 헤더 객체의 Title속성 변경하기

     //컬럼 헤더를 "컬럼2"로 바꾼다.
     header.text = "컬럼2";
  3. 헤더 객체 GridView에 다시 넣기

     //헤더 객체를 GridView에 다시 넣는다.
     gridView.setColumnProperty("col1", "header", header);

컬럼의 헤더가 “컬럼2”로 바뀐것을 확인하세요.

실행화면

전체 소스코드

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 columns = [
        {
            name: "col1",
            header : {
                text: "컬럼1"
            },
            width: 300
        }
    ];
    gridView.setColumns(columns);

    var header = gridView.getColumnProperty("col1", "header");
    header.text = "컬럼2";

    gridView.setColumnProperty("col1", "header", header);
});
</script>
HTML
<div id="realgrid" style="width: 100%; height: 200px;"></div>

참조