안녕하세요. 터미네입니다.
이번 포스팅은 jqgrid를 ajax와 같이 사용하는 방법을 소개합니다.
jqGrid에서 mtype을 활용하여 POST 혹은 GET방식을 선택할 수 있고,
postData에 매개변수를 넣어서 서버에 전달할 수 있는데,
굳이 ajax를 같이 쓰는 이유는 무엇일까요?
그 이유는 jqGrid를 활용하지 않고
자체적으로 event 옵션을 개발하기 위함입니다.
이 포스팅을 읽으시기 전에
jqgrid 및 jquery가 세팅이 안되신 분들은
아래 배너를 통해 확인하시면 많은 도움이 되실거에요!
* jqgrid 세팅 및 jquery 세팅 *
jQuery jqgrid 기본사용법 정리 local 방식
안녕하세요. 터미네입니다. 이번 포스팅은 jQuery로 jqgrid를 사용하는 방법을 소개합니다. jqgrid는 엑셀처럼 표모양의 테이블을 쉽게 그려주는 라이브러리입니다. jqgrid를 사용하기위해서는 최소한
danbam.asbai.xyz
* ajax 사용법 *
jQuery ajax 사용법 정리
안녕하세요. 터미네입니다. 이번 포스팅은 jquery ajax 사용법을 소개합니다. 회사에서 ajax를 자주 애용하지만, 소스코드에 잘 코딩되어 있어서 유지보수하는 시스템 혹은 프로젝트 중에 소스를 복
danbam.asbai.xyz
자 본론으로 돌아와서
ajax로 데이터를 서버로 부터 호출 한뒤에
받은 데이터로 jqGrid 메소드를 실행하도록 하겠습니다.
예제 소스는 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.13.2/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="jqGrid-4.7.1/css/ui.jqgrid.css" />
<script type="text/javascript" src="jquery/jquery-3.6.3.min.js"></script>
<script src="jqGrid-4.7.1/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
<script src="jqGrid-4.7.1/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
useJqgrid();
});
function useJqgrid(){
$.ajax({
type : "POST",
contentType : "application/json; charset=utf-8",
url : "https://run.mocky.io/v3/2c54988e-0751-43b4-8a8e-ae7645d0ed47",
data : JSON.stringify({}), //mocky 서버여서 굳이 전달할 데이터가 없음
cache : false,
dataType: "JSON",
success : function(result){
console.log("결과 확인 : " + JSON.stringify(result));
try{
$("#mygrid").jqGrid({
colNames : ["이름", "나이", "취미"], //grid 해더 정의
colModel : [
{name : "name", width : 200, align: 'center'},// jsonSample 'name'키의 값
{name : "age", width : 50, align: 'center'},// jsonSample 'age'키의 값
{name : "hobby", width : 200, align: 'center'}// jsonSample 'hobby'키의 값
],
width:500,
height:300,
viewrecords: true,
datatype : "local",// local로 해야 ajax후의 결과값을 jqgrid에 적용이 가능
data : result.data, // 키가 "data" 임.
pager:"#mygridPager",
rownumbers: true
});
}catch(e){
console.log(e);
}
},
error : function(data, msg){
console.log("오류 : " + data);
}
});
}
</script>
</head>
<body>
<div style="margin: 10px">
<table id="mygrid"></table>
<div id="mygridPager"></div>
</div>
</body>
</html>위 예제 소스에 대한 결과는
이전 포스팅과 동일하게 나오겠죠?
아래 캡처화면과 같이 나옵니다.
여기까지 jqgrid를 ajax와 같이 사용하는 방법을
설명해 드렸습니다.
실습해보시고 궁금하신 사항이 있으시면
댓글로 문의사항 남겨주세요!
긴글 읽어주셔서 대단히 감사드립니다.
다음 포스팅 기대해주세요!
'자바 웹 > front-end' 카테고리의 다른 글
| 백틱 활용하여 자체 grid를 만들어보기 (0) | 2023.02.03 |
|---|---|
| jQuery jqgrid post, get 방식 사용 (0) | 2023.02.02 |
| jQuery jqgrid 기본사용법 정리 local 방식 (0) | 2023.02.02 |
| json을 배열화 하는 방법 (0) | 2023.02.02 |
| 자바스크립트 백틱(backtick) 사용 (0) | 2023.02.01 |