태그
#JQGRID
jqGrid setGridParam으로 검색하는 방법
2021년 11월 3일 17:42

값을 받아서 검색하는 방법 정리
(편의를 위해 바디와 스크립트 부분만 작성할게여)
<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>
끝!