JqGrid 속성

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

 

 

 

Document.ready에 기술되는 JqGrid

$("#mainGrid").jqGrid({
    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: [''], /* 컬럼 이름 */
    colModel: [''], /* 컬럼 구조(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: '', /* 그리드에서 사용되는 이미지 경로 */
    loadui: "enable", // 로딩될때 메세지 표시여부

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

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

    },

    // 파라미터
    postData: {
	dataName: '',
	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가 위치하는 곳

    


    
    

        

            정보수정
        
        

            자료상세정보
        
        

            자료삭제
        
        

            다운로드
        
        

            자료조회
        
        

            자료 이력변경
        
        

            닫기
        
    

[출처] JqGrid 속성|작성자 듀스포에