[jqGrid] jqGrid에서 멀티 체크(Custom Multi Select) 기능 구현

jQuery/jqGrid 2013. 8. 14. 10:58

01. 체크한 행의 Row Number 알아내기


JavaScript Code

        // 체크된 항목의 ROW NUMBER를 알려주는 함수
        jQuery("#cm1").click( function() {   
            var s = jQuery("#grid").jqGrid('getGridParam', 'selarrrow');
            alert(s);
        });


HTML

        <a href="javascript:void(0)" id="cm1">선택 Row Number(행) 확인</a>


실행화면







02. 특정행 체크 On/Off


JavaScript Code

        // 특정행 자동 체크 On/Off
        jQuery("#cm1s").click( function() {
            jQuery("#grid").jqGrid('setSelection', "4");
            jQuery("#grid").jqGrid('setSelection', "7");
        });


HTML

        <a href="javascript:void(0)" id="cm1s">특정행 체크 On/Off</a>


실행화면




03. 완성 소스

 MyFirstGrid.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel = "stylesheet" type = "text/css" media = "screen" href = "css/jquery-ui-1.10.3.custom.min.css"/>
<link rel = "stylesheet" type = "text/css" media = "screen" href = "css/ui.jqgrid.css"/>

<script src = "js/jquery-1.9.0.min.js" type = "text/javascript"></script>
<script src = "js/i18n/grid.locale-kr.js" type = "text/javascript"></script>
<script src = "js/jquery.jqGrid.min.js" type = "text/javascript"></script>

<script>
    $(window.document).ready(function() {
        $("#grid").jqGrid({
            url : 'http://apis.daum.net/socialpick/search?output=json',
            caption : 'Daum SNS Pic',    // caption : 그리드의 제목을 지정한다.
            datatype : 'jsonp',            // datatype : 데이터 타입을 지정한다.
                                        // (json 으로 외부에 요청을 보내면 보안정책에 위배되어 요청이 나가질 않는다.
                                        //  따라서 datatype 을 jsonp로 변경하고 보내야 한다.)

            mtype : 'get',                // mtype : 데이터 전송방식을 지정한다.
            height : '500px',            // height : 그리드의 높이를 지정한다.
            pager : '#pager',            // pager : 도구 모임이 될 div 태그를 지정한다.
            rowNum : 3,                    // rowNum : 한 화면에 표시할 행 개수를 지정한다.
            loadonce : true,            // loadonce : rowNum 설정을 사용하기 위해서 true로 지정한다.
            rowList : [3, 6, 9, 10],    // rowList : rowNum을 선택할 수 있는 옵션을 지정한다.


            multiselect: true,            // 멀티 체크 기능 구현을 위한 체크박스 생성

            // colNames : 열의 이름을 지정한다.
            colNames : [ '순위', '소셜픽키워드', 'URL', '요약문', '검색수', '트윗수', '검색 결과의 페이지 번호', '순위 상승/하락수', '카테고리' ],
            colModel : [
                        { name : 'rank',            index : 'rank',                width : 40,        align : 'center' },
                        { name : 'keyword',         index : 'keyword',            width : 100,    align : 'left'   },
                        { name : 'link',             index : 'link',                width : 100,    align : 'left'   },
                        { name : 'content',         index : 'content',            width : 200,    align : 'left'   },
                        { name : 'count',             index : 'count',            width : 100,    align : 'center' },
                        { name : 'quotation_cnt',    index : 'quotation_cnt',    width : 100,    align : 'center' },
                        { name : 'comment_cnt',     index : 'comment_cnt',         width : 100,    align : 'center' },
                        { name : 'rank_diff',         index : 'rank_diff',         width : 100,    align : 'center' },
                        { name : 'category',         index : 'category',         width : 100,    align : 'center' }
            ],
           
            // jqGrid 에서 default 형태의 JSON 이 아닌 소셜픽만의 고유의 json 형태로 날아오기에.
            // 소셜픽의 API 를 바꿀 순 없어, jqGrid 에서 json을
            // customizing하여 사용하기 위해 jsonReader를 사용했다.
            jsonReader : {
                            repeatitems : false,
                            id : "rank",
                            root : function (obj) { return obj.socialpick.item; },
                            page : function (obj) { return 1; },
                            total : function (obj) { return 1; },
                            records : function (obj) {return obj.socialpick.item.length; }
            }

        // navGrid() 메서드는 검색 및 기타기능을 사용하기위해 사용된다.
        }).navGrid('#pager', {
            search : true,
            edit : true,
            add : true,
            del : true,
        });
       
        // 체크된 항목의 ROW NUMBER를 알려주는 함수
        jQuery("#cm1").click( function() {   
            var s = jQuery("#grid").jqGrid('getGridParam', 'selarrrow');
            alert(s);
        });
       
        // 특정행 자동 체크 On/Off
        jQuery("#cm1s").click( function() {
            jQuery("#grid").jqGrid('setSelection', "4");
            jQuery("#grid").jqGrid('setSelection', "7");
        });
    });
</script>
<title>jqGrid</title>
</head>
<body style = "font-size:62.5%;">
    <table id = "grid"></table>
    <div id = "pager"></div>

    <h1>
        <a href="javascript:void(0)" id="cm1">선택 Row Number(행) 확인</a><br/><br/>
        <a href="javascript:void(0)" id="cm1s">특정행 체크 On/Off</a>
    </h1>
</body>
</html>