셀의 클릭 이벤트를 잡을 수 있는 grid body의 onClick
메서드를 쓰기를 권장합니다!
하지만 셀 안의 엘리먼트에 클릭 이벤트를 주고 싶으시다면…
onClick과 onChange를 이용하여 함수를 호출하는 방법을 사용했습니다.
전역에 함수를 만들면 위험(?)할 것 같아 jQuery.extend를 사용하여 함수를 만들었습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Issue #42-2 그리드 예제</title>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js"></script>
</head>
<body>
<div data-ax5grid="my-grid" data-ax5grid-config="{}" style="height: 300px;"></div>
<script type="text/javascript">
var myGrid = new ax5.ui.grid();
$(document.body).ready(function () {
var fn_disabled = function () {
return function () {
return this.value != "edit";
};
};
myGrid.setConfig({
target: $('[data-ax5grid="my-grid"]'),
columns: [
{key: "a", label: "header1", editor: {type: "text", disabled: fn_disabled()}},
{key: "b", label: "header2", editor: {type: "text", disabled: fn_disabled()}},
{key: "c", label: "header3", editor: {type: "text", disabled: fn_disabled()}},
{key: "d", label: "header4", editor: {type: "text", disabled: fn_disabled()}},
{
key: "e", label: "header5", editor: {type: "text", disabled: fn_disabled()},
formatter: function () {
var returnValue = "";
switch (this.value) {
case "checkbox" :
returnValue = '<label><input type="checkbox" onclick="$.customFn(this, ' + this.dindex + ')"/> 체크박스</label>';
break;
case "button" :
returnValue = '<button type="button" onclick="$.customFn(this, ' + this.dindex + ')">버튼</button>';
break;
default:
returnValue = this.value;
break;
}// end switch
return returnValue;
}
}
]
});
// 그리드 데이터 가져오기
myGrid.setData([
{a: "merge", b: "merge", c: "merge", d: "edit", e: "checkbox"},
{a: "merge", b: "merge", c: "merge", d: "text", e: "empty"},
{a: "merge", b: "merge", c: "merge", d: "empty", e: "button"},
{a: "text", b: "text", c: "text", d: "edit", e: "text"},
{a: "text", b: "text", c: "text", d: "edit", e: "text"},
{a: "text", b: "text", c: "text", d: "edit", e: "text"},
{a: "merge", b: "merge", c: "merge", d: "empty", e: "button"},
{a: "merge", b: "merge", c: "merge", d: "empty", e: "button"},
{a: "merge", b: "merge", c: "merge", d: "empty", e: "button"},
{a: "merge", b: "merge", c: "merge", d: "empty", e: "button"},
{a: "merge", b: "merge", c: "merge", d: "empty", e: "button"}
]);
});
jQuery.extend({
"customFn": function (el, i) {
// 함수 정의
var data = myGrid.list[i];
switch (data.e) {
case "button":
// 버튼을 눌렀을 때 함수 정의
console.log(data.e + ":" + i);
break;
case "checkbox":
// 체크박스를 눌렀을 때 함수 정의
console.log(data.e + ":" + el.checked);
break;
/*
* case ...
*/
default:
break;
}
}
});
</script>
</body>
</html>