jqGrid에서 JavaScript로 항목 감추기

jqGrid는 강력한 그리드 기반의 jQuery 플러그인으로, 대량의 데이터를 효율적으로 보여주기 위해 널리 사용됩니다. 특히 JavaScript와 결합하여 동적으로 항목을 제어할 수 있는 기능은 실무에서 매우 유용하게 활용됩니다. 이 문서에서는 jqGrid 항목 감추기에 중점을 두고, 실전에서 바로 적용 가능한 고급 기법과 함께 상세한 코드 예시, 문제 해결법 등을 제공하겠습니다.

jqGrid에서 컬럼 숨기기의 기초 원리

hidden 속성을 활용한 정적 숨김 설정

colModel에서 hidden: true 속성을 사용하면 초기 렌더링 시점에 특정 컬럼을 숨길 수 있습니다.

$("#grid").jqGrid({
    url: '/api/data',
    datatype: 'json',
    colNames:['ID','이름','이메일'],
    colModel:[
        {name:'id', index:'id', width:60, sorttype:"int"},
        {name:'name', index:'name', width:100},
        {name:'email', index:'email', width:150, hidden:true} // 이메일 컬럼 숨김
    ],
    rowNum:10,
    pager:'#pager',
    viewrecords:true,
    caption:"사용자 목록"
});

위 코드는 email 컬럼을 기본적으로 보이지 않도록 처리합니다.

jqGrid의 구조와 숨김 처리 흐름

1. colModel을 정의할 때 hidden:true로 초기 설정
2. 렌더링 후 JavaScript로 showCol() 또는 hideCol() 메서드로 제어 가능
3. 특정 이벤트(버튼 클릭, 셀 값 조건 등)에 따라 컬럼을 동적으로 숨김 처리 가능

반응형

JavaScript로 동적으로 jqGrid 항목 감추기

1. hideCol() 메서드를 활용한 동적 컬럼 감추기

hideCol()은 렌더링 이후에도 특정 컬럼을 숨길 수 있는 강력한 메서드입니다.

$("#grid").jqGrid('hideCol', 'email');

사용자 액션에 따라 특정 컬럼을 즉시 숨길 수 있습니다. 여러 컬럼을 한 번에 숨기고 싶을 경우, 배열을 사용할 수 있습니다.

$("#grid").jqGrid('hideCol', ['email', 'name']);

2. 조건 기반 컬럼 숨김 처리 (예: 특정 ID에만)

var rowData = $("#grid").jqGrid('getRowData', rowId);
if (rowData.id === "100") {
    $("#grid").jqGrid('hideCol', 'email');
}

조건문과 결합하여 특정 행의 값에 따라 컬럼 숨김이 가능합니다.

반응형

jqGrid 항목 감추기와 관련된 실무 예제

예제 1: 관리자만 볼 수 있는 컬럼 처리

var isAdmin = true; // 관리자 여부

if (!isAdmin) {
    $("#grid").jqGrid('hideCol', '관리자메모');
}

예제 2: 버튼 클릭 시 숨기기/보이기 토글

$("#toggleEmail").click(function() {
    var isHidden = $("#grid").jqGrid('getGridParam', 'colModel').find(c => c.name === 'email').hidden;
    if (isHidden) {
        $("#grid").jqGrid('showCol', 'email');
    } else {
        $("#grid").jqGrid('hideCol', 'email');
    }
});

위 예시는 이메일 컬럼을 사용자가 직접 토글할 수 있는 UI를 구성하는 데 매우 효과적입니다.

반응형

숨김 처리된 항목에 대한 데이터 유지 여부

숨겨진 컬럼은 그리드 내부에는 존재

jqGrid에서 hideCol()로 숨긴 컬럼은 단지 시각적으로만 보이지 않게 되는 것이며, 내부 데이터 구조에는 그대로 남아 있습니다. 따라서 다음과 같은 활용이 가능합니다.

