C16 수정 전, 후 값 툴팁으로 표시하기

들어가며

이번 강좌에서는 수정된 데이터를 tooltip을 통해 원본 데이터를 보여주는 기능을 만들어보도록 하겠습니다.

이론

그리드의 데이터가 수정되었을때 원본 데이터를 확인하는 방법은 GridView.getUpdatedCells() 를 통해 가능합니다.
해당 기능을 사용하려면 사전에 리얼그리드의 DataProvider의 restoreMode를 “explicit”나 “auto”로 지정을 하여야 합니다.
※ C6 데이터 복원하기 - I 지정한 행만 원래 데이터로 방법 참조

기본적으로 Column의 렌더러 속성 중 Renderer.showTooltip을 true 로 지정하면 툴팁을 사용할 수 있지만 이 경우에는 셀의 데이터만 표시해주기 때문에 우리가 지금 하려는 원본 데이터를 보여주기에는 적합하지 않습니다.
이런 경우는 GridView.onShowTooltip을 사용하면 표시되는 툴팁을 개발자가 지정할 수 있습니다. (onShowTooltip을 사용하더라도 툴팁을 표시할 Column의 renderer.showTooltip을 true로 지정해야 합니다.)

해당 이벤트 안에서 GridView.getUpdatedCells()를 사용하여 원본 데이터를 표시하는 코드를 작성해보겠습니다.

유의사항

복원모드는 그리드를 처음 설정하는 부분에서 설정해주세요. 값의 수정이 일어난 후(RowState가 변경된 후) 복원모드를 지정한 경우 RowState가 이미 변경된 행은 복원모드가 동작하지 않습니다.

실습

실습에서는 복원모드를 설정하고 onShowTooltip에서 원본데이터를 표시하도록 코드를 작성해보겠습니다.

버튼을 클릭하면 setOptions()을 사용하여 dataProvider에 restoreMode: “explicit”를 적용합니다.

 //복구모드: explicit 지정
 $("#btnSetRestoreMode").click(function () {
     dataProvider.setOptions({
         restoreMode: "explicit"
     });
 });

버튼을 클릭하면 onShowTooltip() 이벤트를 설정합니다.

 $("#btnSetOnShowTooltip").click(function () {
     gridView.onShowTooltip = function (grid, index, value) {
         var updateValue;

         //현재 행의 수정된 데이터를 가져옴.
         var uDatas = dataProvider.getUpdatedCells(index.dataRow);

         if (uDatas.length) {
             //수정된 데이터 중에 현재 필드 데이터가 있는지 확인
             var cIdx = uDatas[0].updatedCells.findIndex(x => x.fieldName == index.fieldName)

             if (cIdx > -1) {
                 updateValue = uDatas[0].updatedCells[cIdx];

                 tooltip = "변경전: " + updateValue.oldValue + ", 변경후: " + updateValue.newValue

                 return tooltip;
             }
         }
     }
 });

여러 셀들의 값을 수정 해보세요.

수정된 셀들이 무엇인지 명확히 확인하기 위해 스타일을 적용합니다.
(※ C15 수정된 셀에 스타일 지정하여 표시하기 참조)

 $("#btnSetUpdatedCellsStyle").click(function () {
     gridView.addCellStyle("style01", {
         "background": "#4400ff00",
         "fontSize": 14
     });

     var uDatas = dataProvider.getUpdatedCells();

     for (var i in uDatas) {
         var dataRow = uDatas[i].__rowId;

         for (var j in uDatas[i].updatedCells) {
             var fieldName = uDatas[i].updatedCells[j].fieldName    
             gridView.setCellStyle(dataRow, fieldName, "style01", true);
         }
     }
 });

색이 표시된 셀에 마우스 포인터를 위치해보세요. (onShowTooltip()에서 설정한 툴팁이 표시됩니다.)

실행화면

여러 셀들의 값을 수정 해보세요.
색이 표시된 셀에 마우스 포인터를 위치해보세요. (onShowTooltip()에서 설정한 툴팁이 표시됩니다.)

