안녕하세요. 터미네입니다.
이번 포스팅은 백틱으로 jqgrid처럼 만드는 것을 소개합니다.
jqgrid가 무엇인지 모르시는 분들은
아래에 배너 클릭하셔서 꼭 한 번 봐주시면 되겠습니다.
* jqgrid 기본사용법 *
jQuery jqgrid 기본사용법 정리 local 방식
안녕하세요. 터미네입니다. 이번 포스팅은 jQuery로 jqgrid를 사용하는 방법을 소개합니다. jqgrid는 엑셀처럼 표모양의 테이블을 쉽게 그려주는 라이브러리입니다. jqgrid를 사용하기위해서는 최소한
danbam.asbai.xyz
백틱에 대해 잘 모르시는 분들은
아래 배너로 들어가셔서 한 번 확인해주세요.
* 자바스크립트 백틱 사용 *
자바스크립트 백틱(backtick) 사용
안녕하세요. 터미네입니다. 이번 포스팅은 자바스크립트에 백틱 을 소개합니다. 백틱이란? 기호는 ` 를 말한다. 윈도우 키보드에서는 1 왼쪽에 ~ 모양이 있는데 Shift키를 누르면 백틱을 칠 수 있
danbam.asbai.xyz
본론으로 돌아와서 자바스크립트 백틱을 사용하여
jqgrid처럼 만들어볼까 합니다.
디자인적인 문제는 뒤로하고
기능적으로 jqgrid와 동일하게 구성하되,
백틱을 활용하여 개발해보겠습니다.
html 예제소스와 js 예제소스를
아래와 같이 구성해 보겠습니다.
두 개의 소스는 같은 디렉토리에 있습니다.
*customgrid.html*
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="backtickgrid.js"></script>
<script>
let jsonSample = {
"data" : [
{"name": "홍길동", "age" : 36, "hobby" : "바둑"},
{"name": "이누야", "age" : 30, "hobby" : "앉기"},
{"name": "김가영", "age" : 28, "hobby" : "개훈련"},
{"name": "임꺽정", "age" : 50, "hobby" : "검도"}
]
}
$(document).ready(function(){
backtickgrid();
});
function backtickgrid(){
// backtickgrid라는 기능을 만들었음. 해당 기능은 backtickgrid.js에 정의되어있음.
$("#mygrid").backtickgrid({
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,
listData: jsonSample.data
});
}
</script>
</head>
<body>
<div style="margin: 10px">
<table id="mygrid"></table>
</div>
</body>
</html>
* backtickgrid.js *
$.fn.backtickgrid = function (obj) {
let target = {
url : "",
colModel: [],
colNames: [],
listData : [],
width: 500,
height: 300,
nodataMsg : "데이터가 없습니다."
}
let p = $.extend(true, target, obj);
let html = ``; //html 변수를 백틱타입으로 선언
let defaultStyle = `border: 1px solid black;`;
if(p.listData.length>0){
//colNames와 colModel의 길이가 같은지 확인
if(p.colNames.length != p.colModel.length){
alert('colModel과 colNames의 길이가 같이 않습니다.');
return false;
}
if(p.colNames.length == 0 || typeof p.colNames === "undefined"){
alert('colNames이 정의되지 않았습니다.');
return false;
}
if(p.colModel.length == 0 || typeof p.colNames === "undefined"){
alert('colModel이 정의되지 않았습니다.');
return false;
}
$(this).empty();
$(this).attr("style", "${defaultStyle}; border-collapse: collapse;");
//테이블 해더 만들기
html += `<tr>`;
$.each(p.colNames, function(i, listItem){
html += `<th style="${defaultStyle}">`;
html += `${listItem}`;
html += `</th>`;
});
html += `</tr>`;
$.each(p.listData, function(i, listItem){//listData
html += `<tr>`;
$.each(p.colModel, function(j, column){//colModel
html += `<td style="${defaultStyle}; width: ${column.width}px; text-align: ${column.align}">`;
html += `${listItem[column.name]}`;
html += `</td>`;
});
html += `</tr>`;
});
$(this).append(html);
}else{//데이터가 없을 경우
}
}
backtickgrid는 제가 직접 만들어본 메소드입니다.
jqgrid를 모방해서 만들었으며,
다른점은 백틱을 사용하여 템플릿 리터럴을 사용했다는 점입니다.
$.each 문에 대해 궁금하시면 아래 배너 클릭!
jQuery each문 사용법
안녕하세요. 터미네입니다. 이번 포스팅은 jQuery each문 사용을 소개합니다. each문 사용은 언제쓰냐면, 해당요소에 대해 여러개의 요소들을 처리할 때 사용합니다. 제가 요소라고 부르는 곳에는 id
danbam.asbai.xyz
backtickgrid.js가 많이 길어보이겠지만,
간략히 설명드리면
1. jqgrid처럼 colModel 및 colNames를 정의하고
2. data를 정의하고
3. <table>태그에 <th>와<td>를 만드는 로직
을 만든 것입니다.
거기에 추가적으로 백틱을 사용했을 뿐이고요.
디자인은 적용하지 않아 이쁘진 않겠지만
위 소스의 결과물은 아래 캡처화면과 같습니다.
백틱을 활용한 자체 grid를 만드는것은 여기까지 이야기 하겠습니다.
페이징 처리와 ajax 비동기 방식으로 서버에 데이터 요청에 따른
렌더링할 수 있게 개발하는 것은
다음 포스팅에서 있으니
많은 관심 부탁드립니다.
디자인은.. 최후의 최후가 되면 최종 css를 만든 후
마지막으로 공개하겠습니다.
긴글 읽어주셔서 대단히 감사합니다.
'자바 웹 > front-end' 카테고리의 다른 글
| jqgrid를 ajax와 같이 사용하기 (0) | 2023.02.02 |
|---|---|
| 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 |