jqGrid 기본 사용법 정리


<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>test</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <!-- 다운로드 받아야됨 -->
    <!-- http://1004lucifer.blogspot.com/2019/04/jqgrid.html -->
    <link rel="stylesheet" type="text/css" href="jqGrid-master/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="jqGrid-master/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="jqGrid-master/css/addons/ui.multiselect.css" />
    
    <script type="text/javascript" src="jqGrid-master/jquery.js"></script>  
    <script type="text/javascript" src="jqGrid-master/js/i18n/grid.locale-kr.js"></script>
    <script type="text/javascript" src="jqGrid-master/js/jquery.jqGrid.min.js"></script>

</head>
<body>
    <div class="row">
        <div>
            <table id="jqGrid"></table>
            <div id="jqGridPager"></div>
        </div>
    </div>
</body>
<script>
    $(function() { // page가 로드 되는 것을 기다림
        var myGrid = $('#jqGrid'); // 미리 세팅해도 되고 바로 사용해도 됨
        var myGridPager = $('#jqGridPager');

        // 이것도 미리 세팅한건데 name이랑 model 데이터 length가 다르면 에러남
        var cName = ['seq', '번호', '제목', '작성자', '작성일'];
        var cModel = [
            {name : 'boardSeq', index : 'BOARD_SEQ', align : 'center', hidden : true},
            {name : 'num', index : 'NUM', align : 'center', width : '25%'},
            {name : 'title', index : 'TITLE', align : 'center', width : '25%'},
            {name : 'reg_id', index : 'REG_ID', align : 'center', width : '25%'},
            {name : 'reg_dt', index : 'REG_DT', align : 'center', width : '25%'},
        ];
        
        // 안적어도 알겠지만 세팅 안하고 바로 작성해도 됨
        myGrid.jqGrid({
            url : "/board/selectBoardList.do", // 데이터를 받아올 url (type = string)
            mtype : "POST", // 요청 메소드 정의 : POST, GET 등등 (type = string)
            datatype : "json", // 데이터를 채우는 데이터 형식 : xml, json, local 등등 (type = string)
            postData : {
                // POST 요청 시 넘겨줄 데이터 지정 (type = array)
            },
            colNames : cName, // header에 보여질 텍스트 (type = array)
            conModeal : cModel, // body에 보여질 텍스트 (type = array)
            pager : myGridPager, // 페이징 요소 지정 (type = mixed)
            rowNum : 10, // 한 페이지에 뵤여질 데이터 갯수 (type = integer)
            rowList : [10, 20, 30], // 표시되는 행의 수 변경 옵션 (type = array[])
            autowidth : true, //그리드의 상위 요소의 width로 자동 계산 (type = boolean)
	        shrinkToFit : true, // 그리드의 width를 고려하여 컬럼의 width를 어떻게 재계산할지 정의한다. (type = boolean, integer)
	        viewrecords : true, // 그리드 갯수 중에서 시작/끝 레코드 번호를 표시한다 (type = boolean)
            onSelectRow : function({
                // 행 선택시에 이루어지는 코드 (type = mixed)
            }), 
			sortname : 'num', // 데이터가 처음 로드될 때 정렬되는 열 이름
			sortorder : 'desc', // 데이터 로드시 정렬 순서 (type = string(asc, desc))
            emptyrecords : "데이터가 없습니다.", // 데이터가 없을 시 페이저 오른쪽에 보여질 문자열 : viewrecords 옵션 true일 때 사용 가능 (type = string)
            height : auto, // 그리드의 높이 설정 (type = mixed(integer(픽셀 단위), 퍼센트, auto))
            pgbuttons : true, // Pager에서 버튼의 활성화 여부 결정 (type = boolean)
            pginput : false, // 가능한 요청페이지의 번호를 입력하는 input box의 사용여부 (type = boolean)
            sortable: true, // 	그리드 열을 마우스로 드래그앤드롭으로 이동이 가능하다 (type = boolean)
        });

    });
</script>
</html>
말로 설명하는 것 보다 코드를 직접 보는게 나을 것 같아서 코드 뭉텅이 채로 올린다...
내가 참고한 사이트는 아래 사이트 조금 더 자세하게 알고 싶거나 더 많은 기능들을 찾을 때 유용한것같다
http://1004lucifer.blogspot.com/2019/04/jqgrid_65.html
태그
