[jqGrid] 1. jqGrid 소개

JS/jqGrid

[jqGrid] 1. jqGrid 소개

인생아 2024. 9. 8. 23:33

jqGrid는 웹 애플리케이션에서 표 형식의 데이터를 효율적으로 관리하고 표시할 수 있도록 도와주는 JavaScript 그리드 플러그인입니다. jQuery를 기반으로 동작하며, JSON, XML 등 다양한 데이터 포맷을 지원합니다. 이를 통해 서버나 클라이언트에서 데이터를 가져와 그리드 형태로 화면에 출력할 수 있습니다. jqGrid는 데이터의 페이징, 정렬, 검색 및 편집과 같은 기본 기능을 제공하며, 사용자가 요구하는 다양한 방식으로 커스터마이징이 가능합니다.

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',
                datatype: "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>

url 속성에서 제공하는 JSON 데이터를 로드해 표 형식으로 화면에 출력합니다. 페이징 기능도 포함되어 있으며, 사용자가 페이지당 표시할 데이터의 수를 조절할 수 있습니다.

jqGrid의 주요 기능

페이징: jqGrid는 페이징 기능을 기본으로 제공하여 대용량 데이터를 효과적으로 관리할 수 있습니다. 사용자는 원하는 페이지로 이동하거나, 페이지 당 표시할 행의 수를 선택할 수 있습니다.
정렬: 컬럼의 헤더를 클릭하면, 해당 컬럼을 기준으로 데이터를 정렬할 수 있습니다. 오름차순과 내림차순 정렬을 지원하며, 다양한 데이터 형식에 대한 정렬을 빠르게 처리할 수 있습니다.
데이터 편집: jqGrid는 인라인 편집 기능을 제공하여, 그리드 상에서 데이터를 바로 수정할 수 있습니다. 이를 통해 사용자는 데이터를 빠르게 편집하고, 서버와의 동기화 작업도 쉽게 구현할 수 있습니다.
검색 및 필터링: 그리드에 표시된 데이터를 검색하거나 필터링할 수 있는 기능을 제공합니다. 사용자는 특정 조건에 맞는 데이터를 빠르게 추출하여 볼 수 있습니다.
다양한 데이터 포맷 지원: JSON, XML 등 다양한 형식의 데이터를 지원하여 서버와 쉽게 연동할 수 있습니다. 이러한 포맷의 유연성은 서버에서 데이터를 처리하고 클라이언트로 전달하는 데 있어 매우 유용합니다.
커스터마이징 가능성: jqGrid는 기본 제공되는 테마 외에도, CSS를 통해 그리드의 스타일을 자유롭게 커스터마이징할 수 있습니다. 이를 통해 사용자 맞춤형 인터페이스를 구현할 수 있습니다.

저작자표시

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

[jqGrid] 5. 옵션 및 설정 (0)	2024.09.09
[jqGrid] 4. 데이터 로드 및 바인딩 (0)	2024.09.09
[jqGrid] 3. 기본 그리드 구성 (0)	2024.09.09
[jqGrid] 2. 환경 설정 및 기본 설정 (0)	2024.09.09
[jqgrid] edit cell close (0)	2018.11.14
jqgrid 행 추가 / 삭제 [ add row / delete row] (0)	2018.04.18
jqgrid 속성 (0)	2018.04.16
jqGrid 각 cell에 Text 길이에 따른 ellipsis 처리 (0)	2017.04.27

현재글[jqGrid] 1. jqGrid 소개

no 잼 no gain