RealGrid HELPA26 이벤트 이해하기(Events)
들어가며
이번 강좌에서는 이벤트에 대한 기본적인 이해를 돕기 위한 예제를 실습해 보겠습니다.
이론
RealGrid는 각각의 객체가 가지고 있는 많은 이벤트가 있습니다. 이벤트는 사용자가 그리드를 클릭하거나 값을 입력하는등 동작을 수행할때 그리드가 호출해 주는 콜백 함수 입니다.
이번 강좌에서는 GridView객체의 영역을 클릭(Click) 또는 더블클릭(Double Click) 할때 발생하는 이벤트 콜백함수를 구현하고 클릭된 인자의 정보를 팝업하는 예제를 구현해 보겠습니다.
실습
-
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 + ")"); };
실행화면
- 그리드의 영역을 클릭 또는 더블클릭 하여 발생하는 이벤트를 확인하세요.
전체 소스코드
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 참조