[jqGrid] 8. 고급 설정

JS/jqGrid

[jqGrid] 8. 고급 설정

인생아 2024. 9. 11. 12:50

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",
                height: 'auto',
                autowidth: true,
                multiselect: true // 다중 선택 기능 활성화
            });
        });
    </script>

</body>
</html>

설명: 위 예제에서는 multiselect: true 옵션을 추가하여 그리드에서 다중 선택이 가능하도록 설정했습니다. 사용자는 여러 행을 선택하고, 선택한 데이터를 한 번에 편집할 수 있습니다.

서브그리드 및 트리그리드 구현

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",
            height: 'auto',
            autowidth: true,
            subGrid: true, // 서브그리드 활성화
            subGridRowExpanded: function (subgrid_id, row_id) {
                var subgrid_table_id = subgrid_id + "_t";
                $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
                $("#" + subgrid_table_id).jqGrid({
                    url: "https://jsonplaceholder.typicode.com/posts?userId=" + row_id,
                    datatype: "json",
                    colNames: ['ID', 'Title', 'Body'],
                    colModel: [
                        { name: 'id', index: 'id', width: 60 },
                        { name: 'title', index: 'title', width: 150 },
                        { name: 'body', index: 'body', width: 200 }
                    ],
                    height: '100%'
                });
            }
        });
    });
</script>

설명: 이 예제는 subGrid 옵션을 통해 서브그리드를 추가한 예제입니다. 각 행을 클릭하면 해당 행과 관련된 추가 데이터가 서브그리드에 로드됩니다.

커스터마이징된 이벤트 핸들러 추가

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",
            height: 'auto',
            autowidth: true,
            onSelectRow: function (id) {
                alert('선택된 행 ID: ' + id);
            } // 사용자 맞춤형 이벤트 핸들러 추가
        });
    });
</script>

설명: 이 예제에서는 onSelectRow 이벤트 핸들러를 사용하여 사용자가 특정 행을 선택할 때마다 해당 행의 ID를 알림창으로 보여주는 기능을 구현했습니다. 이런 방식으로 다양한 사용자 인터랙션을 커스터마이징할 수 있습니다.

참고 사이트: jqGrid Documentation

저작자표시

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

[jqGrid] 12. 자주 발생하는 문제 해결 (FAQ) (0)	2024.09.12
[jqGrid] 11. 예제 프로젝트 (1)	2024.09.11
[jqGrid] 10. 자주쓰는 함수 (0)	2024.09.11
[jqGrid] 9. 성능 최적화 (0)	2024.09.11
[jqGrid] 7. 기능 확장 (0)	2024.09.11
[jqGrid] 6. 데이터 편집 및 수정 (0)	2024.09.10
[jqGrid] 5. 옵션 및 설정 (0)	2024.09.09
[jqGrid] 4. 데이터 로드 및 바인딩 (0)	2024.09.09

현재글[jqGrid] 8. 고급 설정

no 잼 no gain