태그

#JQGRID

jqGrid setGridParam으로 검색하는 방법

2021년 11월 3일 17:42

26-thumbnail-image

값을 받아서 검색하는 방법 정리

(편의를 위해 바디와 스크립트 부분만 작성할게여)


<body>
    <div class="row">
        <div>
            <input type="text" id="sch_num" name="sch_num">
            <input type="text" id="sch_title" name="sch_title">
            <input type="text" id="sch_reg_id" name="sch_reg_id">
            <select id="sch_reg_dt" name="sch_reg_dt">
                <option value="">-선택-</option>
                <option value="1">1월</option>
                <option value="2">2월</option>
                <option value="3">3월</option>
                <option value="4">4월</option>
                <option value="5">5월</option>
                <option value="6">6월</option>
                <option value="7">7월</option>
                <option value="8">8월</option>
                <option value="9">9월</option>
                <option value="10">10월</option>
                <option value="11">11월</option>
                <option value="12">12월</option>
            </select>
            <button onclick="javascript:fn_search()">검색</button>
            <table id="jqGrid"></table>
            <div id="jqGridPager"></div>
        </div>
    </div>
</body>
<script>
    // 
    $(function() {
        $('#jqGrid').jqGrid({
            url : "/board/selectBoardList.do",
            mtype : "POST",
            datatype : "json",
            colNames : ['seq', '번호', '제목', '작성자', '작성일'],
            conModeal : [
                {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%'},
            ],
            pager : $('#jqGridPager'),
            rowNum : 10,
            rowList : [10, 20, 30],
            autowidth : true,
        });

        function fn_search() {
            // 방법 1 (난 이게 더 조흠 ㅎㅎ)
            var sch_num = $('#sch_num').val();
            var sch_title = $('#sch_title').val();
            var sch_reg_id = $('#sch_reg_id').val();
            var sch_reg_dt = $('[name = sch_reg_dt]:checked').val();

            var postData = {
                "sch_num" : sch_num
                , "sch_title" : sch_title
                , "sch_reg_id" : sch_reg_id
                , "sch_reg_dt" : sch_reg_dt
            }

            // 방법 2
            /* var postData = {
                "sch_num" : $('#sch_num').val()
                , "sch_title" : $('#sch_title').val()
                , "sch_reg_id" : $('#sch_reg_id').val()
                , "sch_reg_dt" : $('[name = sch_reg_dt]:checked').val()
            } */

            $("#jqGrid").setGridParam({ // 파라미터 값 설정
                datatype : "json", // 말 그대로 데이터 타입
                postData : postData // 여기서 값 넣어도 됨
            }).trigger("reloadGrid"); // 재조회

        };


    });
</script>

끝!