RealGrid HELPB7-6 Cell Button
들어가며
이번 강좌에서는 데이터 셀에 편집기 외에 버튼을 표시하는 방법에 대하여 배워보도록 하겠습니다.
이론
RealGrid는 데이터 셀에 기본적인 편집기(Cell Editor) 외에 CellButton을 표시할 수 있습니다. 이 버튼들을 활용하여 추가 작업을 수행하거나 팝업메뉴를 표시할 수 있습니다.
DataColumn에서 CellButton 과 관련된 속성은 아래와 같습니다.
button: 데이터 셀 우측에 표시할 버튼의 종류를 지정합니다.- ‘none’ : 아무 버튼을 표시하지 않습니다.
- ‘action’ : 사용자가 클릭할 수 있는 버튼을 표시합니다.
-
‘popup’ : 사용자가 클릭할 수 있는 버튼을 표시하며 클릭시 팝업메뉴가 표시됩니다.
-
popupMenu: 팝업 메뉴를 지정합니다. alwaysShowButton: 버튼들의 표시 방법을 지정합니다.- true : 항상 모든 버튼을 표시합니다.
-
false : hovering, focused상태에서만 버튼을 표시합니다.
buttonVisibility: 버튼들의 표시 방법을 지정합니다.- ‘always’ : 항상 모든 버튼을 표시합니다.
- ‘default’ : hovering, focused상태에서만 버튼을 표시합니다.
- ‘visible’ : focused된 상태에서만 버튼을 표시합니다.
- ‘hidden’ : 버튼을 표시하지 않습니다.
위의 속성들을 보면 표시 방법을 지정하는 방법이 두 가지가 있습니다. 둘 중 편하신 방법을 사용하시면 되나 사용을 하신다면 더 다양한 표시 방법을 가진 buttonVisibility 사용을 추천합니다. 아무 속성을 지정하지 않으면 hovering, focused상태에서만 버튼을 표시합니다.
데이터 셀 안에 버튼을 표시하기 위해서는 단순히 DataColumn의 button 속성을 ‘action’으로 지정하기만 하면 됩니다.
그러나 popup 으로 지정할 경우 버튼을 클릭시 팝업 메뉴를 표시하기 위해서는 추가 작업이 필요합니다. 간략히 설명 드리자면
- MenuItem들로 이루어진 메뉴를 작성.
- GridBase.addPopupMenu()을 사용하여 1번에서 만들어진 메뉴를 등록.
- 팝업메뉴를 사용하려는 DataColumn.popupMenu 에 2번에서 등록한 이름을 지정.
이런 3단계의 과정을 거쳐야 팝업메뉴가 사용가능 합니다. 이 장에서 팝업메뉴의 설명은 여기에서 마치고 자세한 설명은 다음 강좌인 Popup Menu에서 하도록 하겠습니다.
콜백함수
- onCellButtonClicked : 버튼이 클릭되면 호출됩니다.
실습
실습에서는 버튼의 표시 방법에 따라 화면에 보여지는 방법이 어떻게 다른지 확인해보고 콜백함수가 어느 시점에 호출되는지 확인해보도록 하겠습니다.
- 각 컬럼에
button,alwaysShowButton,buttonVisibility` 을 설정합니다.{ name: "col4", fieldName: "field4", button: "action", alwaysShowButton : true, header : { text: "alwaysShowButton: true" }, width: 100 }, { name: "col5", fieldName: "field5", button: "action", alwaysShowButton : false, header : { text: "alwaysShowButton: false," }, width: 100 }, { name: "col6", fieldName: "field6", button: "action", buttonVisibility : "always", header : { text: "buttonVisibility: 'always'" }, width: 100 }, { name: "col7", fieldName: "field7", button: "action", buttonVisibility : "default", header : { text: "buttonVisibility: 'default'" }, width: 100 }, { name: "col8", fieldName: "field8", button: "action", buttonVisibility : "visible", header : { text: "buttonVisibility: 'visible'" }, width: 100 }, { name: "col9", fieldName: "field9", button: "action", buttonVisibility : "hidden", header : { text: "buttonVisibility: 'hidden'" }, width: 100 } -
버튼을 클릭하면 콜백 함수를 설정합니다.
$("#btnSetCallback").click(function () { gridView.onCellButtonClicked = function (grid, itemIndex, column) { alert("CellButton Clicked: itemIndex=" + itemIndex + ", fieldName=" + column.fieldName); }; });
실행화면
-
버튼을 클릭하면 콜백 함수를 설정합니다. 화면에는 아무 변화가 없습니다.
-
각 컬럼들을 클릭해보며 버튼의 표시 유무가 어떻게 변하는지 확인해보고 버튼들도 클릭해 봅니다.
전체 소스코드
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: 40
},
{
name: "col2",
fieldName: "field2",
header : {
text: "성별"
},
width: 40
},
{
name: "col3",
fieldName: "field3",
header : {
text: "이름"
},
width: 50
},
{
name: "col4",
fieldName: "field4",
button: "action",
alwaysShowButton: true,
header : {
text: "alwaysShowButton: true"
},
width: 110
},
{
name: "col5",
fieldName: "field5",
button: "action",
alwaysShowButton: false,
header : {
text: "alwaysShowButton: false,"
},
width: 110
},
{
name: "col6",
fieldName: "field6",
button: "action",
buttonVisibility : "always",
header : {
text: "buttonVisibility: 'always'"
},
width: 100
},
{
name: "col7",
fieldName: "field7",
button: "action",
buttonVisibility : "default",
header : {
text: "buttonVisibility: 'default'"
},
width: 100
},
{
name: "col8",
fieldName: "field8",
button: "action",
buttonVisibility : "visible",
header : {
text: "buttonVisibility: 'visible'"
},
width: 100
},
{
name: "col9",
fieldName: "field9",
button: "action",
buttonVisibility : "hidden",
header : {
text: "buttonVisibility: 'hidden'"
},
width: 100
}
];
//컬럼을 GridView에 입력 합니다.
gridView.setColumns(columns);
var data = [
["배우", "여자", "전도연", "0", "70", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "1", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "2", "100", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "3", "90", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "4", "100", "90", "70", "60", "100", "80"],
["가수", "남자", "성시경", "7", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "신해철", "8", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "윤상", "9", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "윤종신", "10", "100", "100", "100", "100", "100", "100"],
["가수", "여자", "이소라", "11", "100", "100", "100", "100", "100", "100"],
["배우", "여자", "강소라", "12", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "타블로", "13", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "이승환", "14", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "토이", "15", "100", "100", "100", "100", "100", "100"]
];
dataProvider.setRows(data);
gridView.setOptions({
header: {height: 50},
edit: {insertable: true, appendable: true, updatable: true, editable: true, deletable: true}
});
dataProvider.setOptions({
softDeleting: true
})
//버튼을 클릭하면 콜백 함수를 설정합니다.
$("#btnSetCallback").click(function () {
gridView.onCellButtonClicked = function (grid, itemIndex, column) {
alert("CellButton Clicked: itemIndex=" + itemIndex + ", fieldName=" + column.fieldName);
};
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnSetCallback">SetCallback</button> 버튼을 클릭하면 콜백 함수를 설정합니다. 화면에는 아무 변화가 없습니다. 2. 각 컬럼들을 클릭해보며 버튼의 표시 유무가 어떻게 변하는지 확인해보고 버튼들도 클릭해 봅니다. <div id="realgrid" style="width: 100%; height: 250px;"></div>
데모 사이트
API 참조