A30 displayCallback()을 사용하여 원하는대로 표시값 설정하기

들어가며

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

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

이론

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

실습

구분값이 “개인”인 경우 사업자/주민번호 컬럼의 값을 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
     }
 ];

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

실행화면

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

구분값이 "개인"인 경우 사업자/주민번호 컬럼의 값을 123456-1234567, "사업"인 경우 123-12-123456의 형태로 표시하도록 하겠습니다.
<button type="button" class="btn btn-primary btn-xs" id="btnDisplayCallback" > 버튼을 클릭하면 스타일이 적용됨
return한 형태로 값이 표시되는지 확인해보세요.

참조

DataColumn