들어가며

이번 강좌에서는 이벤트에 대한 기본적인 이해를 돕기 위한 예제를 실습해 보겠습니다.

이론

RealGrid는 각각의 객체가 가지고 있는 많은 이벤트가 있습니다. 이벤트는 사용자가 그리드를 클릭하거나 값을 입력하는등 동작을 수행할때 그리드가 호출해 주는 콜백 함수 입니다.

이번 강좌에서는 GridView객체의 영역을 클릭(Click) 또는 더블클릭(Double Click) 할때 발생하는 이벤트 콜백함수를 구현하고 클릭된 인자의 정보를 팝업하는 예제를 구현해 보겠습니다.

실습

  1. GridView의 영역별 클릭 또는 더블클릭 이벤트 콜백 함수를 구현합니다.

     //log를 alert하는 함수
     function showLog(log){
         alert(log);
     }
    
     gridView.onColumnHeaderClicked = function (grid, column) {
         showLog("onColumnHeaderClicked: " + "(" + column.name + ")");
     };
     gridView.onColumnHeaderDblClicked = function (grid, column) {
         showLog("onColumnHeaderDblClicked: " + "(" + column.name + ")");
     };
     gridView.onColumnCheckedChanged = function (grid, column, checked) {
         showLog("onColumnCheckedChanged: " + "(" + column.name + ", " + checked + ")");
     };
     gridView.onDataCellClicked = function (grid, index) {
         showLog("onDataCellClicked: " + JSON.stringify(index));
     };
     gridView.onDataCellDblClicked = function (grid, index) {
         showLog("onDataCellDblClicked: " + JSON.stringify(index));
     };
     gridView.onFooterCellClicked = function (grid, column) {
         showLog("onFooterCellClicked : " + "(" + column.name + ")");
     };
     gridView.onFooterCellDblClicked = function (grid, column) {
         showLog("onFooterCellDblClicked : " + "(" + column.name + ")");
     };
     gridView.onItemChecked = function (grid, itemIndex, checked) {
         showLog("onItemChecked: " + itemIndex + ", " + checked);
     };
     gridView.onItemsChecked = function (grid, items, checked) {
         showLog("onItemsChecked: " + items + ", " + checked);
     };
     gridView.onItemAllChecked = function (grid, checked) {
         showLog("onItemAllChecked: " + checked);
     };
     gridView.onCheckBarFootClicked = function (grid) {
         showLog("onCheckBarFootClicked");
     };
     gridView.onIndicatorCellClicked = function (grid, index) {
         showLog("onIndicatorCellClicked : " + "(" + index + ")");
     };
     gridView.onStateBarCellClicked = function (grid, index) {
         showLog("onStateBarCellClicked : " + "(" + index + ")");
     };
     gridView.onRowGroupHeadFootClicked = function (grid, index) {
         showLog("onRowGroupHeadFootClicked : " + "(" + index + ")");
     };
     gridView.onRowGroupHeaderFooterClicked = function (grid, index) {
         showLog("onRowGroupHeaderFooterClicked : " + "(" + index + ")");
     };
     gridView.onRowGroupBarClicked = function (grid, index) {
         showLog("onRowGroupBarClicked : " + "(" + index + ")");
     };
     gridView.onCheckBarFootDblClicked = function (grid) {
         showLog("onCheckBarFootDblClicked");
     };
     gridView.onIndicatorCellDblClicked = function (grid, index) {
         showLog("onIndicatorCellDblClicked : " + "(" + index + ")");
     };
     gridView.onStateBarCellDblClicked = function (grid, index) {
         showLog("onStateBarCellDblClicked : " + "(" + index + ")");
     };
     gridView.onRowGroupHeadFootDblClicked = function (grid, index) {
         showLog("onRowGroupHeadFootDblClicked : " + "(" + index + ")");
     };
     gridView.onRowGroupHeaderFooterDblClicked = function (grid, index) {
         showLog("onRowGroupHeaderFooterDblClicked : " + "(" + index + ")");
     };
     gridView.onRowGroupBarDblClicked = function (grid, index) {
         showLog("onRowGroupBarDblClicked : " + "(" + index + ")");
     };
     gridView.onPanelClicked = function (grid, index) {
         showLog("onPanelClicked : " + "(" + index + ")");
     };
     gridView.onPanelDblClicked = function (grid, index) {
         showLog("onPanelDblClicked : " + "(" + index + ")");
     };
     gridView.onRowGroupPanelClicked = function (grid, column) {
         showLog("onRowGroupPanelClicked : " + "(" + column.name + ")");
     };
     gridView.onRowGroupPanelDblClicked = function (grid, column) {
         showLog("onRowGroupPanelDblClicked : " + "(" + column.name + ")");
     };

실행화면

  1. 그리드의 영역을 클릭 또는 더블클릭 하여 발생하는 이벤트를 확인하세요.


전체 소스코드

SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.112.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"
        },
        {
            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",
            header : {
                text: "직업"
            },
            width : 60            
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "성별"
            },
            width: 50
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "이름"
            },
            width: 80
        },
        {
            name: "col4",
            fieldName: "field4",
            header : {
                text: "국어"
            },
            width: 80
        },
        {
            name: "col5",
            fieldName: "field5",
            header : {
                text: "수학"
            },
            width: 80
        },
        {
            name: "col6",
            fieldName: "field6",
            header : {
                text: "민법"
            },
            width: 80
        },
        {
            name: "col7",
            fieldName: "field7",
            header : {
                text: "한국사"
            },
            width: 80
        },
        {
            name: "col8",
            fieldName: "field8",
            header : {
                text: "영어"
            },
            width: 80
        },
        {
            name: "col9",
            fieldName: "field9",
            header : {
                text: "과학"
            },
            width: 80
        },
        {
            name: "col10",
            fieldName: "field10",
            header : {
                text: "사회"
            },
            width: 80
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

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

    function showLog(log){
        alert(log);
    }

    gridView.onColumnHeaderClicked = function (grid, column) {
        showLog("onColumnHeaderClicked: " + "(" + column.name + ")");
    };
    gridView.onColumnHeaderDblClicked = function (grid, column) {
        showLog("onColumnHeaderDblClicked: " + "(" + column.name + ")");
    };
    gridView.onColumnCheckedChanged = function (grid, column, checked) {
        showLog("onColumnCheckedChanged: " + "(" + column.name + ", " + checked + ")");
    };
    gridView.onDataCellClicked = function (grid, index) {
        showLog("onDataCellClicked: " + JSON.stringify(index));
    };
    gridView.onDataCellDblClicked = function (grid, index) {
        showLog("onDataCellDblClicked: " + JSON.stringify(index));
    };
    gridView.onFooterCellClicked = function (grid, column) {
        showLog("onFooterCellClicked : " + "(" + column.name + ")");
    };
    gridView.onFooterCellDblClicked = function (grid, column) {
        showLog("onFooterCellDblClicked : " + "(" + column.name + ")");
    };
    gridView.onItemChecked = function (grid, itemIndex, checked) {
        showLog("onItemChecked: " + itemIndex + ", " + checked);
    };
    gridView.onItemsChecked = function (grid, items, checked) {
        showLog("onItemsChecked: " + items + ", " + checked);
    };
    gridView.onItemAllChecked = function (grid, checked) {
        showLog("onItemAllChecked: " + checked);
    };
    gridView.onCheckBarFootClicked = function (grid) {
        showLog("onCheckBarFootClicked");
    };
    gridView.onIndicatorCellClicked = function (grid, index) {
        showLog("onIndicatorCellClicked : " + "(" + index + ")");
    };
    gridView.onStateBarCellClicked = function (grid, index) {
        showLog("onStateBarCellClicked : " + "(" + index + ")");
    };
    gridView.onRowGroupHeadFootClicked = function (grid, index) {
        showLog("onRowGroupHeadFootClicked : " + "(" + index + ")");
    };
    gridView.onRowGroupHeaderFooterClicked = function (grid, index) {
        showLog("onRowGroupHeaderFooterClicked : " + "(" + index + ")");
    };
    gridView.onRowGroupBarClicked = function (grid, index) {
        showLog("onRowGroupBarClicked : " + "(" + index + ")");
    };
    gridView.onCheckBarFootDblClicked = function (grid) {
        showLog("onCheckBarFootDblClicked");
    };
    gridView.onIndicatorCellDblClicked = function (grid, index) {
        showLog("onIndicatorCellDblClicked : " + "(" + index + ")");
    };
    gridView.onStateBarCellDblClicked = function (grid, index) {
        showLog("onStateBarCellDblClicked : " + "(" + index + ")");
    };
    gridView.onRowGroupHeadFootDblClicked = function (grid, index) {
        showLog("onRowGroupHeadFootDblClicked : " + "(" + index + ")");
    };
    gridView.onRowGroupHeaderFooterDblClicked = function (grid, index) {
        showLog("onRowGroupHeaderFooterDblClicked : " + "(" + index + ")");
    };
    gridView.onRowGroupBarDblClicked = function (grid, index) {
        showLog("onRowGroupBarDblClicked : " + "(" + index + ")");
    };
    gridView.onPanelClicked = function (grid, index) {
        showLog("onPanelClicked : " + "(" + index + ")");
    };
    gridView.onPanelDblClicked = function (grid, index) {
        showLog("onPanelDblClicked : " + "(" + index + ")");
    };
    gridView.onRowGroupPanelClicked = function (grid, column) {
        showLog("onRowGroupPanelClicked : " + "(" + column.name + ")");
    };
    gridView.onRowGroupPanelDblClicked = function (grid, column) {
        showLog("onRowGroupPanelDblClicked : " + "(" + column.name + ")");
    };
});
</script>
HTML
1. 그리드의 영역을 클릭 또는 더블클릭 하여 발생하는 이벤트를 확인하세요.

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

관련 데모 페이지


API 참조