728x90
반응형
Context 메뉴를 생성하기 위해서 context.css와 context.js를 임포트해주어야 한다.
1 2 |
< 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
$( "#mainGrid" ).jqGrid({ url: '<c:url value="/dsgnDoc/getBisnFileGridList.do"></c:url>' , /* 그리드의 데이터를 가져올 경로 */ 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"></c:out>' ], /* 컬럼 이름 */ colModel: [ '<c:out value="${gridHeader}" escapexml="false"></c:out>' ], /* 컬럼 구조(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"></c:url>' , /* 그리드에서 사용되는 이미지 경로 */ loadui: "enable" , // 로딩될때 메세지 표시여부 // 그리드 더블 클릭 시 이벤트 ondblClickRow: function (rowid) { // 자료조회 function 수행 uf_viewDoc(); }, onCellSelect: function (rowid, iCol, cellcontent, e) { }, // 파라미터 postData: { dataName: '<c:out value="${dataName}"></c:out>' , dataKind: '<c:out value="${dataKind}"></c:out>' }, // 마우스 클릭 이벤트 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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가 위치하는 곳
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
< 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 > |
728x90
반응형
'jqGrid > 함수' 카테고리의 다른 글
[Tapestry] JQGrid 커스텀 컴포넌트 개발일지 (0) | 2015.10.22 |
---|---|
jqGrid 추가 옵션 (0) | 2015.10.22 |
jqGrid (메소드) (0) | 2015.10.22 |