안녕하세요.. 스프링부트에서 jqgrid를 사용하는 중 loadonce 옵션을 true로 주었고, 한번 로드된 데이터를 통해서 search 기능을 사용하는 도중 에러가 발생하였습니다.
3일 동안 찾아봤는데 뭐가 문제인지 모르겠습니다.. 조언 부탁드립니다.
밑에는 제가 사용한 코드입니다. 데이터는 정상적으로 출력이 되는데.. toolbar를 이용한 검색이나
navGrid에 돋보기 아이콘을 이용한 검색을 하면 위와같은 에러가 나면서 '조회중..'에서 멈춰버립니다..
<head>
<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" media="screen" href="/resources/css/ui.jqgrid-bootstrap4.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="/resources/jqueryUI/jquery-ui.min.css"/>
<script src="/resources/js/jquery-1.11.0.min.js"></script>
<script>
// jQuery import 바로아래에 넣어 주면 됩니다.
// Cannot read property 'msie' of undefined 에러 나올때
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}
})();
</script>
<script type="text/javascript" src="/resources/js/i18n/grid.locale-kr.js"></script>
<script type="text/javascript" src="/resources/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="/resources/jqueryUI/jquery-ui.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function ($) {
$("#jqGrid").jqGrid({
url: "http://localhost:8080/employee/getlist",
datatype: 'json',
mtype: 'GET',
colNames: ['ID','구분', '회사명', '부서', '이름', '연락처', '휴대전화', 'Email'],
colModel: [
{name: "employeeId",index:"employeeId", width: 50,align:'center', key:true, hidden:true, search: true},
{name: "codeUpper",index:"codeUpper", width: 100,align:'center', search: true},
{name: "codeName", index:"codeName", width: 120,align:'center', search: true},
{name: "departmentName", index:"departmentName", width: 150,align:'center', search: true},
{name: "employeeName", index:"employeeName", width: 150,align:'center', search: true},
{name: "employeeContact", index:"employeeContact", width: 220,align:'center', search: true},
{name: "employeePhone", index:"employeePhone", width: 220,align:'center', search: true},
{name: "employeeEmail", index:"employeeEmail", width: 220,align:'center', search: true},
],
pager: '#pager',
loadonce: true,
rowNum: 10,
rownumbers: true,
gridview: true,
width: 'auto',
height: 'auto',
rowList: [5, 10, 20, 50],
viewrecords: true,
caption: 'employee-List',
autoencode: true,
jsonReader: {
// root: "rows",
// page: "page",
// total: "total",
// records: "records",
repeatitems: false,
id:"0",
},
}).navGrid('#pager', { edit:true, add:true, del:true, search:true, refresh:true });
$("#jqGrid").jqGrid('filterToolbar', {searchOperators : true ,stringResult: true, searchOnEnter: true });
</script><body>
<div>
<table id="jqGrid"><tr><td/></tr></table>
<div id="pager"></div>
</div>
</body>
