JqGrid 속성

jqGrid/함수 2015. 10. 22. 19:44
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>

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

 

728x90
반응형

'jqGrid > 함수' 카테고리의 다른 글

[Tapestry] JQGrid 커스텀 컴포넌트 개발일지  (0) 2015.10.22
jqGrid 추가 옵션  (0) 2015.10.22
jqGrid (메소드)  (0) 2015.10.22
블로그 이미지

nineDeveloper

안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!

,