안녕하세요. 터미네입니다.
이번 포스팅은 jqgrid의 post 방식 및 get 방식을 소개합니다.
해당 포스팅을 보시기 전에
mocky를 처음 사용해보신 분들이 계시면
아래 배너를 클릭하셔서 사용법을 보시고 오시면 도움이 될거에요.
mocky를 사용하여 API처럼 활용해보기
안녕하세요. 터미네입니다. 이번 포스팅은 mocky 서비스에 대해 소개합니다. mocky는 데이터 응답값을 미리 정해서 사용할 수 있는 서버 서비스입니다. 보통 Front-End 개발자 분들이 실제 데이터가 DB
danbam.asbai.xyz
자 본론으로 돌아와서
jqgrid post방식을 보여드리겠습니다.
예제 실습소스는 아래와 같습니다.
<!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(){
// 첫번째, jqGrid 선언부 가장 중요!!
$("#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,
pager:"#mygridPager",
url : "https://run.mocky.io/v3/2c54988e-0751-43b4-8a8e-ae7645d0ed47",
postData:{},//request시, 보내는 데이터
mtype: "POST", //GET방식도 가능
datatype: "JSON", //xml도 가능
jsonReader:{
root:"data"// 응답데이터에서의 키값은 data이다
},
rownumbers: true
});
}
</script>
</head>
<body>
<!-- 두번째, jqGrid를 그리는 곳 가장 중요!! -->
<div style="margin: 10px">
<table id="mygrid"></table>
<div id="mygridPager"></div>
</div>
</body>
</html>이전 포스팅에서 mocky 서비스에서
response data를 미리 만들었습니다.
url에 있는 도메인을 호출하면
아래와 같은 데이터가 응답으로 옵니다.
"data"라는 키에 jqgrid에 들어갈 데이터가 있으므로
jsonReader에 root에는 "data"라는 키값이 들어가야하죠.
{
"data" : [
{"name": "홍길동", "age" : 36, "hobby" : "바둑"},
{"name": "이누야", "age" : 30, "hobby" : "앉기"},
{"name": "김가영", "age" : 28, "hobby" : "개훈련"},
{"name": "임꺽정", "age" : 50, "hobby" : "검도"}
]
}jqgrid에서 중요포인트는
colNames의 length와 colModel의 length는 같아야 됩니다.
다르면, jqgrid가 아예 안뜨죠.
위 예제소스의 결과는 아래 캡쳐사진과 같습니다.
그 밖의 정보들은
예제 소스에 간략히 주석으로 넣었습니다.
참고해주시면 되겠습니다.
jqgrid에서 colNames, colModel 및 기타 옵션에 대한 설명은
다음포스팅에 따로 자세하게 설명하도록 하겠습니다.
긴글 읽어주셔서 대단히 감사합니다.
'자바 웹 > front-end' 카테고리의 다른 글
| 백틱 활용하여 자체 grid를 만들어보기 (0) | 2023.02.03 |
|---|---|
| jqgrid를 ajax와 같이 사용하기 (0) | 2023.02.02 |
| jQuery jqgrid 기본사용법 정리 local 방식 (0) | 2023.02.02 |
| json을 배열화 하는 방법 (0) | 2023.02.02 |
| 자바스크립트 백틱(backtick) 사용 (0) | 2023.02.01 |