[jqGrid] 7. 기능 확장

JS/jqGrid

[jqGrid] 7. 기능 확장

인생아 2024. 9. 11. 09:05

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 },
                    { name: 'name', index: 'name', width: 150 },
                    { name: 'username', index: 'username', width: 150 },
                    { name: 'email', index: 'email', width: 200 }
                ],
                rowNum: 10,
                pager: '#pager',
                sortname: 'id',
                viewrecords: true,
                sortorder: "asc",
                caption: "필터링 및 검색",
                height: 'auto',
                autowidth: true,
                multiselect: true, // 다중 선택 가능
                search: true // 검색 기능 활성화
            });

            // 네비게이션 바에 검색창 추가
            $("#grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });
        });
    </script>

</body>
</html>

설명: 이 코드는 필터링 및 검색 기능을 구현한 예제입니다. filterToolbar 메서드를 통해 검색창을 그리드 상단에 추가할 수 있으며, 각 열에 대해 필터링 옵션을 제공합니다.

그리드 정렬 및 페이징 설정

jqGrid는 기본적으로 정렬과 페이징 기능을 제공합니다. 이를 통해 많은 양의 데이터를 효과적으로 관리할 수 있으며, 특정 열에 대한 정렬을 쉽게 구현할 수 있습니다.

정렬 및 페이징 설정 예제

<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, sortable: true }, // 정렬 가능
                { name: 'name', index: 'name', width: 150, sortable: true }, // 정렬 가능
                { name: 'username', index: 'username', width: 150 },
                { name: 'email', index: 'email', width: 200 }
            ],
            rowNum: 10, // 한 페이지에 10개의 데이터 표시
            rowList: [10, 20, 30], // 페이지당 표시할 데이터 수 선택 옵션
            pager: '#pager', // 페이징 표시
            sortname: 'id', // 기본 정렬 컬럼
            sortorder: "asc", // 기본 정렬 순서
            viewrecords: true, // 총 레코드 수 표시
            caption: "정렬 및 페이징 설정",
            height: 'auto',
            autowidth: true
        });
    });
</script>

설명: 이 코드는 그리드 내에서 정렬과 페이징을 설정하는 예제입니다. sortable: true 옵션을 통해 각 열을 정렬 가능하게 설정하며, rowList 옵션을 통해 사용자가 한 페이지에 표시할 데이터 수를 선택할 수 있습니다.

사용자 정의 버튼 및 액션 추가하기

jqGrid는 그리드 상단에 사용자 정의 버튼을 추가하고, 이를 통해 사용자 정의 액션을 실행할 수 있습니다. 예를 들어, 데이터를 특정 방식으로 필터링하거나 그리드 데이터를 엑셀 파일로 내보낼 수 있습니다.

사용자 정의 버튼 추가 예제

<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 },
                { name: 'name', index: 'name', width: 150 },
                { name: 'username', index: 'username', width: 150 },
                { name: 'email', index: 'email', width: 200 }
            ],
            rowNum: 10,
            pager: '#pager',
            sortname: 'id',
            viewrecords: true,
            sortorder: "asc",
            caption: "사용자 정의 버튼 추가",
            height: 'auto',
            autowidth: true
        });

        // 사용자 정의 버튼 추가
        $("#grid").navButtonAdd('#pager', {
            caption: "Custom Button", // 버튼에 표시될 텍스트
            buttonicon: "ui-icon-plus", // 아이콘 설정
            onClickButton: function () { 
                alert("사용자 정의 버튼 클릭됨!");
            },
            position: "last" // 버튼의 위치 설정
        });
    });
</script>

설명: navButtonAdd 메서드를 사용하여 그리드에 사용자 정의 버튼을 추가할 수 있습니다. 이 버튼을 클릭했을 때 특정 작업을 수행하도록 설정할 수 있습니다. 위 예제에서는 간단한 알림창이 뜨도록 설정했습니다.

참고 사이트: jqGrid Documentation

저작자표시

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

[jqGrid] 11. 예제 프로젝트 (1)	2024.09.11
[jqGrid] 10. 자주쓰는 함수 (0)	2024.09.11
[jqGrid] 9. 성능 최적화 (0)	2024.09.11
[jqGrid] 8. 고급 설정 (1)	2024.09.11
[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] 7. 기능 확장

no 잼 no gain