전체 소스코드

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.1.24.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.1.24.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"
        },
        {
            fieldName: "field3"
        },
        {
            fieldName: "field4"
        },
        {
            fieldName: "field5"
        },
        {
            fieldName: "field6"
        },
        {
            fieldName: "field7"
        },
        {
            fieldName: "field8"
        },
        {
            fieldName: "field9"
        },
        {
            fieldName: "field10"
        }
    ];
    //DataProvider의 setFields함수로 필드를 입력합니다.
    dataProvider.setFields(fields);

    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",
            renderer: {
                showTooltip: true
            },
            header : {
                text: "직업"
            },
            width : 60
        },
        {
            name: "col2",
            fieldName: "field2",
            renderer: {
                showTooltip: true
            },
            header : {
                text: "성별"
            },
            width: 50
        },
        {
            name: "col3",
            fieldName: "field3",
            renderer: {
                showTooltip: true
            },
            header : {
                text: "이름"
            },
            width: 80
        },
        {
            name: "col4",
            fieldName: "field4",
            renderer: {
                showTooltip: true
            },
            header : {
                text: "국어"
            },
            width: 80
        },
        {
            name: "col5",
            fieldName: "field5",
            renderer: {
                showTooltip: true
            },
            header : {
                text: "수학"
            },
            width: 80
        },
        {
            name: "col6",
            fieldName: "field6",
            renderer: {
                showTooltip: true
            },
            header : {
                text: "민법"
            },
            width: 80
        },
        {
            name: "col7",
            fieldName: "field7",
            renderer: {
                showTooltip: true
            },
            header : {
                text: "한국사"
            },
            width: 80
        },
        {
            name: "col8",
            fieldName: "field8",
            renderer: {
                showTooltip: true
            },
            header : {
                text: "영어"
            },
            width: 80
        },
        {
            name: "col9",
            fieldName: "field9",
            renderer: {
                showTooltip: true
            },
            header : {
                text: "과학"
            },
            width: 80
        },
        {
            name: "col10",
            fieldName: "field10",
            renderer: {
                showTooltip: true
            },
            header : {
                text: "사회"
            },
            width: 80
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    var data = [
        ["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100", "80"],
        ["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"],
        ["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"],
        ["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"],
        ["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]
    ];
    dataProvider.setRows(data);

    //복구모드: explicit 지정
    $("#btnSetRestoreMode").click(function () {
        dataProvider.setOptions({
            restoreMode: "explicit"
        });
    });

    //onShowTooltop() 적용
    $("#btnSetOnShowTooltip").click(function () {
        gridView.onShowTooltip = function (grid, index, value) {
            var updateValue;

            //현재 행의 수정된 데이터를 가져옴.
            var uDatas = dataProvider.getUpdatedCells(index.dataRow);

            if (uDatas.length) {
                //수정된 데이터 중에 현재 필드 데이터가 있는지 확인
                var cIdx = uDatas[0].updatedCells.findIndex(x => x.fieldName == index.fieldName)

                if (cIdx > -1) {
                    updateValue = uDatas[0].updatedCells[cIdx];

                    tooltip = "변경전: " + updateValue.oldValue + ", 변경후: " + updateValue.newValue

                    return tooltip;
                }
            }
        }
    });


    //수정된 셀에 스타일 적용
    $("#btnSetUpdatedCellsStyle").click(function () {
        gridView.addCellStyle("style01", {
            "background": "#4400ff00",
            "fontSize": 14
        });

        var uDatas = dataProvider.getUpdatedCells();

        for (var i in uDatas) {
            var dataRow = uDatas[i].__rowId;

            for (var j in uDatas[i].updatedCells) {
                var fieldName = uDatas[i].updatedCells[j].fieldName    
                gridView.setCellStyle(dataRow, fieldName, "style01", true);
            }
        }
    });

});   
</script>

HTML

<button type="button" class="btn btn-primary btn-xs" id="btnSetRestoreMode">dataProvider에 복구모드: "explicit" 지정하기</button>
<button type="button" class="btn btn-primary btn-xs" id="btnSetOnShowTooltip">onShowTooltip() 이벤트 설정</button>
여러 셀들의 값을 수정 해보세요.
<button type="button" class="btn btn-primary btn-xs" id="btnSetUpdatedCellsStyle">수정된 셀에 스타일 적용</button>
색이 표시된 셀에 마우스 포인터를 위치해보세요. (onShowTooltip()에서 설정한 툴팁이 표시됩니다.)

참조

RealGrid Help