들어가며

1.1.30버전까지는 값을 포맷팅하여 보여주려면 정규식을 사용하여 표시했었습니다. 그러나 다른 필드의 값을 참조하여 정규식으로 다양한 형태로 포맷팅하기는 어려운 점이 있었습니다. 1.1.31버전에 추가된 displayCallback()을 사용하면 간단하게 처리할 수 있습니다.

이번 강좌에서는 앞의 참조값에 따라 동적으로 포맷팅하는 방법에 대해 배워보도록 하겠습니다.

이론

displayCallback()의 사용법은 매우 간단합니다. 화면에 표시하고자 하는 값을 return 하기만 하면 됩니다.
“사업자/주민번호”의 컬럼의 값을 “구분”값에 따라 포맷팅 해보도록 하겠습니다.

실습

  1. 구분값이 “개인”인 경우 사업자/주민번호 컬럼의 값을 123456-1234567, “사업”인 경우 123-12-123456의 형태로 표시하도록 하겠습니다.

     $("#btnDisplayCallback").click(function () {
         var displayCallback = function(grid, index, value) {
             var gubun = grid.getValue("field0", index.itemIndex);
    
             if (gubun && value) {
                 return gubun === "개인" ? value.substr(0,6)+'-'+value.substr(6,7) :
                        gubun === "사업" ? value.substr(0,3)+'-'+value.substr(2,2)+'-'+value.substr(5,5) : value;
             }
         }
    
    
         gridView.setColumnProperty("col2", "displayCallback", displayCallback);        
     });

    실습을 위해 위에서는 setColumnProperty로 설정을 하였지만 아래와 같이 처음 컬럼을 설정할때 적용하셔도 됩니다.

     var columns = [
         {
             name: "col0",
             fieldName: "field0",
             header : {
                 text: "구분"
             },
             width : 60
         },    
         {
             name: "col1",
             fieldName: "field1",
             header : {
                 text: "이름"
             },
             width : 60
         },
         {
             name: "col2",
             fieldName: "field2",
             header : {
                 text: "사업자/주민번호"
             },
             width: 150,
             displayCallback: function(grid, index, value) {
                 var gubun = grid.getValue("field0", index.itemIndex);
    
                 if (gubun && value) {
                     return gubun === "개인" ? value.substr(0,6)+'-'+value.substr(6,7) :
                            gubun === "사업" ? value.substr(0,3)+'-'+value.substr(2,2)+'-'+value.substr(5,5) : value;
                 }
             }
         },
         {
             name: "col3",
             fieldName: "field3",
             header : {
                 text: "주소"
             },
             width: 80
         }
     ];        
     
  2. return한 형태로 값이 표시되는지 확인해보세요.

실행화면

  1. 구분값이 “개인”인 경우 사업자/주민번호 컬럼의 값을 123456-1234567, “사업”인 경우 123-12-123456의 형태로 표시하도록 하겠습니다.

  2. return한 형태로 값이 표시되는지 확인해보세요.

전체 소스코드

SCRIPT
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.1.31.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.1.31.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: "field0"
        },
        {
            fieldName: "field1"
        },
        {
            fieldName: "field2"
        },
        {
            fieldName: "field3"
        }
    ];
    //DataProvider의 setFields함수로 필드를 입력합니다.
    dataProvider.setFields(fields);

    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col0",
            fieldName: "field0",
            header : {
                text: "구분"
            },
            width : 60
        },    
        {
            name: "col1",
            fieldName: "field1",
            header : {
                text: "이름"
            },
            width : 60
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "사업자/주민번호"
            },
            width: 150
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "주소"
            },
            width: 80
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    var data = [
        ["개인", "전도연"   , "8001012345678"],
        ["개인", "이선희"   , "7011112123312"],
        ["사업", "우리테크" ,  "2148859016"],
        ["개인", "신해철"   , "7512121234567"],
        ["개인", "전지현"   , "8503062343321"],
        ["사업", "리얼그리드", "3147711111"]
    ];
    dataProvider.setRows(data);

    $("#btnDisplayCallback").click(function () {
        var displayCallback = function(grid, index, value) {
            var gubun = grid.getValue(index.itemIndex, "field0");

            if (gubun && value) {
                return gubun === "개인" ? value.substr(0,6)+'-'+value.substr(6,7) :
                       gubun === "사업" ? value.substr(0,3)+'-'+value.substr(2,2)+'-'+value.substr(5,5) : value;
            }
        }

        gridView.setColumnProperty("col2", "displayCallback", displayCallback);
    });


});  
</script>
HTML
  1. 구분값이 "개인"인 경우 사업자/주민번호 컬럼의 값을 123456-1234567, "사업"인 경우 123-12-123456의 형태로 표시하도록 하겠습니다.
    <button type="button" class="btn btn-primary btn-xs" id="btnDisplayCallback" > 버튼을 클릭하면 스타일이 적용됨

  2. return한 형태로 값이 표시되는지 확인해보세요.

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


참조