[jqGrid] Context Menu

Context 메뉴를 생성하기 위해서 context.css와 context.js를 임포트해주어야 한다.

 

<link rel="stylesheet" type="text/css" href="<c:url value='/css/context/jquery.context.css' />" />

<script type="text/javascript" src="<c:url value='/js/lib/context/jquery.context.js' />" ></script>

 

 

Document.ready에 기술되는 JqGrid

$("#mainGrid").jqGrid({
url : "<c:url value='/dsgnDoc/getBisnFileGridList.do' />", /* 그리드의 데이터를 가져올 경로 */
datatype : "xml", /* 가져온 데이터의 형식 (XML/JSON/ROW)*/
mtype : "POST", /* ajax 호출 방식(GET/POST) */
width : parent.$("#rst_lst").width() - 2, // 우측 여백 2px; /* 그리드 너비 */
height : parent.$("#data_lst_area").height() - 55 - 29, // 자료목록 상단, 하단 페이징 사이즈 처리
colNames : [<c:out value='${gridHeaderName}' escapeXml='false' />], /* 컬럼 이름 */
colModel : [<c:out value='${gridHeader}' escapeXml='false' />], /* 컬럼 구조(index에 설정된 이름이 정렬시 정렬 기준열 이름으로 넘어감) */
multiselect : true,
multiboxonly:true, // 체크 박스를 클릭해야 다중 선택 가능
rownumbers : true, // 행번호 표시여부
rownumWidth : 30, // 행번호 열의 너비
//scrollOffset : 0, // 0으로 선언할 경우 Grid 스크롤바 표시 않함
shrinkToFit : false, /* RowWidth 고정 */
pager : jQuery("#divPager"), /* 페이저 설정 */
rowNum : 100, /* 페이지당 레코드수 초기값 */
rowList : [100, 200], /* 페이지당 레코드수 선택 가능한 값 */
viewrecords : true, /* 페이저에 총 레코드수를 표시할 것인지 설정 */
loadtext : "로딩중...", /* 데이터 로딩중에 표시될 메시지 */
sortname : "t2.clfy_id", /* 처음 정렬될 컬럼 */
sortorder : "asc", /* 정렬방법 (asc/desc) */
imgpath: "<c:url value='/images/jqGrid' />", /* 그리드에서 사용되는 이미지 경로 */
loadui : "enable", // 로딩될때 메세지 표시여부

// 그리드 더블 클릭 시 이벤트
ondblClickRow : function(rowid) {
// 자료조회 function 수행
uf_viewDoc();
},

onCellSelect : function(rowid,iCol,cellcontent,e){

},

// 파라미터
postData : {
dataName : "<c:out value='${dataName}' />",
dataKind : "<c:out value='${dataKind}' />"
},

// 마우스 클릭 이벤트
onSelectRow : function(rowid) {
// 표시 중인 context 메뉴 hide 처리
$(".contextMenu").hide();

},

// 마우스 우측버튼 클릭 이벤트
onRightClickRow : function(rowid) { /* 우측버튼 이벤트 */
// 기존 context 메뉴 삭제
$('#mainGrid').destroyContextMenu();

if(rowid == null || rowid == ""){
return;
}else{


if($("#mainGrid").jqGrid('getGridParam','selarrrow') != rowid)
$("#mainGrid").setSelection(rowid);

// 기존 Context 메뉴 항목 삭제
$('#mainGrid').destroyContextMenu();

$("#mainGrid").contextMenu({
menu: 'normalMenu'
});
}
},

loadComplete : function() { /* 데이터 로딩이 끝난후 호출할 함수*/
},

afterInsertRow: function(rowid, rowdata, rowelem) { // 데이터를 로드할때의 액션
// 이력이 있는 경우 색상 처리
if(rowdata.histYn == "Y"){
$("#"+rowid).css("background", "#E8D9FF");
}
}
});

 

Contxt menu에서 클릭 시 처리되는 function

function onCommand(flag) {
switch (flag) {
case 0 :
uf_insertDoc();
break;
case 1 :
uf_updateDoc();
break;
case 2 :
uf_detailDoc();
break;
case 3 :
alert("다운로드");
break;
case 4 :
// 자료 조회 수행
uf_viewDoc();
break;
case 5 :
alert("변경등록");
break;
case 6 :
// 자료 삭제 수행
uf_deleteDoc();
break;
}
}

 

jqGrid와 Context Menu가 위치하는 곳

<table id="mainGrid" class="grid"></table>
<div id="divPager" class="grid" style="text-align: center"></div>

<!-- contextMenu 영역 (일반 도면인 경우)-->
<ul id="normalMenu" class="gridMenu">
<li class='edit'>
<a href="javascript:return false;" onclick='onCommand(1)' >정보수정</a>
</li>
<li class='paste'>
<a href="javascript:return false;" onclick='onCommand(2)' >자료상세정보</a>
</li>
<li class='wastebasket separator'>
<a href="javascript:return false;" onclick='onCommand(6)' >자료삭제</a>
</li>
<li class='save'>
<a href="javascript:return false;" onclick='onCommand(3)' >다운로드</a>
</li>
<li class='search'>
<a href="javascript:return false;" onclick='onCommand(4)' >자료조회</a>
</li>
<li class='copy separator'>
<a href="javascript:return false;" onclick='onCommand(5)' >자료 이력변경</a>
</li>
<li class='quit separator'>
<a href="javascript:return false;">닫기</a>
</li>
</ul>