jqGrid는 많은 데이터 테이블을 간편하게 관리하고 검색할 수 있는 강력한 그리드 라이브러리입니다. 하지만 사용자가 그리드를 사용할 때, 검색 결과가 없을 경우 이를 사용자에게 명확히 알려주는 기능을 추가하는 것이 UX 관점에서 매우 중요합니다. 이번 글에서는 jqGrid에서 검색 결과가 없을 때, "조회된 데이터가 없습니다."라는 메시지를 표시하는 방법에 대해 소개하겠습니다.
1. 준비
우선, 기본적인 HTML 구조와 jqGrid 관련 파일을 로드하는 과정이 필요합니다. 여기서는 jquery, jqGrid, 그리고 jquery-ui 관련 CSS 파일들을 CDN을 통해 가져와 사용하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jqGrid Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
<!-- 검색 결과가 없을 때 표시할 메시지 -->
<div id="noRecords">
<p>조회된 데이터가 없습니다.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
</body>
</html>위 코드에서 중요한 부분은 #noRecords라는 <div> 태그입니다. 이 태그는 검색 결과가 없을 때 사용자에게 표시될 메시지를 담고 있습니다. 처음에는 항상 숨겨져 있어야 하며, 검색 결과가 없을 때만 표시됩니다.
2. JS / CSS 코드
다음으로, 자바스크립트 코드를 사용하여 jqGrid에 로컬 데이터를 로드하고, 검색 결과가 없을 경우 #noRecords 메시지를 화면 중앙에 표시하는 로직을 구현하겠습니다.
$(document).ready(function () {
// 데이터 배열 정의
var mydata = []; // 초기엔 빈 배열로 설정하여 데이터 없음 상태로 시작
$("#grid").jqGrid({
datatype: "local", // 로컬 데이터 사용
data: mydata, // 위에서 정의한 배열을 사용
colModel: [
{ label: 'ID', name: 'id', key: true, width: 75 },
{ label: 'Name', name: 'name', width: 150 },
{ label: 'Age', name: 'age', width: 100 }
],
viewrecords: true,
autowidth: true,
height: 250,
rowNum: 10,
pager: "#pager",
loadComplete: function () {
if (this.p.reccount === 0) {
$("#noRecords").show(); // 검색 결과가 없을 때 메시지 표시
} else {
$("#noRecords").hide(); // 데이터가 있으면 메시지 숨기기
}
}
});이 코드는 기본적으로 jqGrid에 데이터를 로드할 때, 데이터가 없으면 #noRecords라는 메시지를 표시합니다. mydata 배열이 비어 있으므로 그리드에 데이터가 없을 때 해당 메시지가 보이게 됩니다.
#noRecords{
text-align: center;
position: absolute;
top: 150px;
left: 50%;
transform: translateX(-50%);
}이 CSS는 #noRecords 메시지를 그리드 중앙에 위치시키는 역할을 합니다. position: absolute와 transform: translateX(-50%) 속성을 사용해 화면의 정확한 가운데에 메시지를 배치했습니다.
3. 코드 실행 결과
위의 자바스크립트와 CSS 코드를 실행하면, jqGrid에서 검색 결과가 없을 때 아래와 같이 "조회된 데이터가 없습니다."라는 메시지가 화면 중앙에 표시됩니다.
See the Pen Untitled by park drake (@DrakeP) on CodePen.
- 데이터가 없을 경우: "조회된 데이터가 없습니다." 메시지가 나타납니다.
- 데이터가 있을 경우:
jqGrid에 정상적으로 데이터가 로드되며 메시지는 숨겨집니다.
jqGrid에서 검색 결과가 없을 때 사용자에게 메시지를 표시하는 방법을 소개했습니다. 이런 기능은 사용자 경험을 개선하는 데 매우 유용합니다. 특히, 데이터가 없을 경우 사용자가 혼란스럽지 않도록 명확한 메시지를 제공하는 것이 중요합니다.
'jQuery' 카테고리의 다른 글
| jQuery Zoomer를 이용하여 이미지를 확대 축소 해보자 (1) | 2024.09.06 |
|---|---|
| jQuery Migrate 플러그인 (0) | 2021.11.14 |
| [jQuery] 이벤트 중복 오류 해결 (이벤트가 두번 실행됩니다!) (0) | 2021.01.27 |
| 아이디, 비밀번호 입력란에 로그인 버튼 색 변경하기 (0) | 2020.12.11 |
| [jQuery] 아...이런 siblings;; (0) | 2020.11.07 |
댓글