• Excel 등으로 데이터 내보내기 시 포함
• 특정 컬럼의 데이터를 스크립트로 추출 가능
• 숨긴 상태에서 데이터 검색 및 조건 필터링 가능

var rowData = $("#grid").jqGrid('getRowData', 1);
console.log(rowData.email); // 숨겨져 있어도 접근 가능

반응형

반대로 컬럼 다시 보이게 하기: showCol() 사용법

숨긴 컬럼을 다시 보여주고 싶을 때는 showCol()을 사용합니다.

$("#grid").jqGrid('showCol', 'email');

또는 여러 컬럼을 한 번에 다시 표시:

$("#grid").jqGrid('showCol', ['email', 'name']);

이를 통해 사용자가 필요한 정보를 유동적으로 관리할 수 있습니다.

반응형

jqGrid 항목 감추기를 위한 고급 팁

동적 그리드 구성에서 숨김 처리 자동화

ajax로 동적으로 colModel을 구성할 때도 hidden 속성을 포함할 수 있습니다.

$.getJSON('/api/columns', function(columns) {
    columns.forEach(function(col) {
        if (col.name === 'password') {
            col.hidden = true;
        }
    });

    $("#grid").jqGrid({
        datatype: "json",
        url: "/api/data",
        colModel: columns,
        ...
    });
});

그리드 상태 저장과 숨김 유지

쿠키 또는 LocalStorage를 사용하여 사용자가 마지막으로 숨긴 컬럼을 저장하고, 재접속 시 동일한 상태로 유지할 수 있습니다.

// 저장
localStorage.setItem('hiddenCols', JSON.stringify(['email', 'memo']));

// 복원
var hiddenCols = JSON.parse(localStorage.getItem('hiddenCols'));
if (hiddenCols) {
    hiddenCols.forEach(col => $("#grid").jqGrid('hideCol', col));
}

반응형

jqGrid 항목 감추기 시 발생 가능한 문제 및 해결법

문제 1: 숨긴 컬럼이 그리드 폭을 계산에서 제외됨

해결 방법: autowidth:true 또는 shrinkToFit:false를 적절히 조정합니다.

$("#grid").jqGrid({
    shrinkToFit: false, // 숨김으로 인해 폭이 무너지는 문제 방지
    autowidth: true
});

문제 2: 숨긴 컬럼이 데이터 내보내기 시 제외되는 현상

일부 jqGrid 확장 플러그인에서 숨긴 컬럼이 제외되는 경우, export 옵션에서 includeHidden: true를 명시합니다.

문제 3: 숨긴 컬럼의 정렬/검색 오류

숨김 처리된 컬럼도 정렬 대상이 될 수 있으나, 사용자 혼란 방지를 위해 sortable:false, search:false 처리를 고려할 수 있습니다.

반응형

jqGrid 항목 감추기 기능을 위한 플러그인 및 확장 활용법

1. ColMenu 플러그인

사용자가 직접 컬럼 표시/숨김을 선택할 수 있는 UI를 제공합니다.

colMenu: true,
colMenuOptions: {
    columnVisibility: true
}

2. Custom Toolbar와 통합

사용자 정의 툴바 버튼을 구성해 동적 숨김 기능을 추가합니다.

$("#myToolbar").append('<button id="hideEmail">이메일 숨기기</button>');
$("#hideEmail").click(function() {
    $("#grid").jqGrid('hideCol', 'email');
});

반응형

결론

• hidden 속성과 hideCol()/showCol() 메서드를 적절히 조합
• 사용자 역할, 조건, 이벤트에 따른 동적 제어 전략 구성
• 저장 기능과 연계하여 사용자 환경 지속성 유지
• 고급 플러그인과 툴바 커스터마이징을 통해 UX 강화

실무 프로젝트에서 jqGrid 항목 감추기는 단순한 UI 제어를 넘어, 데이터 보안, 사용자 경험 향상, 동적 인터페이스 구축에 필수적인 요소입니다.