[jqGrid] 2. 환경 설정 및 기본 설정

JS/jqGrid

[jqGrid] 2. 환경 설정 및 기본 설정

인생아 2024. 9. 9. 08:58

jqGrid를 사용하기 위해서는 먼저 기본 환경 설정을 완료해야 합니다. jqGrid는 jQuery를 기반으로 하므로, jQuery와 jqGrid 관련 CSS 및 JavaScript 파일을 프로젝트에 포함시켜야 합니다. 이를 통해 그리드 UI를 구현하고, 그리드 동작에 필요한 기능을 설정할 수 있습니다. jqGrid는 로컬 설치와 CDN 방식 두 가지 방법으로 설정할 수 있습니다. 여기서는 간단한 CDN 방식을 설명하고, 기본 설정을 통해 그리드를 생성하는 방법을 살펴보겠습니다.

1. CDN을 통한 jqGrid 설정

jqGrid는 CSS와 JavaScript 파일을 로드하여 작동합니다. 기본적으로 필요한 파일들은 다음과 같습니다:

jQuery: jqGrid는 jQuery를 기반으로 동작하기 때문에 필수적으로 포함해야 합니다.
jQuery UI: jqGrid의 UI 스타일과 상호작용을 위해 필요합니다.
jqGrid CSS: 그리드 레이아웃과 스타일을 정의하는 파일입니다.
jqGrid JavaScript: jqGrid의 주요 기능을 제공하는 스크립트입니다.

2. 기본 HTML 구조

그리드를 구현하기 위해서는 HTML 파일에 그리드를 표시할 테이블과 페이징을 위한 div 요소를 추가해야 합니다. 이 구조는 jqGrid가 데이터를 렌더링할 때 기반이 됩니다.

실행 가능한 예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jqGrid 환경 설정 예제</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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
</head>
<body>

    <table id="grid"></table>
    <div id="pager"></div>

    <script>
        $(document).ready(function () {
            $("#grid").jqGrid({
                url: 'https://jsonplaceholder.typicode.com/users', // 데이터를 가져올 URL
                datatype: "json", // 데이터 타입을 JSON으로 설정
                colNames: ['ID', 'Name', 'Username', 'Email'], // 그리드 헤더 이름
                colModel: [ // 각 컬럼의 설정
                    { name: 'id', index: 'id', width: 60, sorttype: "int" },
                    { name: 'name', index: 'name', width: 150 },
                    { name: 'username', index: 'username', width: 150 },
                    { name: 'email', index: 'email', width: 200 }
                ],
                rowNum: 5, // 한 페이지에 표시할 데이터 수
                rowList: [5, 10, 20], // 사용자가 선택할 수 있는 데이터 수 옵션
                pager: '#pager', // 페이징을 위한 요소
                sortname: 'id', // 기본 정렬할 컬럼
                viewrecords: true, // 총 레코드 수 표시 여부
                sortorder: "asc", // 정렬 순서
                caption: "기본 jqGrid 설정 예제", // 그리드 제목
                height: 'auto', // 그리드 높이를 자동 조절
                autowidth: true // 그리드 너비를 자동 조절
            });
        });
    </script>

</body>
</html>

3. 필수 설정 파일

jQuery: jqGrid는 jQuery를 기반으로 하므로, 반드시 jQuery 라이브러리를 포함해야 합니다.
jQuery UI: 그리드 스타일 및 UI 상호작용을 제공하는 jQuery UI도 필요합니다.
jqGrid CSS 및 JavaScript: 그리드 레이아웃과 주요 기능을 제공하는 jqGrid의 CSS 및 JavaScript 파일을 포함해야 합니다.

이러한 파일들은 CDN을 통해 쉽게 로드할 수 있으며, 로컬 파일로 설치하여 사용할 수도 있습니다. CDN 방식은 네트워크 속도가 빠르고, 최신 버전을 사용할 수 있는 장점이 있습니다.

4. 주요 옵션 설명

url: 데이터를 가져올 서버 경로입니다. REST API 또는 서버에서 제공하는 JSON, XML 데이터를 불러올 수 있습니다.
datatype: 데이터의 형식을 지정하는 옵션입니다. 주로 json이나 xml을 사용하며, 로컬 데이터를 사용할 경우 local을 지정합니다.
colNames: 그리드의 각 컬럼에 표시될 이름을 설정합니다.
colModel: 각 컬럼의 세부 설정을 정의합니다. 컬럼 이름, 인덱스, 폭, 정렬 방식 등을 설정할 수 있습니다.
rowNum: 한 페이지에 표시할 데이터의 수를 지정합니다.
pager: 페이징을 위한 요소를 지정합니다. 이 예제에서는 #pager라는 div 요소를 페이징으로 사용합니다.
autowidth: 그리드의 너비를 자동으로 조절하여 화면에 맞게 표시되도록 설정합니다.
viewrecords: 총 데이터 레코드 수를 표시할지 여부를 결정합니다.

이 예제는 로컬 개발 환경 또는 온라인 개발 환경에서 실행할 수 있으며, 실제 프로젝트에 매우 유용한 기본 설정 구조를 제공합니다.

저작자표시

'JS > jqGrid' 카테고리의 다른 글

[jqGrid] 6. 데이터 편집 및 수정 (0)	2024.09.10
[jqGrid] 5. 옵션 및 설정 (0)	2024.09.09
[jqGrid] 4. 데이터 로드 및 바인딩 (0)	2024.09.09
[jqGrid] 3. 기본 그리드 구성 (0)	2024.09.09
[jqGrid] 1. jqGrid 소개 (1)	2024.09.08
[jqgrid] edit cell close (0)	2018.11.14
jqgrid 행 추가 / 삭제 [ add row / delete row] (0)	2018.04.18
jqgrid 속성 (0)	2018.04.16

현재글[jqGrid] 2. 환경 설정 및 기본 설정

no 잼 no gain