RealGrid HELPB7-7 Popup Menu
들어가며
이번 강좌에서는 지난 강좌인 Cell Button에서 언급한 팝업 메뉴를 자세히 알아보도록 하겠습니다.
이론
RealGrid는 데이터 셀에 기본적인 편집기(Cell Editor) 외에 CellButton을 표시할 수 있다는것을 지난 강좌에서 배웠습니다. 셀 버튼의 유형을 popup 으로 지정하여 팝업메뉴를 사용할 수 있습니다.
팝업메뉴를 사용하기 위해 어떠한 작업이 필요한지 알아보도록 하겠습니다.
- DataColumn의 button 속성을
popup으로 지정합니다. - MenuItem들로 이루어진 메뉴를 작성합니다.
label: 메뉴에 표시될 명칭을 지정합니다.type: 메뉴 항목의 형태, ‘normal’, ‘check’, ‘radio’, ‘separator’ 를 사용할 수 있습니다.group: 라디오 버튼을 사용할 때의 그룹을 지정합니다. 동일 그룹으로 지정된 메뉴항목들 안에서 하나만 선택할 수 있습니다.enabled: 사용 여부를 지정합니다.checked:type이 ‘check’이거나 ‘radio’일때 체크 표시 여부를 지정합니다.tag: 테그를 지정합니다.children: 하위 메뉴가 필요할때 하위 메뉴에 대한 메뉴항목들을 지정합니다.
- GridBase.addPopupMenu()을 사용하여 2번에서 만들어진 메뉴를 등록합니다.
- 팝업메뉴를 사용하려는 DataColumn.popupMenu 에 3번에서 등록한 이름을 지정 합니다.
이런 과정을 거쳐야 팝업메뉴가 사용가능 합니다.
실습
실습에서는 직업 컬럼에 팝업메뉴를 연결하고 팝업 메뉴를 클릭시 발생하는 콜백함수를 확인해보도록 하겠습니다.
-
메뉴 항목들로 이루어진 팝업메뉴를 만들고 그리드에 메뉴를 등록해보도록 하겠습니다. 주석을 확인해보면서 메뉴 항목의 기능을 습득하세요.
$("#btnAddPopupMenu").click(function () { // popup menus var menu = [{ label: "menu1 입니다.", // menu1은 활성화 되어 있고 하위 메뉴를 가지고 있습니다. enabled: true, children: [{ label: "submenu1 입니다." }, { label: "submenu2 입니다." }] }, { label: "menu2 입니다", enabled: false // menu2 는 비활성화 되어 있습니다. }, { label: "-" // menu2 와 menu3 사이에 구분선이 그어집니다. // type: "separator" 와 label: "-" 는 같은 기능을 합니다. }, { label: "menu3 입니다", type: "check", // menu3은 체크를 할 수 있는 아이템 checked: true, // menu3은 기본값으로 체크되어 있습니다. tag: "check_menu" // 해당 메뉴항목이 클릭되어 있는지의 여부를 확인하기 위해 테그를 지정했습니다. }, { label: "group menu", children: [{ // group menu는 하위 메뉴를 가지고 있습니다. label: "group1 - 첫번째", // menu1의 하위 메뉴와는 다르게 라디오 버튼을 사용하며, type: "radio", // 라디오 버튼은 group1, group2 두개의 그룹으로 이루어져 있습니다. group: "group1", checked: true // "group1 - 첫번째"만 체크 되어 있습니다. }, { label: "group1 - 두번째", type: "radio", group: "group1", enabled: false // "group1 - 두번째"는 비활성화 되어 체크할 수 없습니다. }, { label: "group1 - 세번째", type: "radio", group: "group1" }, { label: "group2 - 첫번째", // group2는 어느것도 체크되어 있지 않습니다. type: "radio", // 그러나 팝업메뉴를 통해 체크할 수 있습니다. group: "group2" }, { label: "group2 - 두번째", type: "radio", group: "group2" }] }]; gridView.addPopupMenu("menu1", menu); //"menu1"이란 이름으로 위에서 만든 팝업메뉴를 등록합니다. }); -
메뉴항목을 클릭했을때 발생하는 콜백함수를 설정 합니다.
$("#btnSetCallback").click(function () { gridView.onMenuItemClicked = function (grid, data) { var s = data.label + (data.checked ? " checked" : ""); if (data.tag) s += "\n" + "tag: " + data.tag; alert(s); }; }); -
직업 컬럼에 팝업메뉴를 연결 합니다.
$("#btnSetColumn").click(function () { var col = gridView.columnByName("col1"); col.button = "popup"; col.popupMenu = "menu1"; gridView.setColumn(col); });
실행화면
-
버튼을 클릭하면 그리드에 팝업메뉴를 등록합니다. 화면에는 아무 변화가 없습니다.
-
버튼을 클릭하면 콜백 함수를 설정합니다. 화면에는 아무 변화가 없습니다.
-
버튼을 클릭하면 직업 컬럼에 팝업메뉴를 연결합니다.
-
직업 컬럼을 선택하여 팝업 메뉴를 실행해보면서 결과를 확인해 보세요.
전체 소스코드
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_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 = [
["배우", "여자", "전도연", "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({
indicator: {visible: true},
checkBar: {visible: false},
stateBar: {visible: true},
edit: {insertable: true, appendable: true, updatable: true, editable: true, deletable: true},
sort: {enabled: false},
panel: {visible: false}
});
dataProvider.setOptions({
softDeleting: true
})
//메뉴 항목들로 이루어진 팝업메뉴를 만들고 그리드에 메뉴를 등록해보도록 하겠습니다.
//주석을 확인해보면서 메뉴 항목의 기능을 습득하세요.
$("#btnAddPopupMenu").click(function () {
// popup menus
var menu = [{
label: "menu1 입니다.", // menu1은 활성화 되어 있고 하위 메뉴를 가지고 있습니다.
enabled: true,
children: [{
label: "submenu1 입니다."
}, {
label: "submenu2 입니다."
}]
}, {
label: "menu2 입니다",
enabled: false // menu2 는 비활성화 되어 있습니다.
}, {
label: "-" // menu2 와 menu3 사이에 구분선이 그어집니다.
// type: "separator" 와 label: "-" 는 같은 기능을 합니다.
}, {
label: "menu3 입니다",
type: "check", // menu3은 체크를 할 수 있는 아이템
checked: true, // menu3은 기본값으로 체크되어 있습니다.
tag: "check_menu" // 해당 메뉴항목이 클릭되어 있는지의 여부를 확인하기 위해 테그를 지정했습니다.
}, {
label: "group menu",
children: [{ // group menu는 하위 메뉴를 가지고 있습니다.
label: "group1 - 첫번째", // menu1의 하위 메뉴와는 다르게 라디오 버튼을 사용하며,
type: "radio", // 라디오 버튼은 group1, group2 두개의 그룹으로 이루어져 있습니다.
group: "group1",
checked: true // "group1 - 첫번째"만 체크 되어 있습니다.
}, {
label: "group1 - 두번째",
type: "radio",
group: "group1",
enabled: false // "group1 - 두번째"는 비활성화 되어 체크할 수 없습니다.
}, {
label: "group1 - 세번째",
type: "radio",
group: "group1"
}, {
label: "group2 - 첫번째", // group2는 어느것도 체크되어 있지 않습니다.
type: "radio", // 그러나 팝업메뉴를 통해 체크할 수 있습니다.
group: "group2"
}, {
label: "group2 - 두번째",
type: "radio",
group: "group2"
}]
}];
gridView.addPopupMenu("menu1", menu); //"menu1"이란 이름으로 위에서 만든 팝업메뉴를 등록합니다.
});
//메뉴항목을 클릭했을때 발생하는 콜백함수를 설정합니다.
$("#btnSetCallback").click(function () {
gridView.onMenuItemClicked = function (grid, data) {
var s = data.label + (data.checked ? " checked" : "");
if (data.tag)
s += "\n" + "tag: " + data.tag;
alert(s);
};
});
//직업 컬럼에 팝업메뉴를 연결 합니다.
$("#btnSetColumn").click(function () {
var col = gridView.columnByName("col1");
col.button = "popup";
col.popupMenu = "menu1";
gridView.setColumn(col);
});
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnAddPopupMenu">AddPopupMenu</button> 버튼을 클릭하면 그리드에 팝업메뉴를 등록합니다. 화면에는 아무 변화가 없습니다. 2. <button type="button" class="btn btn-primary btn-xs" id="btnSetCallback">SetCallback</button> 버튼을 클릭하면 콜백 함수를 설정합니다. 화면에는 아무 변화가 없습니다. 3. <button type="button" class="btn btn-primary btn-xs" id="btnSetColumn">btnSetColumn</button> 버튼을 클릭하면 직업 컬럼에 팝업메뉴를 연결합니다. 4. 직업 컬럼을 선택하여 팝업 메뉴를 실행해보면서 결과를 확인해 보세요. <div id="realgrid" style="width: 100%; height: 250px;"></div>
데모 사이트
API 참조