RealGrid HELPB7-1 팝업메뉴 구현하기
들어가며
이번 강좌에서는 RealGrid에서 팝업 메뉴를 사용하는 방법을 배워보겠습니다.
이론
팝업메뉴는 일상 업무에서 특정 컬럼에 다양한 기능/동작이 필요할 경우 사용합니다.
RealGrid에서는 매우 간단한 3가지 설정으로 팝업메뉴가 사용 가능합니다.
- MenuItem클래스를 이용해 메뉴정보를 구성합니다.
- 구성한 메뉴정보를 GridBase.addPopupMenu()함수로 그리드에 추가합니다.
- column의 popupMenu 속성에 2번에서 추가한 이름으로 등록합니다.
아래에서는 팝업 메뉴와 관계되는 클래스, API 및 콜백함수 등을 설명하겠습니다.
메뉴항목
메뉴는 메뉴항목(MenuItem)클래스의 집합입니다.
메뉴항목은 아래와 같이 7개의 속성으로 이루어져 있으며, 메뉴항목을 배열에 담아 메뉴객체를 만들수 있습니다.
label: 메뉴에 표시될 명칭type: 메뉴항목의 유형을 지정합니다. MenuItemType 중 하나를 선택합니다.group: 그룹의 이름을 지정합니다. type이 radio이고 그룹명을 지정하면 동일한 그룹명을 가진 것들 중에서 하나만 선택(checked) 됩니다.checked: 체크 여부를 지정합니다.enabled: 사용 여부를 지정합니다.tag: 테그명을 지정합니다.children: 하위메뉴를 구성할때 하위메뉴에 해당하는 메뉴항목들로 이루어진 메뉴정보를 등록합니다.
메뉴항목의 유형
메뉴항목(MenuItem)은 normal, check, radio, seperator로 구성되어 있으며 MenuItemType에 정의되어 있습니다. MenuItemType을 이용해 메뉴를 어떤 유형으로 구성할 것인지 결정할 수 있습니다.
메뉴 등록하기
메뉴항목들로 구성된 메뉴 객체를 그리드에 등록하려면 GridBase.addPopupMenu()함수를 사용합니다. 그리드에 등록된 메뉴는 컬럼과 연결되기 전에는 아무런 동작을 하지 않습니다.
함수에는 name과 menuItems라는 두개의 인자가 있으며, 첫번째 인자인 name에는 메뉴의 고유한 이름을 입력하고 두번째 인자인 menuItems에는 메뉴객체를 입력합니다.
컬럼에 메뉴 연결하기
그리드에 등록된 메뉴를 컬럼과 연결하기 위해서는 DataColumn의 button속성과 popupMenu속성을 이용합니다. button속성에는 ‘popup’을 popupMenu속성에는 그리드에 등록된 메뉴객체를 각각 입력합니다.
메뉴항목 클릭 이벤트
팝업된 메뉴에서 특정 항목을 클릭하거나 선택하면 GridBase.onMenuItemClicked()함수가 콜백됩니다. 이 이벤트에는 grid와 data라는 두 개의 인자가 넘어오며, grid에는 그리드(GridBase)객체가, data에는 클릭된 메뉴항목(MenuItem) 객체가 각각 넘어오게 됩니다.
실습
실습에서는 컬럼에 메뉴를 등록하는 방법과 메뉴 클릭시 처리하는 방법에 대해 배워보도록 하겠습니다.
-
버튼을 클릭하면 메뉴를 만들고, 그리드에 “TestMenu”란 이름으로 메뉴를 등록하기위해 addPopupMenu()함수를 호출 하는 코드를 작성합니다.
//메뉴 구성후 메뉴 등록 $("#btnConfigureMenu").click(function () { //메뉴 구성 var menu = [{ label: "메뉴아이템 1", enabled: true, children: [{ label: "하위 메뉴아이템 1" }, { label: "하위 메뉴아이템 1" }] }, { label: "비활성 메뉴아이템", enabled: false }, { label: "-" }, { label: "체크 메뉴아이템", type: "check", checked: true, tag: "check_menu" }, { label: "라디오 그룹 메뉴아이템", children: [{ label: "라디오 메뉴 1", type: "radio", group: "group1", checked: true }, { label: "라디오 메뉴 2", type: "radio", group: "group1" }, { label: "라디오 메뉴 3", type: "radio", group: "group1" }] }]; //메뉴 등록 gridView.addPopupMenu("TestMenu", menu); }); -
1.에서 그리드에 등록한 메뉴를
직업컬럼에 연결하는 코드를 작성합니다.//컬럼에 팝업메뉴 등록 $("#btnSetColumn").click(function () { var column = gridView.columnByName('col1'); column.button = 'popup'; column.popupMenu = 'TestMenu'; gridView.setColumn(column); }); -
메뉴항목이 클릭되었을때의 onMenuItemClicked()콜백에 대한 코드를 작성합니다.
//메뉴항목 클릭시 콜백 처리 gridView.onMenuItemClicked = function (grid, data) { var s = data.label + (data.checked ? " checked" : ""); if (data.tag) s += "\n" + "tag: " + data.tag; alert(s); };
실행화면
-
버튼을 클릭하여 메뉴를 등록합니다. 이때, 그리드에는 어떤 반응도 일어나지 않습니다.
-
버튼을 클릭하여 그리드의
직업컬럼에 팝업메뉴를 위한 버튼이 생겨나는 것을 확인하세요. -
직업 컬럼의
메뉴팝업버튼을 클릭하여 팝업메뉴가 표시되는 것을 확인하세요. -
팝업메뉴의 메뉴항목을 클릭하면 클릭이벤트의 동작에 따라 메시지 창이 팝업되는 것을 확인하세요.
전체 소스코드
SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.11.2.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 = [
["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]
];
dataProvider.setRows(data);
//메뉴 구성후 메뉴 등록
$("#btnConfigureMenu").click(function () {
//메뉴 구성
var menu = [{
label: "메뉴아이템 1",
enabled: true,
children: [{
label: "하위 메뉴아이템 1"
}, {
label: "하위 메뉴아이템 1"
}]
}, {
label: "비활성 메뉴아이템",
enabled: false
}, {
label: "-"
}, {
label: "체크 메뉴아이템",
type: "check",
checked: true,
tag: "check_menu"
}, {
label: "라디오 그룹 메뉴아이템",
children: [{
label: "라디오 메뉴 1",
type: "radio",
group: "group1",
checked: true
}, {
label: "라디오 메뉴 2",
type: "radio",
group: "group1"
}, {
label: "라디오 메뉴 3",
type: "radio",
group: "group1"
}]
}];
//메뉴 등록
gridView.addPopupMenu("TestMenu", menu);
});
//컬럼에 팝업메뉴 등록
$("#btnSetColumn").click(function () {
var column = gridView.columnByName('col1');
column.button = 'popup';
column.popupMenu = 'TestMenu';
gridView.setColumn(column);
});
//메뉴항목 클릭시 콜백 처리
gridView.onMenuItemClicked = function (grid, data) {
var s = data.label + (data.checked ? " checked" : "");
if (data.tag)
s += "\n" + "tag: " + data.tag;
alert(s);
};
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnConfigureMenu">메뉴 구성하기</button> 버튼을 클릭하여 메뉴를 등록합니다. 이때, 그리드에는 어떤 반응도 일어나지 않습니다. 2. <button type="button" class="btn btn-primary btn-xs" id="btnSetColumn">메뉴 연결하기</button> 버튼을 클릭하여 그리드의 `직업`컬럼에 팝업메뉴를 위한 버튼이 생겨나는 것을 확인하세요. 팝업메뉴버튼은 포커스된 셀, 또는 마우스가 호버링(hoering)된 셀에만 보입니다. 3. 직업 컬럼의 `메뉴팝업버튼`을 클릭하여 팝업메뉴가 표시되는 것을 확인하세요. 4. 팝업메뉴의 메뉴항목을 클릭하면 클릭이벤트의 동작에 따라 메시지 창이 팝업되는 것을 확인하세요. <div id="realgrid" style="width: 100%; height: 250px;"></div>
데모 사이트
API 참조